Not just another SharePoint blog

Main menu

Post navigation

Using multiple CSR Template Overrides on one Page

SharePoint 2013 ClientSideRendering is a great tool to customize list rendering. But when you put two or more ListViewWebParts on one page and want to use csr, things get complicated. This is because the registered template overrides are executed on all lists, even when you use JS-Link option in WebPart properties.
Microsoft tries to solve this problem by filtering the template overrides by ListTemplateType, BaseViewID and ViewStyle. But when you set up two (or more) custom lists via frontend, the all get ListTemplateType 100. And what happens, when you use two times the same list on one page…?
Now, after more than 2,5 years it was time to solve this problem. (Here is another solution: [1]).

Idea of CSR Framework to support multiple template overrides

My solution is to write one general template override which gets handed over multiple template override objects with filters. By evaluating the filters, the single general template override can decide if the code in an overidden object has to be executed or the default renderer has to be used.

Example: Footer Template Override

I will demonstrate the technique on the footer template. Here is a footer template override:

The output is something like this:
You see the customized WebPart on the left and a second uncustomized WebPart on the right. Both are custom lists (with ListTemplateType 100).

AtiaNuur.CSR Framework in detail

So what happens in AtiaNuur.CSR. The framework follows three steps. It doesn’t matter if it’s footer-, header-, body-, OnPreRender, fields- etc. override. Therefore I’ll demonstrate it on the footer template override. You can get the rest out of the code. These steps are:

Filling an array with objects of render-function and filters

Filtering on current context

Calling rendering function

I’ll start in reverse order, as the rendering function is the most interesting and the rest will be easier to understand.

Filtering on current context (renderingOnCTX)

The renderingOnCTX function determines if the rendering function (templateDefinition.Renderer) has to be executed in current context or not. It simply does this by comparing any parameter in CTXFilters with corresponding parameter in ctx. So you can compare ListTitle, URLs and also WebPart-Number. It is also possible, to execute custom function, by adding them to the CTXFilter object.
Here is the renderingOnCTX function: