Свои цвета в календаре.

Как возможно вы уже знаете, календари (представления календарей) можно объединять в один и разные календари выделить цветом. Но цветов не много и свои указать нет возможности.

Всплывающие подсказки - callout

В этой статье я расскажу, как можно добавить Callout (popover от MS).

Я не буду в даваться в детали, т.к. примеров в инете достаточно, а покажу как можно сделать универсальное решение.

Опрос с картинками (Sharepoint Survey Image Question)

Появилась задача по созданию голосования для выбора лучшей фотографии.
есть стандартный функционал голосования, но в нем нет возможности вставить изображения.


И пришлось прибегнуть к кастомизации страницы с помощью jQuery. Так же для зумирования изображения была использована библиотека ImageViewer.

Ссылка на просмотр свойств документа в представлении списка

В этой статье я расскажу как можно переопределить шаблон рендера поля и вывести ссылку на просмотр свойств документа.
по умолчанию что бы добраться до свойств документа нужно сделать несколько кликов.

В коже представленном ниже происходит замена значение поля "Изменено" на ссылку, ведущую в форму просмотра свойств документа.

Удаление ссылки с поля подстановки в представлении списка.

В этой статье я расскажу, как можно убрать ссылки с Lookup поля в представлении. Для этого мы переопределим шаблон рендера полей.
Для этого нам нужно или создать файл js и подключить его к веб-части через jsLink, можно добавить ссылку на файл через веб-часть «Редактор скриптов» или можно просто добавить код непосредственно в веб-часть «Редактор скриптов».

представления в списке Доска обсуждений

При создании списка «Доска обсуждений» мы получаем представление AllItems.aspx которое не доступно для редактирования. Если присмотрится внимательно, то можно заметить, что переключение между отображением информации происходит через JS .

Немного углубившись я заметил следующее:

Изменение отображения происходит при вызове функции

SP.UI.Discussions.SortFilterItem.onPivotControlMenuOptionClick('SortItem1')

При изменении параметра меняется отображение данных.Использование SortItem1 равносильно нажатию на «Последние»

Так же при использовании разных параметров меняет способ визуализация представления.

Форматирование календаря с помощью JS + REST

Сегодня я расскажу, как можно произвести форматирование в представлении Календарь стандартного списка. В интернете можно найти решения, когда создается вычисляемое поле, в него подается значение из нескольких полей элемента. В представлении выводится вычисляемое поле, а дальше с помощью JS происходит форматирование и скрытие лишней информации. В целом решение не плохое, но мне не особо понравилось, и я решил пойти по другому пути…

Берем представление списка «Календарь» пробегаем по всем ссылкам на в календаре и формируем массив ссылок.

Далее из ссылок получаем Id элементов и делаем запрос к списку. В итоге получаем любые поля из списка и можем с ними работать.
К примеру, можно применить форматирование.

function  getColor(login)
{
 var color;
 login = login.replace("i:0#.w|domain\\","");
 switch(login){
  case "Kaplin Vladimir" : color = "red"; break;
  case "P Michael" : color = "green"; break;
  case "F Pavel" : color = "rgba(254, 164, 0, 1)"; break;

  default: color = "rgb(78, 142, 227)"
  
 }
 return color;
}

function postRender()
{
 data = jQuery("a[href*='.aspx?ID=']");
 //обработка ссылок на элементы
 var arrayID = [] 
 for (var i=0; i <  data.length; i++)
 { 
  var str = data[i].toString();
  var start = str.indexOf('?ID=');
  var end = str.indexOf('"',start);
  if (end == -1){
   var id = str.slice(start+4);
  }
  else{
   var id = str.slice(start+4, end+1);
  }
 
  arrayID.push("Id eq " + id);
 } 
 //работа с объектами элементов
 if (arrayID.length > 0)
 {
  var getItems = getListItem(arrayID.join(" or "));
  getItems.done(function (data, status, xhr) {   
   var items = data.d.results; 
   for(var i=0; i < items.length; i++ )
   {   
    var url = String.format("a[href*='.aspx?ID={0}']", items[i].ID)
    if(items[i].Editor.Title)
    {
     console.log(items[i].Editor.Title)
     var color = getColor(items[i].Editor.Title)
     jQuery(url).closest(".ms-acal-item").css("background-color", color)      
    };    
   }
  })
  getItems.fail(onError)
 }
}
function onError(error) {
    console.log(error.responseText);
}


