пятница, 31 октября 2014 г.

Представление списка, форматирование, статистика в названии веб части.(jQuery + SharePoint 2013 Fields Part 2)

Сегодня, в продолжении темы jQuery + SharePoint 2013 Part 1, я поделюсь своими наработками в применении javascript в представлениях списка.
задачи:
Первая задача – выделение жирным одно поле.
Задача два – форматирование в зависимости от значения поля.
Задача три – выделить цветом просроченные.
Задача четыре – статистика по выполнению.

вот полученный результат



Первая задача – выделение жирным одно поле.
Переопределяем шаблон отображения 
?
1
2
3
4
5
6
7
8
9
(function () {
            var overrideCtx = {};
            overrideCtx.Templates = {};
            // выделяем жирным поле Created, используем internalName поля
            overrideCtx.Templates.Fields = {                      
                        'Created': { 'View' : '<b><#=ctx.CurrentItem.Created#></b>' },
                        };
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();


Задача два – форматирование в зависимости от значения поля
Добавляем функцию форматирования

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function FormattingRow (inCtx)
{
for (var i =0; i< inCtx.ListData.Row.length; ++i)
            {                    
                        var listItem = inCtx.ListData.Row[i];
                        var iid = GenerateIIDForListItem(inCtx, listItem);
                        var row = document.getElementById(iid);
                        if (listItem.Status == "Отложенные")
                                   {
                                   if (row != null)                                           
                                   row.style.backgroundColor = "rgba(253,213,152,1)";                    
                                   }
                        if (listItem.Status == "В работе")
                                   {
                                   if (row != null)                                           
                                   row.style.backgroundColor = "rgba(201,245,206,1)";                                
                                   }                                
 
            }        
inCtx.skipNextAnimation = true;
}
Для ее вызова
добавляем
     
?
1
overrideCtx.OnPostRender = [ FormattingRow ];
перед
?
1
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

В предыдущем примере

Задача три – выделить цветом просроченные
Для этого нам нужно сравнить текущее время машины с значением поля дата в SharePoint. Но так как поле в SharePoint имеет вид dd.mm.yyyy 00:00 а в javascript текущее время имеет вид  Fri Oct 31 09:43:13 UTC+0300 2014.
Нам нужно преобразрование даты SharePoint в занчение даты с котоым работает javascript.
В начале я распарсил значение поля а потом значения передал в функцию которая преобразует в требуемый формат
?
1
2
3
4
5
6
7
8
9
10
11
12
function getDateTime(itemData) {
            // из даты SP фирмируем дату для корректного сравнения
            var arrDate = (itemData.replace(' ','.')).split('.')
            var arrTime = arrDate[3].split(':')
            var yar = arrDate[2]
            var month = arrDate[1]-1
            var day = arrDate[0]
            var hours = arrTime[0]
            var minute = arrTime[1]
            var dateTime = new Date (yar,month,day,hours,minute,0)
return dateTime;
}



При вызове функции передаем значение поля SharePoin и получаем в ответ требуемое значение даты и времени.

Задача четыре – статистика по выполнению
Так как у нас форматирование (окрашивание просроченных и в зависимости от статуса) проходит циклом по всем элементам вебчасти. То можно добавить переменные для подсчета количестава (это не сложно). Но возник опрос куда и ка вывести полученные данные и я решил менять название вебчасти.
Название можно получить
?
1
var titleWP = $( '#WebPartCaption… ').parent().text()



но что делать, когда на странице несколько веб частей?
У каждой веб-части на странице есть свой уникальный wpq, вот получив его мы и можем потом поменять название у конкретной веб-части.
Его получить можно -  inCtx.wpq
Так вызвать функцию по смене названия
?
1
2
var statistics = 'Всего заявок - ' + allCount +', В работе - ' + workCount + ', Отложенных - ' +  deferredCount +', Просроченных - ' +overdueCount
setWPTitle(statistics, inCtx.wpq)


вот функция смены названия
?
1
2
3
4
5
6
7
function setWPTitle(stat, wpq)
{
            //        изменяем название вебчасти
            var newWPQ = '#WebPartCaption'+ wpq // получаем текущую вебчасть
            var newTitleWP = ': '+ stat //формируем новое название
            $(newWPQ).text(newTitleWP)
}



В веб-частях можно включить ajax и все будет работать. при обновлении содержимого веб-части происходить обновления и цвета и статистики.
 Вот весь код :
?
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
(function () {
 var overrideCtx = {};
 overrideCtx.Templates = {};
 
 // выделяем жирным
 overrideCtx.Templates.Fields = { 
  //'Created': { 'View' : '<b><#=ctx.CurrentItem.Created#></b>' },
  'DueDate1': { 'View' : '<b><#=ctx.CurrentItem.DueDate1#></b>' }
   
 };
  overrideCtx.OnPostRender = [ FormattingRow ];
 
 
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
 
function FormattingRow (inCtx)
{
var deferredCount = 0
var workCount = 0
var overdueCount = 0
var allCount = 0
for (var i =0; i< inCtx.ListData.Row.length; ++i)
 {
  allCount = allCount+1
  var listItem = inCtx.ListData.Row[i];
  var iid = GenerateIIDForListItem(inCtx, listItem);
  var row = document.getElementById(iid);
  var now = new Date() // получаем текущую дату
   
  var itemData = getDateTime(listItem.DueDate1)
  if (itemData < now )
   {
   overdueCount = overdueCount + 1
   if (row != null)   
    row.style.backgroundColor = "rgba(255, 0, 0, 0.5)";  //red  
    
   }
  else
   {
    if (listItem.Status == "Отложенные")
     {
     deferredCount = deferredCount + 1
      //alert("listItem.Status");
      //row.style.backgroundColor = "rgba(255, 0, 0, 0.5)";
      if (row != null)   
       row.style.backgroundColor = "rgba(253,213,152,1)";    
    
     }
    if (listItem.Status == "В работе")
     {
      workCount = workCount + 1
      if (row != null)   
      row.style.backgroundColor = "rgba(201,245,206,1)";    
      
     }
     
   }
 
 
 }
 var statistics = 'Всего заявок - ' + allCount +', В работе - ' + workCount + ', Отложенных - ' +  deferredCount +', Просроченных - ' +overdueCount
 // alert (statistics)
 setWPTitle(statistics, inCtx.wpq)
  
inCtx.skipNextAnimation = true;
}
function setWPTitle(stat, wpq)
{
 // изменяем название вебчасти
 var newWPQ = '#WebPartCaption'+ wpq // получаем текущую вебчасть
 var newTitleWP = ': '+ stat //формируем новое название
 $(newWPQ).text(newTitleWP)
}
function getDateTime(itemData) {
 // из даты SP фирмируем дату для корректного сравнения
 var arrDate = (itemData.replace(' ','.')).split('.')
 var arrTime = arrDate[3].split(':')
 var yar = arrDate[2]
 var month = arrDate[1]-1
 var day = arrDate[0]
 var hours = arrTime[0]
 var minute = arrTime[1]
 var dateTime = new Date (yar,month,day,hours,minute,0)
return dateTime;
}

Релевантные ссылки:

Свойство полей readonly и disabled в формах  NewForm и EditForm (jQuery + SharePoint 2013 Fields Part 1)
Работа с полями элемента с помощью jQuery (jQuery + SharePoint 2013 Fields Part 3)
Работа с полями элемента с помощью jQuery в EditForm (jQuery + SharePoint 2013 Fields Part 4)
Теги: , , , , ,
Автор:

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

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

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