Использование JSLink с SharePoint 2013

Работа с SharePoint UI всегда была довольно трудной задачей для программистов. Однако новая функциональность в SharePoint 2013 — JSLink — снимает бремя использования XSLT и предоставляет гораздо более простой и адаптируемый способ отображения собственных полей на клиенте. JSLink — это средство, которое управляет рендерингом полей, элементов и даже веб-фрагментов (Web Parts) через JavaScript-файл.

В этой статье исследуется применение JSLink в двух демонстрационных сценариях. Первый сценарий покажет, как можно использовать сообщения с цветовым кодом (color-coded), чтобы подсказать, например, о завершении задачи (рис. 1).

Рис. 1. Использование пользовательского столбца для отображения списка состояний задач

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

Рис. 2. При скачивании изображение доступно в нескольких разрешениях

Я также подробно расскажу об адаптации полей формы New и Edit. Но, прежде чем начать, мы рассмотрим основы рендеринга на клиентской стороне в SharePoint 2013 и то, какие преимущества в этом предлагает JSLink.

JSLink — это средство, которое можно использовать с полями, веб-фрагментами, формами списков и различными типами контента.

Рендеринг на клиентской стороне

Рендеринг на клиентской стороне относится к отображению данных на странице с применением технологий, работающих на клиенте, таких как JavaScript, HTML и CSS. Поскольку эта технология работает клиентском браузере, она более адаптивна и эффективна и уменьшает нагрузку на веб-сервер. В ранних версиях SharePoint (2010, 2007) для применения стилей к элементам использовали XSLT, который в целом сложнее и менее производителен по сравнению с JavaScript. SharePoint 2013 по-прежнему поддерживает XSLT, но предлагает два дополнительных способа для настройки результатов на клиентской стороне: шаблоны отображения (display templates), которые определяют то, как веб-фрагмент Search в SharePoint 2013 визуализирует результаты (подробнее см. bit.ly/1i5fM6k), и JSLink, который и рассматривается в этой статье.

JSLink — это средство, которое можно использовать с полями, веб-фрагментами, формами списков и различными типами контента. Благодаря ему вы можете добавлять JavaScript-файлы, что открывает широкие возможности в настройке. Каждый добавляемый вами JavaScript-файл предваряется маркером SharePoint и отделяется символом конвейера (|), например ~site/style library/mycustom.js|~site/style library/mycustom2.js. Если в JavaScript-файлах нет релевантного кода рендеринга, применяется рендеринг элемента по умолчанию.

SharePoint предлагает несколько маркеров (статических и динамических), полезных для конструирования контекстно-специфичных URL. Вот некоторые важные маркеры SharePoint для динамического конструирования URL:

• ~site — относится к URL текущего веб-сайта;
• ~sitecollection — относится к URL родительского набора сайтов текущего веб-сайта;
• ~layouts — относится к _layouts/15 применительно к веб-приложению;
• ~sitecollectionlayouts — относится к папке layouts в текущем наборе сайтов (например, /sites/mysite/_layouts/15);
• ~sitelayouts — относится к папке layouts в текущем сайте (например, site/mysite/mysubsite/_layouts/15).

Для конструирования URL в SharePoint есть и другие маркеры. Узнать больше о строках и маркерах URL можно в Dev Center по ссылке bit.ly/1lpYuAP.

JSLink в сравнении с XSL/XSLT

Рендеринг на клиентской стороне с применением JSLink дает ряд преимуществ по сравнению с XSL/XSLT. Прежде всего он использует JavaScript, с которым большинство веб-разработчиков хорошо знакомо. XSLT — нечто более сложное в разработке и отладке, поэтому JSLink может сократить время разработки без потерь в качестве.

Рендеринг представления на клиенте с использованием JavaScript, HTML и CSS позволяет избежать лишней нагрузки на сервер, повышая общую производительность и сокращая время ответа страниц. Обработка на клиентской стороне делает UI в высокой степени «отзывчивым».

Более того, используя JSLink, вы можете настраивать представление (целиком или его часть). Например, если вы хотите настроить только конкретное поле, то можете «перекроить» логику рендеринга лишь для этого поля; остальная часть представления будет визуализироваться с помощью логики по умолчанию. В случае JSLink можно использовать любой допустимый JavaScript-код, в том числе такие внешние плагины, как jQuery, в сочетании с HTML и CSS.

