Many times, clients will ask for simple custom displays of list data on a SharePoint site. Often these are simple little custom windows into the customer’s data. SharePoint offers a number of tools (via webparts) to show and list data, and you can quite often customize these a good bit with SharePoint designer. But many times when the customer wants a rather significant customization that they will be able to maintain, the xslt customization can seem a little overwhelming and daunting. At times like this I tend to reach to JavaScript ajax calls and the exposed SharePoint WebService to create simple and easily customizable html that can be more easily maintained and modified.

So how do we do this? Well in the next few posts I will be demonstrating the basic approaches to get simple list data. In this post I will be showing you how to use the new SharePoint 2013 Restful Api for fetching rows out of a list. This is a much more lightweight method that can be put into practice quickly, though it does have a few things to think about when planning your solution. With Part 2 I will be looking at how to use a JavaScript library called SPServices (http://spservices.codeplex.com/) to accomplish this task in either SharePoint 2013 or 2010. So fire up your favorite text editor and let’s jump right into it!

jQuery-

Like many web developers these days, I tend to rely on jQuery to simply much of my work. If you are not familiar with it I recommend reading up on their documentation (http://api.jquery.com/) or looking into some free training exercises (http://www.codecademy.com/en/tracks/jquery). For these examples I will be running jQuery in its noConflict mode (http://api.jquery.com/jquery.noconflict/). While not always needed, when working with larger sites where other devs and designers could be adding other libraries this can be a bit of a sanity saver.

So here is what we need to know for this example:

Assume we have a SharePoint 2013 list for current development projects. In the list we have named our list ‘Current Projects’. We have renamed the title field to display as ‘Project Title’ and have added a simple description field to the list. In this case we are not going to be doing any filter or sorting, just simply displaying the projects and their descriptions.

The first thing we can do is start test our restful URL to see if it is valid. Using the getByTitle option will keep us from having to look up our Guid. So our URL should look something like this:

http://[your.host.com..]/_api/web/Lists/getByTitle(‘Current Projects’)/Items?$select=Title,Description

If we have done this correctly the server should send back an xml response of fields. While we could work directly with this xml in the javascript we can switch to having the return data sent in json format which will make our work a little more simplified.Here is the simple framework for our call to get the data. Notice in the headers option is where we set the json flag.

Now that we have the wire-up put together lets work on some simple output. Assume we have a div for out output with an ID of ‘projectOutput’.

 

And that’s it. Now when we load the page the JavaScript should fire and load a listing of our projects into the container. We could easily now grow this with a filter to show what projects a given person supports, what projects are currently using a given technology or the like. A good article on the $filter option for OData can be found here: http://msdn.microsoft.com/en-us/library/hh169248%28v=nav.71%29.aspx

Sadly I have been unable to find a way to use a view GUID or name when using the restful api to filter or limit the data coming back. If you plan to do any complex filtering of the data you would either have to do this in the JavaScript output piece or via CAML code. In part 2 we will show how we can accomplish this with SPServices so look back soon for this example.

Like this post? Share it!