function getListItem(itemId) { 
 var listTitle = "Заявки"  // название списка
 var webUrl = _spPageContextInfo.webAbsoluteUrl;
 var selectFields = ["Id","Title","Editor/Id","Editor/Title"]; // получаемые поля
 var expandFields = ["Editor/Id","Editor/Title"]; // поля подстановки 
 var listItemUri = webUrl + "/_api/web/lists/GetByTitle('"+ listTitle + "')/Items?$filter=" + itemId+ "&$select="+selectFields.join()+"&$expand="+expandFields.join();
 request = jQuery.ajax({
      url: listItemUri,
      type: "GET",
      headers: { "accept": "application/json;odata=verbose" }
     }); 
 request.done(function (data){console.log('данные REST полученны, объектов - ' + data.d.results.length );});  
 request.fail(function (){console.log('Ошибка при вылнении запроса REST')}); 
 return request;       
}


/* =======================================================================
блок для вызова функции обработки при изменении представления месяц - день 
======================================================================*/ 
 function onCalendarGridsRendered(){
    setTimeout(function () { 
        postRender()
    }, 100);
}

function onCalendarResized(){
    setTimeout(function () { 
        //Add your functionality here
  postRender()
    }, 100);
}

SP.SOD.executeOrDelayUntilScriptLoaded(function () {

    //Week or Day Calendar View
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids_Old = 
        SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids = 
        function SP_UI_ApplicationPages_DetailCalendarView$renderGrids($p0) {
        this.renderGrids_Old($p0);

        onCalendarGridsRendered();
    };
    
    //Month Calendar View
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids_Old = 
        SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = 
        function SP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
        this.renderGrids_Old($p0);

        onCalendarGridsRendered();
    };

    //Resize Calendar
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized_Old = 
        SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized;
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized = 
        function SP_UI_ApplicationPages_CalendarStateHandler$parentResized() {
        this.parentResized_Old();

        onCalendarResized();
    };
}, "SP.UI.ApplicationPages.Calendar.js"); 

Можно пойти дальше, т.к. мы можем получить любые данные из элемента, то и можем с ними работать. вот пример фильтрации элементов в календаре.

Да, решение не столь красивое, но можно реализовать используя штатные вещи.

Применение фильтров к полям в представлении с помощью кнопок

Захотел облегчить работу пользователей в SharePoint, и добавить кнопки фильтрации по полю.

Т.к. значений там не много, то я создал кнопки при клике, на которую переходили по адресу http://текущий_адрес.aspx?FilterField1=Vendor&FilterValue1=VMware

В FilterField1 указываем интернал нейм поля, в FilterValue1 значение.

Представлений стало много (активные заявки, выполненные и т.п.) и для каждого представления прописывать руками жестко адрес было лень сделал более универсальный код, который сам берет текущий адрес и работает с ним.

Для красоты добавил Bootstrap.

Кнопки "Утвердить" и "Отклонить" в ItemForm с помощью jQuery

Сегодня я расскажу, как добавить кнопки «Утвердить» и «Отклонить» в место стандартной кнопки «Save» и заполнять поле типа Choice требуемым значением.

выглядеть будет в итоге так

Bootstrap + SharePoint 2013 ItemForm (NewForm, EditForm, DispForm)

Сегодня я расскажу, как можно изменить дизайн форм элемента SharePoint используя Bootstrap.

Работа с полями элемента с помощью jQuery в EditForm (jQuery + SharePoint 2013 Fields Part 4)

Ранее я рассказывал, как можно работать с полями элемента, те примеры хорошо применять в NewForm создания элемента. Сегодня я хочу рассказать, как можно работать с полями в форме EditForm.