Конечно, у каждой технологии есть свои недостатки, и JSLink — не исключение. Так, если JavaScript-код будет блокирован в браузере пользователя, JSLink не станет работать. Рендеринг на серверной стороне с применением XSLT позволит вывернуться из такой ситуации, но может пострадать производительность.

XSLT — нечто более сложное в разработке и отладке, поэтому JSLink может сократить время разработки без потерь в качестве.

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

Наконец, боты поисковых систем вряд ли поймут динамический контент, генерируемый AJAX/JavaScript; они требуют рендеринга статических данных в HTML. Поэтому, если ваш сайт рассчитан на публичный доступ, JSLink может оказаться не лучшим выбором.

Установка ссылки на JSLink

Ссылку на JavaScript-файл JSLink можно задать разными способами, используя модель серверных объектов, Windows PowerShell, Element.xml через Features, окно Web Part Properties и модель клиентских объектов. Ниже предлагаются некоторые примеры кода для каждого из этих подходов.

Модель серверных объектов Чтобы задать свойство JSLink, скажем, List набора форм, вы обращаетесь к объекту SPForm, используя набор Forms списка, а затем присваиваете JSLink объект SPForm:

SPWeb web = SPContext.Current.Web;
SPList list = web.Lists.TryGetList("MyTasks");
if (null != list)
{
  SPForm newForm = list.Forms[PAGETYPE.PAGE_NEWFORM];
  if (null != newForm)
  {
    newForm.JSLink = "~/mycustom.js";
  }
}

Windows PowerShell Чтобы установить свойство JSLink, например, собственного поля в списке, вы обращаетесь к объекту field, используя набор Fields списка, а затем присваиваете JSLink объект field:

$web = Get-SPWeb
$field = $web.Fields["MyCustomField"]
$field.JSLink = "~/layouts/mycustom.js"
$field.Update()
$web.Dispose()

ФайлElement.xml Чтобы задать свойство JSLink собственного поля в списке, вы добавляете узел Field в файл Element.xml:

<Field ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
Name="MyCustomField" DisplayName="Custom Columns"
Type="Text" Required="FALSE" Group="JSLink Demo"
JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
~site/style library/JSLinkDemo/customview.js">
</Field>

Заметьте, что, используя символ конвейера позволяет добавлять несколько JavaScript-файлов.

Диалог свойств веб-фрагментов Чтобы задать свойство JSLink веб-фрагмента, модифицируйте его свойства. Перейдите Web Part | Edit Properties | Miscellaneous и установите свойство JSLink.

Модель объектов на клиентской стороне (Client-Side Object Model, CSOM) Вы можете задать свойство JSLink поля с помощью CSOM. Заметьте, что обновить свойство столбца сайта (site column property) через JavaScript напрямую нельзя; вы должны обновить его с помощью полей, сопоставленных со списком. Если вы попытаетесь выполнить обновление на уровне столбца сайта, то получите ошибку «This functionality is unavailable for fields not associated with a list…».

Ниже показано, как правильно обновлять свойство JSLink для поля в списке через JavaScript CSOM:

fieldCollection = taskList.get_fields();
this.oneField = fieldCollection.getByInternalNameOrTitle("MyCustomField");
this.oneField.set_description("MyNewFieldDescription");
this.oneField.update();

Подробнее об этом примере см. в документации MSDN по ссылке bit.ly/1i9rlZR.

Работа с JSLink

Для работы с JSLink вы должны переопределить в своем JavaScript-файле этот метод:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides()

Он требует передачи объекта шаблона. Для определения такого объекта нужно указать свойство и метод render для каждого представления (например View, Add и Edit).

Вы можете задать свойство JSLink поля с помощью CSOM.

Для регистрации метода в объекте шаблона есть такие свойства, как Header, Body, Footer, OnPreRender, OnPostRender, Group, Item и Fields, которые можно использовать для переопределения исходной логики рендеринга представления. Скажем, чтобы модифицировать пользовательские поля View, Display, Edit и New, вы предоставляете следующую информацию в свойстве Fields объекта шаблона:

siteCtx.Templates.Fields = {
 // MyCustomField — это имя нашего поля
  'MyCustomField': {
  'View': customView,
  'DisplayForm': customDisplayForm,
  'EditForm': customNew,
  'NewForm': customEdit
  }
};

Методы, на которые ссылается этот код, например customView и customDisplayForm, содержат логику рендеринга для данного поля.

