Tag Archive for SharePoint2013

JSLink with Paging for Rendering List Views

Today I dove into JSLink. There are many BlogPosts on how it works but none were showing how I can implement the SharePoint paging that is part of a SharePoint List View. It’s surprisingly easy!

I started with this BlogPost to figure out how this JSLink property works: http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/

Custom Item Rendering

When you just want to change the rendering of the Fields inside the View, the paging section will still be on the Page because it’s rendered in the Footer. However if you want to use custom rendering for all Items including Header and Footer, you’ll have to implement paging yourself.

Luckily all the data we need to provide Paging in the likes of the default Paging is in the Context. We need to read from ctx.ListData in our render function. ListData contains the following properties:

  • ctx.ListData.FirstRow;
  • ctx.ListData.LastRow;
  • ctx.ListData.PrevHref;
  • ctx.ListData.NextHref;

This is all the information we need. We can render the HTML ourselves in the Footer of the Template. An example:

pagingControl: function (ctx) {
        var firstRow = ctx.ListData.FirstRow;
        var lastRow = ctx.ListData.LastRow;
        var prev = ctx.ListData.PrevHref;
        var next = ctx.ListData.NextHref;
        var html = “<div class=’Paging’>”;
        html += prev ? “<a class=’ms-commandLink ms-promlink-button ms-promlink-button-enabled’ href='” + prev + “‘><span class=’ms-promlink-button-image’><img class=’ms-promlink-button-left’ src=’/_layouts/15/images/spcommon.png?rev=23′ /></span></a>” : “”;
        html += “<span class=’ms-paging’><span class=’First’>” + firstRow + “</span> – <span class=’Last’>” + lastRow + “</span></span>”;
        html += next ? “<a class=’ms-commandLink ms-promlink-button ms-promlink-button-enabled’ href='” + next + “‘><span class=’ms-promlink-button-image’><img class=’ms-promlink-button-right’ src=’/_layouts/15/images/spcommon.png?rev=23’/></span></a>” : “”;
        html += “</div>”;
        return html;
    }

The complete rendering JS template can be downloaded here. Just upload the JS file to a Library and refer from a Blogs Posts list View WebPart to the js file. The JS file is set to render BaseViewID = 1 which is AllPosts.aspx.

Note: For this example to work, add the Field “Body” to the View
Note: You can use the ~sitecollection token in the JSLink property.


Result

Before:

Schermafbeelding 2013-02-18 om 16.06.20

After:

Schermafbeelding 2013-02-18 om 16.14.37

SharePoint Apps and Relative DateTime

When working with Apps, JSOM and the new SharePoint REST API there’s always a challenge when it comes to displaying moments in time or dates. New in SharePoint 2013 is the display of Time Delta’s like “A moment ago” or “2 days ago”. The Newsfeed is a good example of this.

ISO8601 standard

SharePoint 2013’s new cool REST API returns DateTime field values in ISO8601 format. This can be a value in the likes of “2013-01-29T13:37:00Z”. Unfortunately there is no helper function (or I haven’t found it yet) in the SharePoint JS Object Model to parse this format into a Time Delta.

Moment.js

This is where a tiny, free JavaScript library called moment.js comes in handy. With these very simple lines of code this library gives you the right output.

var spDate = “2013-01-29T13:37:00Z”;
var deltaToNow = moment(spDate, “YYYY-MM-DDTHH:mm:ss Z”).fromNow();

Displaying deltaToNow will output the relative value from the given date till the moment of execution.

Cheers!