Добавление собственной клиентской обработки в надстройку с размещением в SharePoint

Статья
04/08/2023

Это восьмая часть серии статей, посвященной основам разработки надстроек SharePoint, размещаемых в SharePoint. Для начала вам следует ознакомиться со статьей Надстройки SharePoint и предыдущими статьями этой серии, представленными в разделе Знакомство с созданием надстроек SharePoint, размещаемых в SharePoint | Дальнейшие действия.

Примечание.

Если вы изучали предыдущие статьи этой серии о надстройках, размещаемых в SharePoint, то у вас уже есть решение для Visual Studio, которое можно использовать для работы с этой статьей. Кроме того, вы можете скачать репозиторий на веб-странице SharePoint_SP-hosted_Add-Ins_Tutorials и открыть файл BeforeClientRenderedControl.sln.

Важно!

Настройки на основе JSLink (клиентская обработка) не поддерживаются в современном интерфейсе. Это относится к современным спискам и библиотекам, включая поддержку JSLink в веб-частях представления списка современных страниц. Клиентская обработка поддерживается в классических интерфейсах в SharePoint Online или локальной версии.

Вы можете использовать небольшой фрагмент клиентского кода JavaScript для настройки отрисовки веб-частей, большинства типов полей (столбцов) и некоторых других элементов управления, назначив файл JavaScript в качестве свойства JSLink элемента управления, например SPField.JSLink. Кроме того, таким способом вы можете добавить логику проверки на стороне клиента. Работая с этой статьей, вы настроите отрисовку поля в списке надстройки SharePoint Employee Orientation (Обучение сотрудников) с помощью функции клиентской обработки.

Примечание.

Если в браузере пользователя отключен JavaScript, то SharePoint будет использовать серверные функции отрисовки и проверки.
Свойство JSLink не поддерживается в списках Survey или Events. Календарь SharePoint представляет собой список Events.

Создание и регистрация файлов JavaScript

В обозревателе решений щелкните правой кнопкой мыши узел Скрипты и выберите Добавить>Новый элемент>Интернет.
Выберите файл JavaScript и присвойте ему имя OrientationStageRendering.js.
Созданная вами пользовательская отрисовка поля должна выполняться автоматически, поэтому используйте указанный ниже код, чтобы добавить анонимный метод в код JavaScript, который запускается автоматически при загрузке файла:
```
(function () {

})();
```
В тексте этого метода (между символами { и }) добавьте указанный ниже код, чтобы создать объекты JSON (Javascript Object Notation) для отрисовки контекста переопределения, шаблонов в контексте и шаблонов для полей.
```
var customRenderingOverride = {};
customRenderingOverride.Templates = {};
customRenderingOverride.Templates.Fields = {
}
```
В тексте объекта шаблона Fields (Поля) добавьте указанный ниже объект JSON.
```
"OrientationStage": { "View": renderOrientationStage }
```
- Имя свойства OrientationStage идентифицирует поле, для которого имеется пользовательская отрисовка.
- Значение свойства представляет собой еще один объект JSON.
- Свойство View идентифицирует контекст страницы, в котором применяется пользовательская отрисовка. В этом случае объект сообщает SharePoint, что для представлений списков необходимо использовать пользовательскую отрисовку. (Другие варианты предназначены для форм Edit [Редактирование], New [Создание] и Display [Отображение].)
- Значение свойства renderOrientationStage — это имя метода пользовательской отрисовки, который вы создадите на одном из последующих этапов.
Последнее, что должен сделать анонимный метод, — сообщить диспетчеру шаблонов SharePoint о переопределении отрисовки. Добавьте указанную ниже строку в конец раздела body метода.
```
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customRenderingOverride);
```
Теперь метод должен выглядеть примерно так, как показано ниже.
```
(function () {
  var customRenderingOverride = {};
  customRenderingOverride.Templates = {};
  customRenderingOverride.Templates.Fields = {
      "OrientationStage": { "View": renderOrientationStage }
  }

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customRenderingOverride);
})();
```
Добавьте указанный ниже метод в файл. Он задает красный цвет для значения столбца Orientation Stage (Этап обучения), когда это значение равно Not Started, и зеленый цвет, когда значение равно Completed. (Объект ctx представляет собой объект контекста клиента, объявленный встроенным скриптом SharePoint.)
```
function renderOrientationStage(ctx) {
 var orientationStageValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
 if (orientationStageValue == "Not Started") {
 return "" + orientationStageValue + ""
 }
 else if (orientationStageValue == "Completed") {
 return "" + orientationStageValue + ""
 }
 else {
 return orientationStageValue;
 }
}
```
В обозревателе решений разверните узел Столбцы сайта, а затем — OrientationStage (Этап обучения). После этого откройте файл elements.xml.
Чтобы сообщить SharePoint, что необходимо использовать ваш пользовательский код JavaScript, добавьте новый атрибут JSLink в элемент Field (Поле), а затем в качестве его значения укажите следующий URL-адрес: ~site/Scripts/OrientationStageRendering.js.