Наконец, вы вызываете метод RegisterTemplateOverrides объекта TemplateManager, чтобы применить собственное представление:

// Регистрация шаблона для рендеринга пользовательского поля
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(siteCtx);

Этот метод берет на себя всю остальную работу по рендерингу представления на основе вашей логики.

Учтите: когда вы используете несколько экземпляров веб-фрагмента списочного представления в одной и той же странице и применяете JSLink к одному из экземпляров, разметка остальных экземпляров тоже изменится, потому что SharePoint на внутреннем уровне использует общую логику рендеринга. Чтобы избежать этой проблемы, нужно гарантировать, что значение BaseViewID не будет конфликтовать с существующими ViewID, поэтому измените свойство BaseViewID контекста до переопределения, например ctx.BaseViewID = 1000.

Теперь пошагово рассмотрим два демонстрационных сценария.

Сценарий 1: отображение состояния завершения задачи с цветовым кодом

В этом сценарии в списке задач отображается состояние задачи в виде сообщения с определенным цветом: красным (задача не завершена) или зеленым (задача выполнена).

Я настрою шаблон View для собственного поля:

// Пользовательский рендеринг View Page
function customView(ctx) {
if (ctx != null && ctx.CurrentItem != null) {
  var percentCompete = parseInt(ctx.CurrentItem.PercentComplete);
  if (percentCompete != 100) {
    return "<span style='color:red'>Incomplete Task</span>";
  }
  else {
    return "<span style='color:green'>Task Completed</span>";
  }
}
}

Метод customView принимает текущий контекст рендера как входной параметр от SharePoint на внутреннем уровне. Этот входной контекст имеет множество других свойств, относящихся к List, View, Current Item и т. д.

Свойство currentItem контекста предоставляет доступ к текущему элементу строки списка. Через это свойство вы можете обраться ко всем полям, доступным в List. Заметьте: если Field недоступно в выбранном представлении, вы получите ошибку при попытке обращения к значению поля.

Для начала откройте Visual Studio 2013 и выберите SharePoint 2013 Empty Project.

Этап 1 Из меню Add New Item добавьте Site Column в пустой проект. Чтобы создать Site Column, добавьте информацию Field в файл Element.xml, как показано на рис. 3. Как видите, свойство JSLink ссылается на JavaScript-файла: библиотеку JQuery и JavaScript-файл пользовательского представления из Style Library. Иерархию файлов следует поддерживать слева направо (в первую очередь вы должны ссылаться на зависимые файлы).

Рис. 3. Ссылки на JavaScript-файлы

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> 
  <Field
    ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
    Name="MyCustomField"
    DisplayName="Custom Columns"
    Type="Text"
    Required="FALSE"
    Group="JSLink Demo"
    JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
            ~site/style library/JSLinkDemo/customview.js">
  </Field>
 
</Elements>

Этап 2 Добавьте другой New Item, модуль Scripts для хранения пользовательского JavaScript и других файлов ресурсов.

Этап 3 Добавьте JQuery Library к модулю Scripts. Создайте новый JavaScript-файл CustomView.js.

Этап 4 Переименуйте Feature по умолчанию из Feature 1 в JSLinkDemo или создайте новый Feature, который включает Site Columns и модуль Scripts. Укажите область для Site как его Site Column, который будет развертываться.

Этап 5 Разверните решение. После этого вы увидите, что Column добавлен в Site Columns, выбрав Site Settings | Site Columns.

Этап 6 Создайте список задач MyTasks, добавив приложение со страницы Site Contents.

Этап 7 Добавьте свой столбец в список MyTasks через меню List Settings на ленте.

Этап 8 Добавьте свой столбец, созданный на этапах 1–5, щелкнув Add в списке существующих столбцов сайта на странице List Settings. Фильтруйте группу, используя JSLink Demo, выберите Custom Column и добавьте к списку.

Свойство currentItem контекста предоставляет доступ к текущему элементу строки списка.

На этом реализация первого сценария завершена. Как видно на рис. 1, в пользовательском столбце показывается состояние Task Completed (зеленым цветом) или Incomplete Task (красным).

Сценарий 2: создание собственной галереи изображений с выносками

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

Для этого я настрою свойства Item, Header и Footer в Template Field. Следующий код выполняет начальный этап:

