Having multiple JSLink based webparts on the same page, overrides all the other templates in SP 2013


Create a dashboard page in SP 2013, displaying just 3 lists in 3 different views using Js Link capability. The 3 lists are:

  1. Accordion: A list containing title and description which will be displayed on the dashboard with an accordion functionality with title being the accordion item heading and description being the accordion item body.
  2. Menu: A list containing entries that can be used to construct a mega menu or a navigation menu.
  3. Alert: A list containing entries whose Body contents are lengthy and hence have to be trimmed down and ellipsis (…) added to the lengthy ones

The dashboard page was created and all the 3 list view webparts were added to it. All of them were given 3 different JsLink with different namespaces and method names. Each js had their template methods that rendered the list in the desired views and functionalities. ex. the accordion template method just returned “<h2>{Title}</h2><p>{Description}</p>” and an OnPostRender jQuery script to toggle them on <h2> click.


Loaded the Alert list first on the fresh page–> No issue; trimming the body content worked perfectly


Loaded the Accordion list next –> No issue; slide up and down of the accordion worked perfectly

Loaded the Menu list next –> Boom! The accordion lost its Js Link functionality and started behaving like the menu displaying items using the template defined for the Menu list.


Attached below are the 3 JsLink files used:

AlertsAccordion | Menu

Feel free to test it out…

