Не так давно мне понадобилось построить нестандартный интерфейс для элементов списка в одном из проектов на 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 – и еще один.
Если есть вопросы, пожелания или проклятья, добро пожаловать в комментарии.
ссылка на оригинал статьи http://habrahabr.ru/post/272549/
Добавить комментарий