Настройка представления списка в надстройках SharePoint с использованием технологии клиентской обработки

Статья
04/08/2023

Технология клиентской обработки в SharePoint позволяет создавать собственные выходные данные для набора элементов управления, размещенных на странице SharePoint. Благодаря этому можно использовать хорошо известные технологии, например HTML и JavaScript, для задания логики отрисовки представлений списков в SharePoint. Технология клиентской обработки дает возможность указывать собственные ресурсы JavaScript и размещать их в хранилищах данных, доступных ваших надстроек (например, в библиотеке документов). Надстройка с размещением в SharePoint включает только компоненты SharePoint. Ее ресурсы размещаются на изолированном дочернем сайте хост-сайта, который называется сайтом надстройки.

Предварительные требования для использования примеров в этой статье

Для выполнения действий, описанных в этом примере, вам потребуется следующее:

Visual Studio 2015 и Инструменты разработчика Microsoft Office последней версии.
Среда разработки SharePoint (для локальных сценариев необходимо изолировать надстройку).

Инструкции по настройке подходящей среды разработки см. в статье Два типа надстроек SharePoint (с размещением в SharePoint и у поставщика).

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

В приведенной ниже таблице перечислены полезные статьи, в которых описаны понятия, связанные с настройкой представления списка.

Название статьи	Описание
Надстройки SharePoint	Изучите новую модель надстроек в Microsoft SharePoint, с помощью которой можно создавать небольшие и удобные в использовании надстройки для пользователей.
Разработка пользовательского интерфейса для надстроек SharePoint	Изучите различные варианты пользовательского интерфейса, доступные при создании надстроек SharePoint.
Хост-сайты, сайты надстроек и компоненты SharePoint в SharePoint	Узнайте, в чем разница между хост-сайтами и сайтами надстроек. Узнайте, какие компоненты SharePoint можно включить в Надстройка SharePoint, какие компоненты можно развернуть на хост-сайтах, а какие на сайтах надстроек, а также узнайте, как развертывать сайты надстроек в изолированном домене.

Пример кода: настройка представления списка с использованием технологии клиентской обработки

Чтобы настроить представление списка, развернутое на сайте надстройки, используя технологию клиентской обработки, выполните указанные ниже действия.

Создайте проект надстройки SharePoint.
Создайте новое определение списка с настраиваемым представлением.
Укажите особую логику обработки в файле JavaScript.

Ниже показано представление списка объявлений, отрисованное с помощью технологии клиентской обработки.

Особое представление списка объявлений

Особое представление списка объявлений

Создание проекта надстройки SharePoint

Откройте Visual Studio 2015 от имени администратора. Для этого щелкните правой кнопкой мыши значок Visual Studio в меню Пуск и выберите Запуск от имени администратора.
Создайте новый проект с помощью шаблона Надстройка SharePoint.

Ниже показано расположение шаблона Надстройка SharePoint в Visual Studio 2015: Шаблоны>Visual C#>Office/SharePoint>Надстройки Office.

Шаблон Visual Studio "Надстройка SharePoint"
Укажите URL-адрес веб-сайта SharePoint, который планируется использовать для отладки.
Выберите SharePoint-hosted (Размещение в SharePoint) в качестве варианта размещения надстройки.

Создание определения списка

Щелкните правой кнопкой мыши проект надстройки для SharePoint и добавьте новый элемент List. Создайте настраиваемый список на основе объявлений.
Скопируйте следующую разметку и вставьте ее в элемент Views файла Schema.xml вашего компонента списка. Эта разметка выполняет следующие задачи.
- Объявляет новое представление с именем Overridable и атрибутом BaseViewID=2.
- Предоставляет значение для элемента JSLink, которое указывает на файл JavaScript с надстройкой.
Примечание.

Свойство JSLink не поддерживается в списках Survey или Events. Календарь SharePoint представляет собой список Events.
```
<View BaseViewID="2" 
    Name="8d2719f3-c3c3-415b-989d-33840d8e2ddb" 
    DisplayName="Overridable" 
    Type="HTML" 
    WebPartZoneID="Main" 
    SetupPath="pages\viewpage.aspx" 
    Url="Overridable.aspx"
    DefaultView="TRUE">
<ViewFields>
    <FieldRef Name="Title" />
</ViewFields>
<Query />
<Toolbar Type="Standard" />
<XslLink>main.xsl</XslLink>
<JSLink Default="TRUE">~site/Scripts/CSRListView.js</JSLink>
</View>
```

Указание особой логики отрисовки в файле JavaScript

Щелкните правой кнопкой мыши папку Scripts и добавьте новый файл JavaScript. Назовите его CSRListView.js.

Скопируйте следующий код и вставьте его в файл CSRListView.js. Этот код выполняет следующие задачи.

Предоставляет обработчики событий для событий PreRender и PostRender.
Предоставляет шаблоны для наборов шаблонов Header, Footer и Item.
Регистрирует шаблоны.


(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    // Assign functions or plain html strings to the templateset objects:
    // header, footer and item.
    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" +
        "<hr><ul id='unorderedlist'>";

    // This template is assigned to the CustomItem function.
    overrideCtx.Templates.Item = customItem;
    overrideCtx.Templates.Footer = "</ul>";

    // Set the template to the:
    //  Custom list definition ID
    //  Base view ID
    overrideCtx.BaseViewID = 2;
    overrideCtx.ListTemplateType = 10057;

    // Assign a function to handle the
    // PreRender and PostRender events
    overrideCtx.OnPreRender = preRenderHandler;
    overrideCtx.OnPostRender = postRenderHandler;

    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function builds the output for the item template.
// It uses the context object to access announcement data.
function customItem(ctx) {

    // Build a listitem entry for every announcement in the list.
    var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
    return ret;
}

// The preRenderHandler attends the OnPreRender event
function preRenderHandler(ctx) {

    // Override the default title with user input.
    ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
}

// The postRenderHandler attends the OnPostRender event
function postRenderHandler(ctx) {

    // You can manipulate the DOM in the postRender event
    var ulObj;
    var i, j;

    ulObj = document.getElementById("unorderedlist");

    // Reverse order the list.
    for (i = 1; i < ulObj.children.length; i++) {
        var x = ulObj.children[i];
        for (j = 1; j < ulObj.children.length; j++) {
            var y = ulObj.children[j];
            if(x.innerText<y.innerText){                  
                ulObj.insertBefore(y, x);
            }
        }
    }
}

Сборка и запуск решения

Нажмите клавишу F5.

Примечание.

При нажатии клавиши F5 Visual Studio выполняет сборку решения, развертывает надстройку и открывает страницу разрешений.
Нажмите кнопку Доверять.
Перейдите к пользовательскому списку, введя адрес /Lists/<your_list_instance> относительно каталога надстройки в веб-домене надстройки (а не хост-домене). Добавьте одно или несколько объявлений. На ленте выберите представление Переопределяемый.

Поделиться через