(function () {
  var overrideContext = {};
  overrideContext.ListTemplateType = 109;
  overrideContext.Templates = {};
  overrideContext.Templates.Item = customItem;
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
 
function customItem() {
  return "ItemRow";
}

Я указал 109 в ListTemplateType, что в SharePoint предопределено как PictureLibrary. (Все предопределенные типы шаблонов списков в SharePoint 2013 вы найдете по ссылке bit.ly/1qE8UiY.) Этот код будет визуализировать строки с текстом, возвращенным методом customItem.

Теперь я заменю статический текст реальными свойствами Image (Title, URL и другие поля), чтобы начать рендеринг изображения. Для замены ссылки на новую картинку по умолчанию и столбцов заголовка я настрою свойства Header и Footer и задам некий HTML-текст:

overrideContext.Templates.Header = "<b>Custom Image Gallery View</b>";
overrideContext.Templates.Footer = "<b>Custom Footer</b>";
function customItem() {
  return "<br /><img src='" + ctx.CurrentItem.FileRef +
  "' width='190' height='190' />;
}

Я хочу отображать изображения в табличном формате. Для этого нужно добавить некоторый CSS- и HTML-код для разметки в методе customItem. Сначала я добавляю пустой контейнер div к шаблону заголовка (header template), который будет использоваться позднее для хранения данных от Item и Footer при рендеринге. В рамках рендеринга Item я создаю динамический HTML и храню его в глобальной переменной. В шаблоне рендеринга Footer я присваиваю динамические данные контейнеру div. На рис. 4 показан полный код для рендеринга галереи изображений в табличном формате.

Рис. 4. Отображение изображений в табличном формате

function customItem(ctx) {
  // Сетка содержит 4
  if (ctx.CurrentItemIdx % 4 == 0) {
    // Начинаем новую строку
    tableData+= "<div style='clear:both'></div>"
  }
 
  tableData += "<div style='margin:5px;border:1px solid #666;float:left;"+
  "width:100px;height:100px' onmouseover=\""+
  "ShowCallout(this,'" + ctx.CurrentItem.Title + "','" +
  ctx.CurrentItem.FileDirRef + "','" + ctx.CurrentItem.FileLeafRef
  + "');\"><img src='" + ctx.CurrentItem.FileRef +
  "' width='100' height='100' /></div>";
 
return "";
}
 
// Пользовательский метод Footer
function customFooter(ctx) {
 // Записываем динамически генерируемые данные в контейнер div
  $("#customImageGalleryContainer").html(tableData);
  return "";
}

Теперь мне нужно выводить выноску (callout), когда курсор мыши оказывается над одним из изображений, и показывать дополнительные метаданные, такие как Title, Brief Info и прочее, наряду с разными разрешениями изображения для скачивания. SharePoint 2013 предоставляет инфраструктуру выносок для отображения контекстно-зависимой информации через JavaScript-файл callout.js, используя глобальный объект CalloutManager. Я задействую эту инфраструктуру для вывода выносок по умолчанию. Сначала я создам свой метод ShowCallout, чтобы определять, показываются ли в данный момент какие-то открытые выноски; если да, я закрою их с помощью исходного метода closeAll в CalloutManager:

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  CalloutManager.closeAll();
}

Прежде чем продолжить реализацию, нужно разобраться в том, как изображения получают разные разрешения. В SharePoint 2013 по умолчанию изображение создается в двух разных размерах при загрузке в галерею изображений. Например, если вы загружаете sample.png в библиотеку по пути /imageLibraryName/, SharePoint автоматически создает как эскиз (thumbnail), так и полное изображение для Web (Web-size image): /imageLibraryName/_t/Sample_png.jpg и /imageLibraryName/_w/Sample_png.jpg. В этих URL элемент _t представляет Thumbnail, а _w — Web, и расширение файла дописывается к имени файла с префиксом в виде знака подчеркивания (_).

Функция ShowCallout использует эти URL для исходного изображения, а также для изображений с другими разрешениями и сохраняет их в разных переменных, как показано ниже (filename и directory — это параметры ShowCallout):

var fname = filename.replace(".", "_");
var thumbnail = directory + "/_t/" + fname + ".jpg";
var medium = directory + "/_w/" + fname + ".jpg";
var full = directory + "/" + filename;

SharePoint 2013 предоставляет инфраструктуру выносок для отображения контекстно-зависимой информации через JavaScript-файл callout.js, используя глобальный объект CalloutManager.

Для этого сценария я использую метод createNewIfNecessary объекта CalloutManager, создающий выноску, только если в целевой точке запуска такой выноски нет. Если выноска есть, метод возвращает ссылку на существующий объект. (Узнать больше о CalloutManager можно по ссылке bit.ly/1kXH7uU.) На рис. 5 показан полный код функции ShowCallout, а на рис. 6 — полученный результат.

Рис. 5. Обновленная функция ShowCallout

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  // Закрываем все выноски, если они открыты
  CalloutManager.closeAll();
  var fname = filename.replace(".", "_");
  var thumbnail = directory + "/_t/" + fname + ".jpg";
  var medium = directory + "/_w/" + fname + ".jpg";
  var full = directory + "/" + filename;
  var calloutContent = "<img src='" + medium + "' width='50%'
    height='50%' /><br/>" +
  brief + "&nbsp;<a href='" + directory + "/Forms/DispForm.aspx?ID=" +
  itemId + "'>View Image</a><br />" +
  "<a href='" + thumbnail + "' target='_blank'>
    Thumbnail</a>&nbsp;&nbsp;|&nbsp;&nbsp;" +
  "<a href='" + medium + "' target='_blank'>
    Web Size</a>&nbsp;&nbsp;|&nbsp;&nbsp;" +
  "<a href='" + full + "' target='_blank'>Original Size</a>";
 
  var calloutRef = CalloutManager.createNewIfNecessary({
    ID: 'call_' + itemId, launchPoint: sender,
    beakOrientation: 'leftRight', title: title,
    content: calloutContent,
    contentWidth: 610
  });
 
  calloutRef.open();
}

