SharePoint CSR (Client Side Rendering) not updating in Cache

My last post was about client side rendering customization. I wrote how to change the UI of a listview based on some values of the SharePoint list item. I realized that changes i made in my JSLink file are displayed but sometimes they are only available after a hard refresh (STRG+F5). When i first navigate to the list it looks like this:

cond_1

After hitting STRG+ F5 it looks like i was expecting it to look:

cond_10

What is the reason and what can i do?

Ok first the reason ist MDS – Minimal Download Strategy. There is a really cool post which explains it pretty good. And of course i got it working thanks to this great post of Wictor Wilén.

What can i do?

I just changed my code a little bit. The important steps are the following:

  • Create a Namespace like ILS
  • Define the Functions and Templates inside the namespace
  • Implement a register function for MDS and non-MDS Sites

The background is explained in the posts i linked in my post, but to cut a long story short, the namespace has to be registered correctly to work in MDS, cause MDS just reloads the Delta and contains something like a garbage collector, which removes global variables. So we register our Namespace everytime and make sure that it will load our customization with each page load.

My example can be downloaded here.


Type.registerNamespace('ILS')
ILS.Demos = ILS.Demos || {};
ILS.Demos.Templates = ILS.Demos.Templates || {};
ILS.Demos.Functions = ILS.Demos.Functions || {};

ILS.Demos.Functions.CreateDateFormat = function(ctx)
{
//Convert the CreateDate into a number with getTime()
//ATTENTION: We Split by using '/' if you turn to another language setting it might not working!
var CreateDate = new Date(ctx.CurrentItem.CreateDate.split('/')[2],ctx.CurrentItem.CreateDate.split('/')[0]-1,ctx.CurrentItem.CreateDate.split('/')[1]).getTime();

var today = new Date();
today.setHours(0,0,0,0);

var todayNo = today.getTime();

//Compare and react
if(CreateDate == 'undefined' || !CreateDate)
{
return ctx.CurrentItem.CreateDate;
}
else if(CreateDate < todayNo)
{
return "<span><font style='background-color:red;display:block;'>"+ctx.CurrentItem.CreateDate+"</font>";

}
else if(CreateDate == todayNo)
{
return "<span><font style='background-color:yellow;display:block;'>"+ctx.CurrentItem.CreateDate+"</font></span>";
}
else
{
return ctx.CurrentItem.CreateDate;
}
}

ILS.Demos.Functions.PriorityFormat = function(ctx)
{
var priorityValue = ctx.CurrentItem.Priority;

if(priorityValue == 'High')
{
return "<span><font style='background-color:red;display:block;'>"+ctx.CurrentItem.Priority+"</font></span>";
}
else
{
return ctx.CurrentItem.Priority;
}

}
ILS.Demos.Functions.PercentCompleteFormat = function(ctx)
{
var returnvalue = '<div style="background: #BCBCBC; display:block; height: 20px; width: 100px;"><span style="color: #fff; position:absolute; text-align: center; width: 100px;">'+ctx.CurrentItem.PercentComplete+'</span><div style="background: #D2421F; height: 100%; width: '+ctx.CurrentItem.PercentComplete.replace(" %", "")+'%"></div></div>';
return returnvalue;

}

ILS.Demos.Functions.HighlightRowOverride = function(ctx)
{
for(var i=0; i < ctx.ListData.Row.length; i++)
{
var listItem = ctx.ListData.Row[i];
var iid = GenerateIIDForListItem(ctx, listItem);
var row = document.getElementById(iid);

if(listItem.Marked == "Yes")
{
row.style.backgroundColor = "rgba(4,92,8,0.1)";
}
}
ctx.skipNextAnimation = true;
}

ILS.Demos.OnPostRender = [ILS.Demos.Functions.HighlightRowOverride];

ILS.Demos.Templates.Fields = {
"Priority": {"View": ILS.Demos.Functions.PriorityFormat },
"PercentComplete": {"View": ILS.Demos.Functions.PercentCompleteFormat },
"CreateDate": {"View": ILS.Demos.Functions.CreateDateFormat }
};

ILS.Demos.Functions.RegisterField = function () {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ILS.Demos)
}

ILS.Demos.Functions.MdsRegisterField = function () {
var thisUrl = _spPageContextInfo.siteServerRelativeUrl
+ "/_catalogs/masterpage/Display Templates/cond_formatting.js";
ILS.Demos.Functions.RegisterField();
//That's an important step when MDS is active
RegisterModuleInit(thisUrl, ILS.Demos.Functions.RegisterField)
};

//Starting
//If _spPageContextInfo is available the MDS is activated, we have to register our function
if (typeof _spPageContextInfo != "undefined" &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; _spPageContextInfo != null) {
ILS.Demos.Functions.MdsRegisterField();
}
else
{
//MDS is not activated, we register our Functions
ILS.Demos.Functions.RegisterField();
}


That’s it. I know it is not well documented on the web, but for me the post of Wictor helped a lot and just trying.

If you have more ideas or improvements please let me know.

The article or information provided here represents completely my own personal view & thought. It is recommended to test the content or scripts of the site in the lab, before making use in the production environment & use it completely at your own risk. The articles, scripts, suggestions or tricks published on the site are provided AS-IS with no warranties or guarantees and confers no rights.

Karsten Pohnke About Karsten Pohnke
He is Consultant for SharePoint Solutions for collaboration, communication and business processes. He provides his customers applications based on standard features as well as development or combining the power of several microsoft tools like Dynamics CRM. In his free time he tries to collect tipps and worthy experience in this blog.

2 comments on “SharePoint CSR (Client Side Rendering) not updating in Cache

  1. Hi Karsten, I have tried using your tips to implement the conditional formating but after spending several hours, I am unable to make it work. It would be nice if I can share it with you via Lynx or anything else to get it working. Appreciate any help you can provide for your time and effort.

    Regards,
    Vijay

  2. Karsten, your code works beautifully for me. There is one item that has eluded me. When I filter a list and manually refresh I get the following error: TypeError: Cannot read property ‘style’ of null.
    I am guessing that this is caused by the filter process throwing the row id off. I have not been able to figure out how to resolve this issue. Would you be able to provide me with guidance?

    Thank you very much for your helpful code and assistance.

Submit comment

Allowed HTML tags: <a href="http://google.com">google</a> <strong>bold</strong> <em>emphasized</em> <code>code</code> <blockquote>
quote
</blockquote>

Please fill in the captcha: * Time limit is exhausted. Please reload CAPTCHA.