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
- JQuery – http://jquery.com/
- Handlebarsjs – http://handlebarsjs.com/
- Momentjs – http://momentjs.com/
I will explain the 3rd reference in the example. I have a SharePoint List named “Employees” and below are the contents.
Image may be NSFW.
Clik here to view.
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)
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