Рис. 6. Собственная галерея изображений с выносками, показывающими метаданные

Чтобы применить собственный рендеринг, создайте страницу сайта и добавьте List View Web Part библиотеки изображений. Перейдите в диалог свойств Edit Web Part и установите свойство JSLink в ~/site/Style Library/JSLinkDemo/jquery-1.10.2.min.js|~/site/Style Library/JSLinkDemo/CustomImageGallery.js. Щелкните Apply and Save Page. После обновления страницы вы увидите галерею, подобную показанной на рис. 6.

Настройка формы списка New или Edit с помощью JSLink

Вы можете настраивать поля формы New или Edit, используя аналогичный подход, но с некоторыми вариациями. Здесь нужно продумать такие вещи, как проверка ввода, сохранение данных из поля ввода в элементе списка, отображение сохраненных данных из элемента списка в поле ввода и т. д.

Далее мы рассмотрим детали реализации сложного сценария с использованием многоколоночных пользовательских полей (multi-column custom fields), приведенного на рис. 7.

Рис. 7. Многоколоночные пользовательские поля списка с применением JSLink

Этап 1 Используя файл Element.xml, создайте Note — пользовательское поле для текста под Site Columns со свойством NumLines, равным, скажем, 1000 (или тем значением, которое подходит под ваши потребности). Это поле переопределяет рендеринг формы New или Edit.

siteCtx.Templates.Fields = {
  "MyComplexField": {
  'EditForm': customComplexNewOrEdit,
  'NewForm': customComplexNewOrEdit
}
};

Для представлений New и Edit я применяю один и тот же метод customComplexNewOrEdit.

Вы можете отлаживать JSLink с помощью инструментов на основе браузера, таких как средства разработки Internet Explorer, Firebug и подобных им.

Этап 2 Подготовьте контекст формы, необходимый для настройки верификаторов (validators), которые читают значения из пользовательского представления и сохраняют их обратно в список. Для подготовки контекста формы используйте метод SPClientTemplates.Utility.GetFormContextForCurrentField. Он принимает Render Context как параметр, который предоставляется самим SharePoint на внутреннем уровне. Вот пример кода, показывающий метод рендера пользовательского представления New или Edit:

function customComplexNewOrEdit(ctx) {
  if (ctx == null || ctx.CurrentFieldValue == null)
  return '';
 
  var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
  if (formCtx == null || formCtx.fieldSchema == null)
    return '';
}

Этап 3 Получив контекст формы, вы должны зарегистрировать обработчики обратных вызовов в текущей форме, чтобы включить поддержку проверки, получение значения поля и его сохранения в соответствущем поле пользовательского представления, сгенерированного JSLink. Всякий раз, когда пользователь щелкает кнопку Save в форме List, SharePoint на внутреннем уровне вызывает обработчик обратного вызова, подключенный к полям, используя formCtx.registerGetValueCallback(filedName, callback). Этот обработчик считывает значение из поля перед сохранением в элементе списка:

formCtx.registerGetValueCallback(formCtx.fieldName, function () {
  // Читаем значение из этого обратного вызова
  // и присваиваем полю перед сохранением
  return "";
});

Это пустой обработчик обратного вызова. Вы должны написать код для чтения значений из выбранных элементов управления в форме и возврата строкового представления значений.

Этап 4 Чтобы добавить верификаторы, нужно сначала создать контейнер верификатора, в котором будут регистрироваться верификаторы для различных полей. Для этого я использую объект SPClientForms.ClientValidation.ValidatorSet. Для регистрации сразу нескольких верификаторов можно воспользоваться методом RegisterValidator в Validator Container.

Для отображения ошибок нужно зарегистрировать и обработчик обратного вызова при ошибках. Для этого я использую метод registerValidationErrorCallback контекста формы. Он принимает два параметра, идентификатор элемента HTML-контейнера (div — в этом примере) и errorResult, который возвращается SharePoint на внутреннем уровне при неудачной проверке. Сообщения об ошибках добавляются к элементу контейнера, передаваемому в этот метод. В данном примере мне нужно добавить верификатор поля, и полный код проверки представлен на рис. 8.

Рис. 8. Код для поддержки проверки

var validatorContainer = new SPClientForms.ClientValidation.ValidatorSet();
if (formCtx.fieldSchema.Required) {
  validatorContainer.RegisterValidator(
  new SPClientForms.ClientValidation.RequiredValidator());
}
 
if (validatorContainer._registeredValidators.length > 0) {
  formCtx.registerClientValidator(
  formCtx.fieldName, validatorContainer);
}
 
formCtx.registerValidationErrorCallback(
  formCtx.fieldName, function (errorResult) {
    SPFormControl_AppendValidationErrorMessage(
    errorContainer, errorResult);
});

Этап 5 Нужно добавить собственные HTML-элементы управления для представления поля на странице New или Edit. У меня будут одно текстовое поле, один раскрывающийся список с динамическими значениями из другого списка и один раскрывающийся список со статическими значениями. Я создам таблицу, добавлю в нее эти элементы управления и буду возвращать HTML как вывод из пользовательского метода Add/Edit.

Для динамической загрузки данных я считываю их из другого списка с помощью REST API и использую для заполнения заголовка этого списка. Подробнее о REST API в SharePoint см. bit.ly/1cVNaqA.

Код для динамического рендеринга элементов управления вводом приведен на рис. 9.

Рис. 9. Динамический рендеринг элементов управления для ввода

// Рендеринг полей ввода
var inputFields = "<table>";
...
inputFields += "</table>";
 
// Получаем данные List от REST API
$.ajax({
...
success: function (data) {
  // Добавляем варианты в динамический раскрывающийся список
},
error: function (data) {
  // Обработчик ошибок
}
});
 
 
return inputFields;

Этап 6 Чтобы сохранить значение нескольких полей (multi-field value) в список, я помещаю значения всех полей в одну строку, используя строковый разделитель, и создаю собственный формат вида (fieldname:value)(fieldname:value) — своего рода подобие парам «ключ-значение». Конструирование строки выполняется в registerGetValueCallback.

Этап 7 Для отображения существующего значения в форме Edit я разбираю строку, хранящуюся как пара «ключ-значение», сохраняю и назначаю значения соответствующим элементам ввода. Это осуществляется с применением того же пользовательского метода рендеринга, что и при конструировании собственного HTML.

Заключение

Вы можете отлаживать JSLink с помощью инструментов на основе браузера, таких как средства разработки Internet Explorer, Firebug и подобных им. Поместив точку прерывания в JavaScript после рендеринга на клиенте, можно отлаживать JavaScript точно так же, как и C#-код в .NET. Обращаясь к контексту в методе View, вы можете получить ссылку на текущий Item, через который вы увидите значения каждого поля в текущем элементе. Для доступа к любому свойству текущего объекта можно использовать консольное окно в средствах разработки Internet Explorer.

JSLink предоставляет простой способ настройки любого представления SharePoint с помощью чисто клиентских скриптов без написания какого-либо кода для серверной стороны. С JSLink можно использовать любой плагин на основе JavaScript. Демонстрационный проект можно скачать по ссылке, указанной в начале статьи.