Using jquery templates to display sharepoint list data on the client side using JSOM

The following post will provide a scenario where you want to format sharepoint list data data using jquery template and everything on the client side using JSOM

As every body might aware that SharePoint online wont allow server side coding and everything needs to be written on the client side only

In the SharePoint online world, the developer should be using JSOM to retrieve the sharepoint data. Once the data is retrieved, the data should be presented to the user in a presentable way and in this post we will see how you can use jQuery, jQuery Templates to display SharePoint list data.

For this post, I will consider a SharePoint list called Customers and I have the following list columns inside that Customers list

1. First Name
2. Last Name
4. Email

When displaying the data, I wanted to combine First Name and Last Name and I want the email to be an hyperlink for the First Name and Last Name and I want to display the data as an unordered list. The final output will look something like this

This post will explain how we can do the same in SharePoint online using JSOM, JQuery and JQuery Templates

The first step in getting the data from the sharepoint list is to get reference to SharePoint and to get a reference to SharePoint context we need to load required Sharepoint JS file and the JS that needs to be loaded is SP.js. The following code snipped will show that information


In the above function we have created a small function called GetSharePointListData and to that function we are passing the list name and the CAML query that needs to be executed on the list, there is also an anonymous function called OnGetSuccess and we will discuss more on this later in this post
We have created another function called getData and in this function we will fire a request to SharePoint and fetch the data.



The following code will show the information on how to get context to SharePoint



Once you get a context to SharePoint, the next step will be, try to get context to the current web and the list from which you want to retrieve the list items and display the results




Once we set all the context, fire an async request to SharePoint and the following code will show that information



In order to display the data in the format that we require, we need to store the data on the client side that is retrieved from the SharePoint.

To store the data on the client side, we will use JSON and in the above code snippet, we are using dataset[] variable for that purpose.

For each and every item that we are getting from the sharepoint, we are storing that information in JSON array and we are using the following code snippet to store the data into JSON array



 Once we get all the data, we return the data from the function using the anonymous function that we are passing as a parameter to _getData function

onGetSuccess(that.DataSet);

that.DataSet contains all the sharepoint list data in json format. The following code will show how the list data looks like in JOSN format



If there is any error that SharePoint returns, we are capturing that information in another anonymous function and in that function we are calling another function called _onFail and in that function you can capture sharepoint error and update the UI accordingly.

Once we have the JSON data, we can make use of JQuery and JQueryTemplate plugins to display the data accordingly. We can make use of other plugins such as UnderScore or some other plugins for displaying the data. In this post we are using jQueryTemplates for displaying the data

The following code will show, how we can call the function GetSharePointListData and pass the required parameters. The following code snippet will show that information

GetSharePointListData(spListName, camlQuery, function (data) {
    $("#customerTemplate").tmpl(data).appendTo("#ulCustomer");
});

 In the above code snippet, #customerTemplate is the jquery template where we have written how the data should be displayed and formatted and more on this later in this post

To that template we are passing the data (JSON data) and we are appending the completed HTML to ul tag with the name "ulCustomer"

The following code snippet will show customerTemplate html template with the place holders for the data that is coming from JSON data



I am displaying the data in un-ordered list format, where FirstName and LastName becoming an hyperlink and on clicking of the hyperlink, default email client will open

The final output of the data will look like this

References

jQuery Template: http://plugins.jquery.com/loadTemplate/1.4.4/

Let me know your comments on this post