Archive for February 18, 2013

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