Getting SharePoint data on a client using SPServices

Not so long ago, I needed to build a non-standard interface for list items in one of the projects on SharePoint 2013. The task can be divided into two subtasks: data acquisition and output to a page. If the second is more or less clear how to solve (there are a lot of JavaScript-frameworks for data output), then the solution to the first approach can be called only the web services of the platform. Already gathered to write something that would work with them, I found that it was already done in the form of the jQuery-library SPServices , which allows you to use functions that work on top of the SharePoint web services. Frankly, I was surprised a lot when I found that the topic was barely covered in Habré, there are only mentions in two posts . In this article we will try to correct this omission.

SPServices is a jQuery library written by Mark Anderson , which makes it quite easy to work with the SharePoint 2007/2010/2013 web services on the client side. The library contains many possibilities for manipulating data: from getting the current user to updating list items.

As an example, we will look at the solution of one of the most common tasks - obtaining data from the list, we will display on the page all employees with the last name Ivanov from the People list.

First we use the library's GetListItems function and get a JSON object with the elements we need.
')

<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> 

Consider what happens here:

• In operation, we specify the type of operation. There are a lot of operation types; in the documentation, they are conveniently grouped by objects.
• webURL allows you to specify the relative address of the site where the list we need is located. This parameter is optional, unless you explicitly specify it, the node will be taken from the current one.
• The async parameter specifies the asynchronous operation. The default is true.
• listName is here, I think, understandable. Indicates the display name (DisplayName) of the list. Can be set as {GUID}. Important point: the list should be on the site specified in the webURL parameter, even if we specify it through the GUID.
• CAMLQuery allows you to specify a CAML query for list items. If the parameter is not specified, all elements are selected. Let me remind you, for example, we take from the list of all employees with the last name Ivanov.
• And in CAMLViewFields, you must specify the list fields that we need.
• In the completefunc function, we describe what should happen if the request to the web service is successful. Since in this example we are interested in receiving data in the form of JSON, we use two other library functions: SPFilterNode and SPXmlToJson to parse the XML response and convert to JSON, respectively. The mapping parameter of the latter allows you to specify the internal name (Internal Name) of a list column and match it with a field in JSON, specifying the type.

So, we have JSON on the client side. For completeness, we will display it on the page. I will use Telerik's Kendo UI framework, which makes it easy to display data on a page.

 <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> 

Used Books:

• SPServices Documentation - very detailed documentation on the capabilities of the library.
• Real Life Example with SPServices: Telephone List Gadget is a bit outdated, but a working example of use.
• A Dummies Guide to SharePoint & jQuery - Reading List Data With SPServices - and another one.

If you have questions, suggestions or curses, welcome to comments.