Welcome to my new series about using REST in SharePoint 2013! My intention in writing this is to show some quick and easy to follow examples of how to use REST web services (Representational State Transfer) and oData to access and querying in SharePoint 2013 and all this will be in focused on the user interface, the branding and web development aspects of using REST in SharePoint, like how to retrieve and manipulate list data or site data, how to create ‘data views’, rollups using latest standards of HTML, CSS and jQuery spiced with Ajax.

If you have previously worked with XSLT and data view web parts I hope this series will bring some inspiration to get going with JS for your apps, web parts or pages in SharePoint.

REST-1

This image shows an example of how you can roll up items from a list, toggling for more information and filter by some metadata. More about this in one of the upcoming posts

With REST you can make an http request to get information from different kinds of data sources like a SharePoint list. If you try it in your browser it would be just like going to a website but instead of returning a web page, you will get back the data in XML.

In other words you can easily consume the services in SharePoint that the API offers like list data, social feeds or search if you for example needs to expose its content in an app or similar. REST do also permits the data formats XML or JSON and supports CRUD operations. REST is one of the main APIs that are provided in SharePoint 2013, foundation or server and SharePoint Online but it’s not enabled for a public SharePoint online site over http.

I’ll not going into all the technical details here, read more about REST at Office Dev Center – MSDN library. [http://msdn.microsoft.com/en-us/library/office/jj164022(v=office.15).aspx]

Now let’s look into on how to start use REST/oData to fetch information from a SharePoint list.

Part 1 – A basic example

In this example we’ll examine how to access the REST/oData web services direct in the browser. Just replace the https://contoso/ with your URL. Furthermore make sure you have a document library in the site with the name Documents including some documents. Just make sure you have permission to access this site and the library.

  1. Paste this URL in your browser and hit enter:
    https://contoso/_api/web/lists/getbytitle('Documents')/items?$select=Title

    – the browser will now give you the desired result in XML.

  2. Now it’s time to parse the XML into a human readable format. To do this, I push the objects in the array into HTML and set the style with CSS.Use Visual Studio or SharePoint Designer and create an empty .aspx page for example in the root web in SharePoint to try this out. If you prefer you can also add the script, HTML and CSS into a .txt file and link this file by using the content editor web part. This will work in SharePoint Online or in SharePoint on prem, but not for and public site in SharePoint Online with HTTP.

    Download the page here to take a look.

    The key point is the script which looks like this:

$.ajax({
url: "/_api/web/lists/getbytitle('Documents')/items?$select=Title&$top=5",
type: "GET",
headers: {"Accept": "application/json;odata=verbose"},
cache:false,
success: function(data){
console.log(data);
var items = [];
$(data.d.results).each(function(){
items.push('
<ul id="' + 'listUL' + '">' +
'
	<li id="' + 'listLI' + '">' +
this.Title +
'</li>
' +
'</ul>
');
});
items.push("</div>
");
$("#listResult").html(items.join(''))}
});

Note that you need to add an reference to jQuery One thing to note is that the URL have a limitation of 256 characters, for normally usages like according to my examples in this series this shouldn’t be any issues, and if you need to more that the limit allows you can use CSOM with for example an old good CAML query or maybe use an data view web part instead.

In the next post I’ll will write more about how to build the queries with help of the following options:

  • Select
  • Filter
  • Expand
  • Order by
  • Filter
  • Top

I will also show a bit more advanced example of how to create a rollup of ‘the latest 5 blog posts’ on the start page of the home site including HTML and CSS for the UI.

More posts will come and here’s a list of some of the topics I will write about:

  • More examples of how to work with SharePoint lists and site information
  • Tools for site exploring, query building, debugging and JSON viewing
  • How to create and Image slideshow
  • Using REST to get external content
  • CRUD operations (Create Read Update Delete)
  • Using Knockout or Angular for data binding
  • Using DataTables, MixItUp and Moment.js for stuff like sorting, pagination and date parsing
  • Interact to the user profiles with help of SPservices
  • Packing you REST script as an APP

I will be back soon so stay tuned for the next post!

Advertisements