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

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

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

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



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


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

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;
}
Для ее вызова
добавляем
     
overrideCtx.OnPostRender = [ FormattingRow ]; 
перед
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

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

Задача три – выделить цветом просроченные
Для этого нам нужно сравнить текущее время машины с значением поля дата в SharePoint. Но так как поле в SharePoint имеет вид dd.mm.yyyy 00:00 а в javascript текущее время имеет вид  Fri Oct 31 09:43:13 UTC+0300 2014.
Нам нужно преобразрование даты SharePoint в занчение даты с котоым работает javascript.
В начале я распарсил значение поля а потом значения передал в функцию которая преобразует в требуемый формат
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 и получаем в ответ требуемое значение даты и времени.

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




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



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



В веб-частях можно включить ajax и все будет работать. при обновлении содержимого веб-части происходить обновления и цвета и статистики.
 Вот весь код :
(function () {
 var overrideCtx = {};
 overrideCtx.Templates = {};

 // выделяем жирным
 overrideCtx.Templates.Fields = {  
  //'Created': { 'View' : '<#=ctx.CurrentItem.Created#>' },
  'DueDate1': { 'View' : '<#=ctx.CurrentItem.DueDate1#>' }
  
 };
  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)