{"id":678,"date":"2013-09-02T20:38:00","date_gmt":"2013-09-02T20:38:00","guid":{"rendered":"http:\/\/www.myfatblog.co.uk\/?p=678"},"modified":"2014-05-02T15:25:55","modified_gmt":"2014-05-02T15:25:55","slug":"listview-web-part-issues-with-jslink-and-display-templates-a-solution","status":"publish","type":"post","link":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/","title":{"rendered":"ListView Web Part issues with JSLink and Display Templates – A solution?"},"content":{"rendered":"

Back at the start of August, I posted about the issues you might find using the JSLink Display Template<\/a> when rendering multiple list instances on a page that all inherit from the Custom List Template. If you\u2019re not sure what the issue is, Have a read of that post first, then come back here.<\/p>\n

The documentation from Microsoft is still fairly minimal on JSLink and as I showed in my original post, the only way to solve this issue was through the use of Custom List Templates and a deployed solution.<\/p>\n

This is not an option for the large majority of power users out there, even more so if you’re ‘in the cloud’, therefore a client side resolution was needed for this client side problem..<\/p>\n

I’ve spent many hours over the last few weeks, trying to come up with PowerShell that would allow us to change the BaseViewID of the underlying List view, and trawling through the ClientTemplates.js rendering functions looking for ways to override. In the end, I’ve found a fairly simple method which is deployed in the very same file that you register your overrides in!<\/p>\n

BIG CAVEAT! – This has not been tested to breaking point! I’ve only just discovered this and whilst it appears to work regardless of whether or not MDS is enabled, please please test it before using it in production.<\/span><\/p>\n

How do list views render?<\/h2>\n

The key to understanding why this technique works, lies in understanding how list views are rendered by SharePoint. If you open up the Developer Toolbar in IE (Press F12), switch to the Script tab and check that you\u2019re showing the landing page that contains your list view. (If you\u2019re seeing start.aspx, go turn off the Minimal Download Strategy feature in your web.. then you\u2019ll see more of the page code..)<\/em><\/strong><\/p>\n

If you scroll down to around line 850-900 You should see the javascript defining a few variables named along the lines of WPQ2ListData and WPQListSchemaData. These are basically big ole JSON objects that contain all the information about the list to be rendered.<\/p>\n

\"SNAGHTML2dd845\"<\/a><\/p>\n

At the bottom of this you\u2019ll see a context object get created:-<\/p>\n

\"SNAGHTML2e7bf3\"<\/a>And then finally at the bottom of this big context object is where Microsoft calls the rendering code housed in ClientTemplates.JS<\/p>\n

\"SNAGHTML3110f1\"<\/a><\/p>\n

RenderListView is a function defined in ClientTemplates.JS and called by every list view web part on the page, which for some dashboards could be several times. It this ClientTemplates javascript file that is responsible for working out which templates have been registered and which should be used to render the list view.<\/p>\n

So how do we do control our Display Template?<\/h2>\n

The key element that we need in place first is the Display Template itself. (Wes Preston does a great job of explaining these if you’re new to them..JS Link for SharePoint 2013 Web Parts – A Primer<\/a> so I won\u2019t repeat how to do this..)<\/p>\n

The key difference that we make here, is that when we register the DisplayTemplate, we still base it off of the Custom List Template ID of 100, but give it a BaseViewID of 99<\/em><\/strong>. This should be a high enough number that it won\u2019t affect any Microsoft deployed views.<\/p>\n

\n
\r\n\toverrideCtx.BaseViewID = 99;\r\n\toverrideCtx.ListTemplateType = 100;\r\n<\/pre>\n<\/div>\n
Below our overrideCtx object we\u2019re going to add an ExecuteOrDelayUntilScriptLoaded block that waits until DisplayTemplates.JS has been loaded and it\u2019s relevant functions defined.<\/p>\n
Once it has, we then take a copy of the RenderListView function and store it in a new object, we then overwrite the original function with our own.<\/p>\n
\n
\r\n\/\/ Now override the RenderListView once the ClientTemplates.JS has been called\r\nExecuteOrDelayUntilScriptLoaded(function(){\r\n\r\n\t\/\/Take a copy of the existing Microsoft Definition of RenderListView\r\n\tvar oldRenderListView = RenderListView;\r\n\r\n\t\/\/Now redefine RenderListView with our override\r\n\tRenderListView = function(ctx,webPartID)\r\n\t{\r\n\t\t\/\/Check the context of the currently rendering List view\r\n\t\tif (ctx.ListTitle == "Desk List")\r\n\t\t{\r\n\t\t\t\/\/Override the BaseViewID if it's the one we want.\r\n\t\t\tctx.BaseViewID = 99;\r\n\t\t}\r\n\t\r\n\t\t\/\/now call the original RenderListView\r\n\t\toldRenderListView(ctx,webPartID);\r\n\t}\r\n\r\n},"ClientTemplates.js");\r\n<\/pre>\n<\/div>\n
When the ListView definition on the page calls RenderListView, it calls our code block first, which can manipulate the ctx.BaseViewID if required, or just passed the object straight through. The end result is two list views on a page, that both share the ListTemplateID of 100 and a BaseViewID of 1, yet still have custom rendering in only one of the web parts.<\/p>\n
\"SNAGHTML3b1bda\"<\/a><\/p>\n
Improvements?<\/h2>\n
First off, I\u2019ve included the script block in my Display Template because I\u2019m only defining one of them. Obviously if you\u2019re designing a dashboard thats going to have 3-4 differently styled views, then I would extract the ExecuteOrDelayUntilScriptLoaded block into it\u2019s own javascript file and embed that on the page separately.<\/p>\n
You can then use this one script to affect any of the styled views, just by expanding on the logic within the overloaded RenderListView.<\/p>\n
[important]<\/p>\n
Since this post, and following a question on twitter, I’ve now tested this one a page with 3 different list views. Each list view requires a new BaseViewID and it seems easier to use ctx.WPQ to test against the WebPart ID rather than the list name:-<\/p>\n
\r\n\t\tif (ctx.wpq == 'WPQ2')\r\n\t\t{\r\n\t\t\tctx.BaseViewID = 99;\r\n\t\t}\r\n\t\telse if (ctx.wpq == 'WPQ3')\r\n\t\t{\r\n\t\t\tctx.BaseViewID = 98;\r\n\t\t}\r\n\t\telse if (ctx.wpq == 'WPQ4')\r\n\t\t{\r\n\t\t\tctx.BaseViewID = 97;\r\n\t\t}\r\n<\/pre>\n
 
\nThe override just lived in the first display template, but you could place it in it’s own file and add it to the JSLink.<\/p>\n
An updated version of this display template is available on #SPCSR<\/a><\/p>\n
As well as my new debug templates here<\/a>.
\n[\/important]<\/p>\n
 <\/p>\n
Summary<\/h2>\n
I think this is probably about the best option I could have come up with to solve this issue, I can\u2019t see a more efficient way of doing it without re-writing some of the MS javascript so I know this will be what I run with for now.<\/p>\n
I really hope this helps some people who have been struggling with this particularly thorny issue and please by all means if you have any comments, just grab me on twitter.. @Cimares<\/p>\n
You can get the full display template code here.<\/a><\/del><\/p>\n
Regards<\/p>\n
Paul.<\/p>\n","protected":false},"excerpt":{"rendered":"
Back at the start of August, I posted about the issues you might find using the JSLink Display Template when rendering multiple list instances on a page that all inherit from the Custom List Template. If you\u2019re not sure what the issue is, Have a read of that post first, then come back here. The … <\/p>\n
Continue reading<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[96,29,26,104,70,103,59],"tags":[186,168,178],"yoast_head":"\nListView Web Part issues with JSLink and SharePoint Display Templates<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ListView Web Part issues with JSLink and SharePoint Display Templates\" \/>\n<meta property=\"og:description\" content=\"Back at the start of August, I posted about the issues you might find using the JSLink Display Template when rendering multiple list instances on a page that all inherit from the Custom List Template. If you\u2019re not sure what the issue is, Have a read of that post first, then come back here. The … Continue reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog of an overweight SharePoint addict\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-02T20:38:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-05-02T15:25:55+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png\" \/>\n<meta name=\"author\" content=\"Cimares\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cimares\" \/>\n<meta name=\"twitter:site\" content=\"@cimares\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cimares\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/\",\"url\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/\",\"name\":\"ListView Web Part issues with JSLink and SharePoint Display Templates\",\"isPartOf\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png\",\"datePublished\":\"2013-09-02T20:38:00+00:00\",\"dateModified\":\"2014-05-02T15:25:55+00:00\",\"author\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/#primaryimage\",\"url\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png\",\"contentUrl\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png\"},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/#website\",\"url\":\"http:\/\/www.myfatblog.co.uk\/\",\"name\":\"Blog of an overweight SharePoint addict\",\"description\":\"The rantings of a (not so) food obsessed IT consultant!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.myfatblog.co.uk\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6\",\"name\":\"Cimares\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg\",\"contentUrl\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg\",\"caption\":\"Cimares\"},\"sameAs\":[\"http:\/\/www.myfatblog.co.uk\"],\"url\":\"http:\/\/www.myfatblog.co.uk\/index.php\/author\/reginald\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ListView Web Part issues with JSLink and SharePoint Display Templates","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/","og_locale":"en_US","og_type":"article","og_title":"ListView Web Part issues with JSLink and SharePoint Display Templates","og_description":"Back at the start of August, I posted about the issues you might find using the JSLink Display Template when rendering multiple list instances on a page that all inherit from the Custom List Template. If you\u2019re not sure what the issue is, Have a read of that post first, then come back here. The … Continue reading","og_url":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/","og_site_name":"Blog of an overweight SharePoint addict","article_published_time":"2013-09-02T20:38:00+00:00","article_modified_time":"2014-05-02T15:25:55+00:00","og_image":[{"url":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png"}],"author":"Cimares","twitter_card":"summary_large_image","twitter_creator":"@cimares","twitter_site":"@cimares","twitter_misc":{"Written by":"Cimares","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/","url":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/","name":"ListView Web Part issues with JSLink and SharePoint Display Templates","isPartOf":{"@id":"http:\/\/www.myfatblog.co.uk\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/#primaryimage"},"image":{"@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/#primaryimage"},"thumbnailUrl":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png","datePublished":"2013-09-02T20:38:00+00:00","dateModified":"2014-05-02T15:25:55+00:00","author":{"@id":"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2013\/09\/listview-web-part-issues-with-jslink-and-display-templates-a-solution\/#primaryimage","url":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png","contentUrl":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/ListView-Web-Part-issues-with-JSLink-and_12949\/SNAGHTML2dd845_thumb.png"},{"@type":"WebSite","@id":"http:\/\/www.myfatblog.co.uk\/#website","url":"http:\/\/www.myfatblog.co.uk\/","name":"Blog of an overweight SharePoint addict","description":"The rantings of a (not so) food obsessed IT consultant!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.myfatblog.co.uk\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6","name":"Cimares","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/image\/","url":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg","contentUrl":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg","caption":"Cimares"},"sameAs":["http:\/\/www.myfatblog.co.uk"],"url":"http:\/\/www.myfatblog.co.uk\/index.php\/author\/reginald\/"}]}},"_links":{"self":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/678"}],"collection":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=678"}],"version-history":[{"count":5,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/678\/revisions"}],"predecessor-version":[{"id":785,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/678\/revisions\/785"}],"wp:attachment":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=678"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}