Posted by: R Manimaran | December 9, 2014

SharePoint 2013: Using Handlebarjs in SharePoint- Part 2

In the part1 we have seen how to create a Handlebarjs template and merge our REST API output with that template. In that output the date time values of Created and Modified is not well formatted. Below is the un-formatted output.

handlebarjsoutput

In this we will use Moment.js to do formatting.

Momemt.js

  • js help us to parse, validate, manipulate and display dates in the JavaScript.
  • It’s having rich set of methods to format the date string.
  • You can download the moment.js from here

In the Handlebars we can create our custom methods to do additional functionality. Using the RegisterHelper we can create our custom method. Let’s create a method named “FormatDate” which will accept a parameter.


<script>
Handlebars.registerHelper("FormatDate", function (date) {

return moment(date.toString()).format('LL');

});

</script>

Some of the Moment.js Format strings;

momentjsFormates

To Call the Format Date function we need to change the HandleBars Template we have designed. Below is the updated template.


<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>{{FormatDate Created}}</td>

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

</tr>

{{/results}}

</tbody>

</table>
</script>

Now the output of my page will be like below.

DateFormattedoutput

Advertisements

Responses

  1. […] https://rmanimaran.wordpress.com/2014/12/09/sharepoint-2013-using-handlebarjs-in-sharepoint-part-2/ […]


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: