Не так давно мне понадобилось построить нестандартный интерфейс для элементов списка в одном из проектов на SharePoint 2013. Задачу можно разбить на две подзадачи: получение данных и вывод на страницу. Если вторую более или менее понятно как решать (существует множество JavaScript-фреймворков для вывода данных), то решением первой навскидку можно назвать только веб-сервисы платформы. Уже собравшись писать что-то, что работало бы с ними, я обнаружил, что это уже сделано в виде jQuery-библиотеки SPServices, которая позволяет использовать функции, работающие поверх веб-сервисов SharePoint. Признаться, немало удивился, когда нашел, что тема почти не освещена на Хабре, есть лишь упоминания в двух постах. В этой статье постараемся исправить это упущение.

SPServices – jQuery-библиотека, написанная Марком Андерсоном, которая позволяет достаточно просто работать с веб-сервисами SharePoint 2007/2010/2013 на клиентской стороне. Библиотека содержит много возможностей для манипуляции данными: от получения текущего пользователя до обновления элементов списков.

В качестве примера посмотрим на решение одной из самых распростроненных задач – получение данных из списка, выведем на страницу всех сотрудников с фамилией Иванов из списка People list.

Для начала воспользуемся функцией GetListItems библиотеки и получим JSON-объект с нужными нам элементами.

<script type="text/javascript" src="/SiteAssets/libs/SPServices.js"></script>

<script>
var JSONdata;

$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        webURL: "/PeopleDataWeb",
        async: false,
        listName: "People list",
        CAMLQuery: "<Query><Where><Eq><FieldRef Name='LastName' /><Value Type='Text'>Иванов</Value></Eq></Where></Query>';
        CAMLViewFields: "<ViewFields><FieldRef Name='FirstName' /><FieldRef Name='LastName' /><FieldRef Name='Age' /></ViewFields>",
        completefunc: function (xData, Status) {
            JSONdata = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({
                mapping: {
                    ows_FirstName: {mappedName: "FirstName", objectType: "Text"},
                    ows_LastName: {mappedName: "LastName", objectType: "Text"},
                    ows_Age: {mappedName: "Age", objectType: "Integer"}
                },   
                includeAllAttrs: true
            });
        }
    });
});
</script>

Рассмотрим, что здесь происходит:

• В operation мы задаем тип операции. Типов операции немало, в документации они удобно сгруппированы по объектам.
• webURL позволяет указать относительный адрес узла, на котором находится необходимый нам список. Этот параметр необязательный, если не указывать его явно, узел будет браться текущий.
• Параметр async задает асинхронность операции. По умолчанию выставлен true.
• listName – здесь, думаю, понятно. Указывается отображаемое имя (DisplayName) списка. Можно задать в виде {GUID}. Важный момент: список должен находиться на сайте, указываемом в параметре webURL, даже если мы указываем его через GUID.
• CAMLQuery позволяет указать CAML-запрос для элементов списка. Если параметр не задан, выбираются все элементы. Напомню, для примера мы берем из списка всех сотрудников с фамилией Иванов.
• А в CAMLViewFields необходимо указать поля списка, которые нам нужны.
• В функции completefunc описываем, что должно происходить при удачном выполнении запроса к веб-сервису. Так как в данном примере нас интересует получение данных в виде JSON, мы применяем две другие функции библиотеки: SPFilterNode и SPXmlToJson – для парсинга XML-ответа и конвертации в JSON соответственно. Параметр mapping последней позволяет указать внутреннее имя (Internal Name) столбца списка и сопоставить его с полем в JSON, указав тип.

Итак, у нас есть JSON на клиентской стороне. Для полноты примера выведем его на страницу. Я воспользуюсь фреймворком Kendo UI от Telerik, который позволяет с легкостью отображать данные на странице.

<link href="/SiteAssets/kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="/SiteAssets/kendo/styles/kendo.default.min.css" rel="stylesheet" />
<script src="/SiteAssets/kendo/js/kendo.kendo.min.js"></script>
<script src="/SiteAssets/kendo/js/kendo.all.min.js"></script>

<script>
$("#grid").kendoGrid({
    columns: [
        { title:  "First name", field: "FirstName" },
        { title:  "Last Name", field: "LastName" },
        { title:  "Age", field: "Age" }
    ],
    dataSource:  {
        data: JSONdata,           
    },
    height: 600
});
</script>

<div id="grid"></grid>

Используемая литература:

• SPServices Documentation – очень подробная документация по возможностям библиотеки.
• Real Life Example with SPServices: Telephone List Gadget – несколько устаревший, но рабочий пример использования.
• A Dummies Guide to SharePoint & jQuery — Reading List Data With SPServices – и еще один.

Если есть вопросы, пожелания или проклятья, добро пожаловать в комментарии.