If the JS Links had different namespaces & methods, why would it overwrite all the other templates on the same page? Could it be by design? By changing the BaseViewID, i could get the Accordion working but the menu then started taking the accordions template behavior…:(

Finally, I ended up having a single Js Link file (added as JS Link to all the webparts on the page) having the same template method, but internally it loaded different templates for each webpart by doing an <if> condition check for the List Name.
ex. if (ctx.ListName==’Accordion’) return “<h2>{Title}</h2>…”; if (ctx.ListName==’Menu’) return ‘<ul><li>{Tite}</li></ul>’; etc…

But somehow you will feel something is not right when you code it. Having a bulky js method with If-else or switch-cases…:(


Paul Hunt (@Cimares) has the solution for this scenario wonderfully detailed out here.This solution works and you can do an IF condition check to load the templates corresponding to each webpart accordingly.

I still wish if i could use independent JS Link files for all the webparts on the dashboard…:(…But, all in all JSLink is wonderful and I am happy to see MS taking the client side route and would love to support them in this direction…:)

Feel free to post your comments or possible alternatives or solutions.

JsLink not working with custom columns in a list


Let’s say we have a list view webpart, with a JsLink URL pointing to a js file (~site/SiteAssets/customrenderer.js). JsLink seems to be working fine when we use the “Title” and “Description” fields to render the list items in a color coded format.

However, when we try to display a custom column created ex. ColorCode, the JsLink seems to be breaking and displaying the List View in the default view.

Possible Causes:

  1. The current view loaded does not have the custom column you created. So edit the List View Webpart and modify the view, by selecting AllItems view or a new view you created. But ensure that this view has the custom column visible. Else it will throw undefined error while executing ctx.currentItem[“ColorCode”] in your Item template method in JsLink file.
  2. JsLink URL should begin with either of the following URL tokens: ~site, ~sitecollection, ~layouts, ~sitecollectionlayouts or ~sitelayouts only. Absolute paths will break the JsLink functionality.
  3. BaseViewID value seems to have an impact on the display. Let’s say you have multiple List Views on the page, then the BaseViewID plays an important role. Ensure that it is unique else the JsLink functionality works on all the other List View webparts you have loaded on the page.
  4. Try debugging & logging options inside your JsLink file. ex. Use console.log(ctx.currentItem) to see what all it is bringing.


Hope this helps!

JSLink SharePoint 2013 troubleshooting

JsLink is a good feature that was introduced in SP 2013 to allow users to bring in more flexibility in Client Side Rendering (CSR). With this you can control how your list data is getting displayed in View, Display, Edit and New forms.

For ex., you can achieve this using JSLink:



You can check the implementation here: JSLink Custom JS Rendering Tutorial


The JS Link was still not working and the list view remained the same.


Check the URL you defined in your JSLink webpart property (under Miscellaneous). You need to define the URL as: ~site/Site Assets/xyz.js” instead of defining the absolute or relative URL of your js file. It should always begin with a given set of URL tokens and then your file path. JsLink URL can begin with either of the following URL tokens: ~site, ~sitecollection, ~layouts, ~sitecollectionlayouts or ~sitelayouts only. Absolute paths will break the JsLink functionality.


MDS (Minimal Download Strategy) strategy having issues. Try using RegisterModuleInit(“{file URL}”, MyJsMethod); to register the JSLink. Check this link.

Also, as a best practice, its recommended to specify the SharePoint CSR filename in the JS Link URL.

ex. The JSLink URL for Tile View in Promoted Links would look like:

sp.ui.tileview.js | ~site/SiteAssets/xyz.js

SharePoint 2013: Log Analytics through javascript

The following code snippet will help you to log the usage analytics into ULS:

//Log Views usage event on URL of catalog item
    window.LogViewsToEventStore = function(url, site)
        SP.SOD.executeFunc(“sp.js”, “SP.ClientContext”, function()
            var spClientContext = SP.ClientContext.get_current();
                    var spWeb = spClientContext.get_web();
                    var spUser = spWeb.get_currentUser();
                    var spScope = “{00000000-0000-0000-0000-000000000000}”;
                    //Event ID = 1 (Views), 2 (
                    SP.Analytics.AnalyticsUsageEntry.logAnalyticsEvent2(spClientContext, 1, url, spScope, site, spUser);spClientContext.executeQueryAsync(null, null);                   
    LogViewsToEventStore(‘Url’, ‘SiteID’);

You can use this in your CSWP or other webparts on client side, with ease.

$skip does not work in SharePoint 2013 OData REST Endpoint for list item retrieval

This came as a surprise to me seeing the OData URI query option “$skip” does not work, while trying to implement pagination logic on list using SharePoint 2013 REST API. Although this works perfectly well with the old ListData.svc…:(

So here are some alternatives that can help you in your paginations:

1. Using $filter URI query option:

/_api/web/Lists/GetByTitle(‘ODataList’)/items?$filter=Id gt {SkipValue}&$top={TopValue}

ex. /_api/web/Lists/GetByTitle(‘ODataList’)/items?$filter=Id gt 2&$top=3  –>gives you the records with IDs 3,4,5.

2. Using the _next link at the end of the response


ex. /_api/web/Lists/GetByTitle(‘ODataList’)/items?$top=10 –> gives you records with Skip and top value as 10. If you go to the end of the response, you will get the “nextlink” in the following format:

<link rel=”next” href=”{Server URL}/_api/web/Lists/GetByTitle(‘ODataList’)/items?%24skiptoken=Paged%3dTRUE%26p_ID%3d5&amp;%24filter=Id+gt+2&amp;%24top=3″ />

But the skipvalue for pagination is taken as the value give for $top parameter.

3. Use the ListData.svc


skip and top works perfectly here and the response is in the AtomPub format.

Bottom line: $skip won’t work with the new SP 2013 REST endpoints for list item retrievals. You will have to go with one of the alternatives above. 

Hope this was helpful.

Extract the Term Sets and their custom properties using CSOM in SharePoint 2013

The code snippet below will help you to query the SharePoint 2013 Term store using CSOM (ECMAScript):

//Get the Current SP Context

var context = SP.ClientContext.get_current();


//Get the Current SP Taxonomy Session
var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);


//Get the Term Stores instance
var termStores = taxSession.get_termStores();


//Get the exact Term Store you would like to query

//To get this…goto your term store, inspect the HTML element corresponding to your Term Store in your

//browser and you will get this ID

//Check the screenshots below
var termStore = termStores.getByName(“Taxonomy_foSyfMpI/9yqdQsdxwuVGA==”);


//Get the required Term Set you want to fetch

//To get this…goto your term store, inspect the HTML element corresponding to the Term in your browser and check the ID of the <li> element
var termSet = termStore.getTermSet(“8ed8c9ea-7052-4c1d-a4d7-b9c10bffea6f”);


//Load the termSet into the context


//Execute the Query
//Contains the Terms and their custom properties

//Check the screenshot below 

//Any exception messages





Fig: Extracting the TermStore ID


Fig: Extracting the Term ID


Fig: Execution the above script in chrome browser Developer Toolbar Javascript Console (F12)


Fig: The execution results showing the Custom Property key and value

For further reference on extracting the terms, termsets and groups refer here:


Hope this helps.

Basics of javascript Templating

Being the 100th post, i felt i should share some of my most useful learning here. And i could not think of anything better than javascript Templating. There are quite a handful of such templating tools available online(JsRender, Underscore.js, Moustache.js…). Feel free to run a jsPerf on the tool you wish to use and then go ahead. This post will focus on giving you a grip on the concept of templating in javascript, by correlating it to a day to day example you see around you.

A little bit of Background:

The concept of templating is pretty simple once you understand what it is. Let me take you through a simple example here, so that you could correlate this concept to some live example and remember this forever.

Observe the Facebook “People You May Know” (PYMK) section below:

Fb People You May Know section













Its pretty much straight forward, with a header and some contents. Normally we feel that its a direct 6 div-based HTML section (1 div for header and 5 for the friends list). Lets deep dive into this a little bit.

When we look deeper, we could see two major sections here. One is the header and then there a friends list section which is replicated as is 5 times, but with different contents.

Consider the section breaking visually below:

Fb PYMK Section Breakup













Header is simple and nothing much special about it. You could even achieve it using a simple HTML code. But our focus here is the “Repeating Template Section“. This section repeats by itself 5 times here, populating 5 different contents. This is infact the place where we could see the power of templating coming into play.

But before that lets dig a bit more deeper into the repeating Template section:

Fb PYMK Template section detailed






How Templating Works:

Now lets see how these templating engines available online works. For simplicity, I am considering JsRender here.

Firstly, its nothing but a plugin – jsrender.min.js (just like your jQuery.min.js), you can download from Github.

Secondly, it basically need 2 inputs(for just the basic functionality):

1. Is the Template section – An HTML section on the page with just the basic skeletal structure, as shown below

Fb PYMK Template Schema

Inside these sections we normally keep something called placeholders, for ex.

A sample template could be like this:

<script id=”tmpl_pymk” type=”text/x-jsrender”>

<div id=’hdrpymk’>

People You May Know

<a href=”{{>SeeAllLink}}“>See All</a>


<div id=’rptpymk’>

<img src=’{{>ProfilePic}}‘ />



The templating engine just replaces these placeholders (SeeAllLink, ProfilePic) with the data picked up from the input JSON

2. The Input JSON

JsRender Input JSON Sample

Note: In the above JSON, I have shown only 3 entries; which would imply the final rendered HTML would generate 3 repeater section with the data you provided in the “Contents” array inside the input JSON (see above screenshot).

Thirdly, using the render() method, it merges the input JSON into the template and constructs the final HTML, which you can render it on your page.

var finalHTML = $(“#tmpl_pymk”).render(jsondata);

As simple as that!!

A schematic diagram of how this works is shown below:

JsRender Templating Working

HEADER: This could be just the heading with a link to “See All”

SECTION DATA: JsRender repeats this section 5 times displaying different data, picking them up from the input JSON. I shall get into the technical aspects in a later post.

But for now, I hope you got a background on how templating works in javascript and you could visualize the power of this concept in our day to day life.

This is just a drop from the ocean i wish to drive you through. But i hope the example used here helped you correlate to the concept.

Hope this post was useful!!

Feel free to post your comments & suggestions.

Note: The example used here is just a sample and need not be the way fb would have implemented it. The idea here is to correlate this topic to things that we see around us on the web in a better way.