четверг, 5 ноября 2015 г.

Options Groups в Lookup поле SharePoint 2013

В сегодняшней статье я расскажу, как можно добавить options group в поле подстановка.


Коллеги попросили «допилить» поле подстановка, что бы можно было быстро понять к чему относится элемент выбора. Вот и решил им помочь.
К примеру у нас есть список Phones, который содержит два поля Title и Brand (поле типа «выбор»)

Хорошо бы сгруппировать по полю Brand… Тут на помощь нам придет jQuery и Rest запрос.
Немного расскажу о работе скрипта:
1. Обращаемся в список и получаем требуемые элементы.
2. Если вернувшийся массив не пуст, то запоминаем ранее выбранный элемент (удобно в форме EditForm.aspx)
3. Чистим все значения в поле.
4. Добавляем группы и options

5. Возвращаем выбранное значение.

Теперь сам скрипт
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script src="/Style%20Library/Js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("postRender");
function postRender()
{
 optionGroup()
}
 
function optionGroup()
{
 var fieldId = "Phone" // Id Loocup поля
 var listTitle = "Phones"; // название списка
 var selectFields = ["ID","Title","Brand"]; // возвращаемые поля
 var expandFields = [];
 var filter = ""
 var orderBy = "Brand,Title" //сортировка значений
  query = getRest(listTitle,"",filter, selectFields.join() , expandFields.join(), orderBy);
  query.done(function (data, status, xhr) {  
   if(data.d.results.length > 0)
   {
 var targetSelect = jQuery("select[id^='" + fieldId + "_']");
    var items = data.d.results;
    var selectedVal = targetSelect.val();
    // очистка селекта
    removeSelectOptions(fieldId + "_")
    var optionGroup = {};
    var idGrop = 0;
    for(var i = 0; i < items.length ; i++)
    {     
     var item = items[i];     
     var value = item.Id;
     var text = item.Title; // заменить на требуемое
     var groupBy = item.Brand; // заменить на требуемое поле
 
     var o = new Option();    
     o.value = value;
     o.text =  text;
     if (!optionGroup[groupBy])
     {
 
      idGrop ++
      optionGroup[groupBy] = idGrop;      
      targetSelect.append('<optgroup id="OptionGroup' + optionGroup[groupBy] + '" label="'+ groupBy +'"></optgroup>');     
       
     };
     jQuery("#OptionGroup" + optionGroup[groupBy]).append(o);   
    }
    // возваращаем выбранное значение
    targetSelect.val(selectedVal);
     
   }
   else{
    console.log("элементы не найдены");
     
   }
  });
  query.fail(function (){console.log('Ошибка при получении ' + listTitle );  });
}
 
function getRest(listTitle,itemId,filter,select,expand,orderby,asyncVal)
{
 orderby = orderby ? orderby : "" ;
 var webUrl = _spPageContextInfo.webAbsoluteUrl;
 var listItemUri = webUrl + "/_api/web/lists/GetByTitle('"+ listTitle + "')/Items("+itemId+")?$filter="+filter+"&$select="+select+"&$expand=" + expand+ "&$orderby=" + orderby;
 listItemUri = encodeURI(listItemUri);
 console.log(decodeURI(listItemUri));
 //console.log("asyncVal", asyncVal);
 asyncVal = ("") ? false : true;
  
 queryAjax = jQuery.ajax({
      async: asyncVal,
      url: listItemUri,
      type: "GET",
      headers: { "accept": "application/json;odata=verbose" }
     });
 queryAjax.done(function (data){ console.log('данные REST полученны')}); 
 queryAjax.fail(function (){console.log('Ошибка при вылнении запроса REST')});
 return queryAjax;
}
function removeSelectOptions(fieldID)
{
 jQuery("select[id^='" + fieldID +"']").find("option").each(function() {
  if (jQuery(this).val() != 0)
  {
   jQuery(this).remove();
  }    
 });
}
</script>

как пользоваться:
нужно заменить  Id Loocup поля, название списка откуда будут получаться данные, получаемые поля. так же заменить "item.Brand" на "item. Internal Name " поля по которому будет группировка.
так же можно добавить фильтр, и тем самым поле будет содержать часть значений (Cascade Dropdowns),   

Скрипт можно скачать тут
Теги: , , ,
Автор:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)