Posted by: R Manimaran | December 8, 2014

Using Handlebarsjs in SharePoint 2013 with REST API- Part1

When you build the application as client side code using JavaScript, you may come up with the situation to do update the values on the HTML to display. We use JQuery or vanilla JavaScript to do so. To do this easy we can use the different Javascript templating. Some of them are

  • Handlebarsjs
  • Mustache
  • Underscore js
  • EJS

Of the above handlebars.js is easy to learn.

Handlebarjs:

  • js is an extension of the Mustache javascript templating language.
  • It’s supersedes Mustache.js
  • Most advanced Feature rich and popular JavaScript Templating language.

Let us start using this Templating language in a SharePoint project.

Pre-Requisites:

  • Knowledge on SharePoint
  • SharePoint 2013 REST API
  • Client–Side scripting

Before going to the example we need to have some files which we need to add reference to our project. They are

I will explain the 3rd reference in the example. I have a SharePoint List named “Employees” and below are the contents.

EmployeesList

We will access the above list using SharePoint REST API and display the same in a page using Handlebars.

References:

 
<script type="text/javascript" src="/_layouts/15/sp2013/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="/_layouts/15/sp2013/handlebars.js"></script>

<script type="text/javascript" src="/_layouts/15/SP2013/moment.min.js"></script>

HandleBars.js Template

 


<!-- Handlebar Js Template Starts Here -->

<script id="employees-template" type="text/x-handlebars-template">

<table>

<thead>

<th>Employee Name</th>

<th>Designation</th>

<th>Location</th>

<th>Expert</th>

<th>Created</th>

<th>Modified</th>

</thead>

<tbody>

{{#results}}

<tr>

<td>{{Title}}</td>

<td>{{EmpDesignation}}</td>

<td>{{Location}}</td>

<td>{{SME}}</td>

<td>{{Created}}</td>

<td>{{Modified}}</td>

</tr>

{{/results}}

</tbody>

</table>

</script>

REST API to call SharePoint:

 Below code is having REST endpoint for accessing the Employees List. On the call success the HandleBarJs template which we can created above will be called and loaded with the REST API data output.


function loadSPEmployees() {

var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Employees')/items?$select=Title,SME,Location,EmpDesignation,Created,Modified”;

var headers = {

"accept": "application/json;odata=verbose"

}

jQuery.ajax({

url: endPointUrl,

type: "GET",

headers: headers,

success: function (data) {

var source = $("#employees-template").html();

var template = Handlebars.compile(source);

var output = template(data.d);

$("#content").html(output);

},

error: function (err) {

alert("Error Occured:" + JSON.stringify(err));

}

});

}

In the Page place a div with the Id “Content”. After the handlebar compile the code the result will be added to this div.

<div id=”content”></div>

On calling the loadSPEmployees method we will get the below output. (I have added some CSS to format the table)

handlebarjsoutput

In the above output the date columns (Created and Modified) are showing the SharePoint date time format. Let we format that in the next article using Moment.js.

Advertisements

Responses

  1. […] the part1 we have seen how to create a Handlebarjs template and merge our REST API output with that template. […]

  2. […] https://rmanimaran.wordpress.com/2014/12/08/using-handlebarsjs-in-sharepoint-2013-with-rest-api-part&#8230; […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: