Используем Client Side Rendering (CSR) для отображения элементов списка в SharePoint 2013

csr_logo

В SharePoint 2013 на смену XSLT приходит Client Side Rendering, что ускоряет и упрощает работу с отображениями списков. Кроме отображения списков можно также настроить интересное отображение полей.

Выбираем готовый стиль для представления списка

Итак, если есть необходимость выбрать готовый стиль для представления списка, на выбор есть следующие варианты:

Базовая таблица

basic_table

Сведения о документе

document_details

Бюллетень

newsletter

Бюллетень, без строк-разделителей

newsletter_no_lines

С затенением

shaded

Область просмотра

preview_pane

По умолчанию

default

Создаем свой стиль для представления списка

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

after_csr

Для того, чтобы подключить JavaScript файл с кодом, нужно в свойствах веб-части прописать ссылку на этот файл в поле JS-ссылка (JS Link). Безусловно, это можно также делать через код

(function () {
    ExecuteOrDelayUntilScriptLoaded(_registerSliderViewTemplate, 'clienttemplates.js');
})();

function _registerSliderViewTemplate() 
{ 
    // Инициализируются переменные
    var overrideCtx = {}; 
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = HeaderOverrideFun; 
    overrideCtx.Templates.Item = ItemOverrideFun; 
    
    overrideCtx.BaseViewID = 1;

    // Регистрируем наши доработки 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); 
}


function HeaderOverrideFun(ctx)
{
    var finalHeaderHtml = '';
    finalHeaderHtml += '<style>';    
    finalHeaderHtml += '    .ms-listviewtable thead tr { table-layout:fixed; display:table-row-group; float:left; } ';
    finalHeaderHtml += '    .tbTitle { margin-bottom: 5px; margin-top: 10px; } ';
    finalHeaderHtml += '    .tbTrItem { table-layout:fixed; display:table-row-group; float:left; } ';
    finalHeaderHtml += '    .tbTdItem { width: 310px; } ';
    finalHeaderHtml += '</style>';        
    finalHeaderHtml += RenderHeaderTemplate(ctx);

    return finalHeaderHtml ;
}

function ItemOverrideFun(ctx)
{
    var listItem = ctx.CurrentItem;
    
    // получаем ссылку на файл и изображение
    var listItemUrl = listItem.FileRef;
    thumbnailUrl = "http://news.ipb.ac.id/images/icon-word.png";
    
    // получаем название элемента
    var titleText = listItem.FileLeafRef;
    if (titleText == "")
    {
        titleText = listItem.FileLeafRef;
    }
    
    var finalHtml ='';

    // генерируем таблицу
    
    finalHtml += "<tr class='tbTrItem' >";
    finalHtml += "    <td class='tbTdItem' >";   
    finalHtml += "        <div class='tbTitle'><a href='" + listItemUrl + "' target='_blank' >" + titleText + "</a></div>";
    finalHtml += "        <img src='" + thumbnailUrl + "' width='300' height='250'></img>";  
    finalHtml += "    </td>";
    finalHtml += "</tr>";

    return finalHtml ; 
}

Заключение

В рамках этой статьи мы рассмотрели некоторые возможности CRS в SharePoint 2013, которые можно начать применять уже сегодня.

Ниже есть ссылка на пример работы CSR для различных вариантов отображения полей.

Ссылки

Client-side rendering (JS Link) code samples

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s