В этой статье:

1. Режим "только чтение" для полей 

2. Скрытие комментариев к полю

3. Скрытие полей в зависимости от значений

Дни рождения пользователей - SharePoint 2013 (Part 3)

В продолжение статей про выведение дней рождение пользователей с помощью веб-части поиска людей сегодня я расскажу, как сортировать результаты и как заменить текст при отсутствии результатов.

предыдущие статьи:

Дни рождения пользователей - SharePoint 2013 (Part 1)

Дни рождения пользователей - SharePoint 2013 (Part 2)

Дни рождения пользователей - SharePoint 2013 (Part 2)

В продолжении статьи Дни рождения пользователей - SharePoint 2013 (Part 1) я сегодня расскажу, как вывести дату рождения в веб-часть.

Дни рождения пользователей - SharePoint 2013 (Part 1)

Ранее я писал, как можно с помощью веб части поиска вывести дни рождения пользователей. Прошлое решение было для SharePoint 2010 и требовало создавать в VS проект и в итоге деплоить WSP пакет. Когда я приступил к работе с SharePoint 2013 я решил прибегнуть к аналогичному пути, но в этот раз решение не требовало написания кода.

В итоге получилось следующее:

Я решил разбить весь материал на блоки и в этой статье я расскажу:

1.  Как создавать управляемое свойство (Managed Properties )
2. Как вывести дни рождения 

Работа с полями элемента с помощью jQuery (jQuery + SharePoint 2013 Fields Part 3)

В продолжении своих статей:

Свойство полей readonly и disabled в формах NewForm и EditForm (jQuery + SharePoint 2013 Fields Part 1)

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

Сегодня я раскажу:

1. Скрываем поля в зависимости от значения поля Да/Нет

2. Собираем значение текстового поля из других полей

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

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

задачи:

Первая задача – выделение жирным одно поле.

Задача два – форматирование в зависимости от значения поля.

Задача три – выделить цветом просроченные.

Задача четыре – статистика по выполнению.

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

Свойство полей readonly и disabled в формах NewForm и EditForm (jQuery + SharePoint 2013 Fields Part 1)

Думаю многие хотели изменить свойства полей с помощью javascript, это не сложно делается, и в интернете много разных решений. Но вот я так и не нашел способа которым можно запретить редактирование поля Многострочный текст (multiline text field)

В начале я попробовал использовать код

$("input[title='Отображаемое имя']").attr("disabled", "disabled");

Но это не работало, и я решил посмотреть, как устроено поле

Веб-чать аналогичная "Приступая к работе с сайтом", со своими ссылками и иконками.(SharePoint2013)

Сегодня я покажу как можно сделать веб-часть аналогичную "Приступая к работе с сайтом", со своими ссылками и иконками.

Думаю, каждый кто работал с SharePoint 2013 видел на стартовой странице такую веб-часть.

Открытие видео в диалоговом окне (Новости на портале SharePoint часть III)

Тема с открытием страниц в диалоговом окне далеко не нова, и я не буду рассказывать, как можно реализовать(можно посмотреть тут ). Сегодня я расскажу, как я решал задачу открытия видео в диалоговом окне из элемента списка «Извещения». Статья является продолжением Новости на портале SharePoint

Проблемы при реализации:

С первой проблемой с которой я столкнулся, это добавление кнопки открытия страницы в элементе списка.
Вторая проблема – это открытие wiki страницы в диалоговом окне.

Третья - как сделать решение универсальным, ведь ссылки на видео могут быть в во многих элементах, и для каждого видео писать отдельный скрипт с адресом страницы  конкретного видео как-то не логично.

Новости на портале SharePoint часть II

В продолжении темы Новости на портале SharePoint часть I  я расскажу о дальнейших украшательствах формы просмотра.
1. добавим открытие элемента в модальном окне при нажание на название новости.
Открываем страницу с вебчастью в SPD в режи "С разделением" и кликаем на блок с
названием новости.