Примечание.

Значение свойства JSLink всегда представляет собой файл, а не метод. Не существует способа сообщить SharePoint, какой метод необходимо запустить. Именно поэтому файл содержит метод, который запускается автоматически.

Теперь тег start для элемента Field (Поле) будет выглядеть указанным ниже образом.
```
<Field
 ID="{some_guid_here}"
 Name="OrientationStage"
 Title="OrientationStage"
 DisplayName="Orientation Stage"
 Description="The current orientation stage of the employee."
 Type="Choice"
 Required="TRUE"
 Group="Employee Orientation"
 JSLink="~site/Scripts/OrientationStageRendering.js">

```
Откройте страницу Default.aspx и добавьте указанный ниже код в качестве последнего дочернего элемента для элемента asp:Content, у которого ContentPlaceHolderID имеет значение PlaceHolderMain.
```
<asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/NewEmployeesInSeattle/AllItems.aspx';"
 Text="List View Page for New Employees in Seattle" />
```

Запуск и тестирование надстройки

Нажмите клавишу F5, чтобы развернуть и запустить надстройку. Visual Studio выполняет временную установку надстройки на вашем тестовом сайте SharePoint и сразу же запускает ее.
Настроенная вами клиентская обработка влияет на отрисовку поля только на странице представления списка, а не в веб-части представления списка, которую мы поместили на домашнюю страницу. Это связано с тем, что по умолчанию веб-часть использует обработку на сервере. Существуют способы изменить это, но они слишком сложны, чтобы использовать их в этом простом примере. Таким образом, чтобы посмотреть, как работает клиентская обработка, щелкните ссылку в нижней части страницы List View Page for New Employees in Seattle (Страница представления списка для новых сотрудников в Сиэтле).
Чтобы посмотреть, как работает настраиваемая отрисовка цвета, когда откроется страница представления списка, для некоторых элементов присвойте полю Orientation Stage (Этап вводного обучения) значение Not Started (Не начат), а для других значение Completed (Завершен).

Рис. 1. Список с настраиваемой отрисовкой на стороне клиента
Чтобы завершить сеанс отладки, закройте окно браузера или остановите отладку в Visual Studio. При каждом нажатии клавиши F5 Visual Studio будет отзывать предыдущую версию надстройки и устанавливать последнюю.
Вы будете работать с этой надстройкой и решением Visual Studio при изучении других статей, поэтому при перерывах в работе рекомендуется отзывать надстройку. В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункт Отозвать.

Дальнейшие действия

Работая со следующей статьей этой серии, вы создадите настраиваемую кнопку ленты на хост-сайте надстройки SharePoint.

Share via

Добавление собственной клиентской обработки в надстройку с размещением в SharePoint

Создание и регистрация файлов JavaScript

Запуск и тестирование надстройки

Дальнейшие действия

Дополнительные ресурсы