Используем 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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s