Client Side Rendering

Question

I have followed the guide (https://www.c5insight.com/Resources/Blog/tabid/148/entryid/653/how-you-make-sharepoint-announcements-grab-attention-easily-using-csr.aspx) to implement some client side rendering for an Announcement list on my site.

I have verified everything multiple times...but it still will only display the unmodified announcement list on my SP page. It isn't rendering the list like it should.

The JSLink is ugly. Should the JSLink start with a [sourcecode] line?

Answer 1

No. That first line of the example code in that article:

[sourcecode language='javascript' padlinenumbers='true' htmlscript='false' gutter='true']

and the closing [/sourcecode] is some kind of markup for that website to try to get the javascript example code there displaying nicely. Apparently it's not working correctly.

Here's what the example code should look like, I think. I am speculating a bit on the parts that are commented out based on what looks right to me, but obviously I am not the author of that article, and I did not follow through all the bits of that example to try and get this working, so this is just my best guess based on looking at the code itself:

(function () { 
    document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>'); 
    document.write('<script src="/Style%20Library/CriticalNews/js/homepage_message.js"><\/script>'); 
    document.write('<link rel="stylesheet" type="text/css" href="/Style%20Library/CriticalNews/css/homepage_message.css" />'); 

    // Load our custom CSS 
    /*
    var cssId = 'myCss'; 
    // you could encode the css path itself to generate id.. 
    if (!document.getElementById(cssId)) { 
        var head = document.getElementsByTagName('head')[0]; 
        var link = document.createElement('link'); 
        link.id = cssId; 
        link.rel = 'stylesheet'; 
        link.type = 'text/css'; 
        link.href = '/Style Library/CriticalNews/css/homepage_message.css'; 
        link.media = 'all'; 
        head.appendChild(link); }
    */

    /* Initialize the variable that store the overrides objects. */ 
    var overrideCtx = {};
    overrideCtx.Templates = {};

    // Assign functions or plain html strings to the templateset objects: 
    // header, footer and item. 
    overrideCtx.Templates.Header = "<div class='center'>"; 
    overrideCtx.Templates.Footer = "</div>";

    // This template is assigned to the CustomItem function. 
    overrideCtx.Templates.Item = CustomItem;

    //overrideCtx.BaseViewID = 1; 
    overrideCtx.ListTemplateType = 104;

    // Register the template overrides. 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); 
})(); 

/* 
 * This function builds the output for the item template. 
 * Uses the Context object to access announcement data. 
 */ 
function CustomItem(ctx) { 
    // Build a listitem entry for every announcement in the list. 
    /* 
       <div class="notification fail canhide"><span>ERROR!</span> This is an error message.</div> 
       <div class="notification info canhide"><span>INFORMATION:</span> This is an information.</div> 
       <div class="notification warning canhide"><span>WARNING!</span> This is a warning message.</div> 
    */

    // var ret = "<li>This is a " + ctx.CurrentItem.MoreText + "</li>"; 

    if (ctx.CurrentItem["MessageType"] == "Informational (blue)") { 
        var ret = "<div class='notification info'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>"; 
    } else if (ctx.CurrentItem["MessageType"] == "Warning (yellow)") { 
        var ret = "<div class='notification warning'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>"; 
    } else if (ctx.CurrentItem["MessageType"] == "Critical (red)") { 
        var ret = "<div class='notification fail'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>"; 
    } 
    return ret; 
}

Additionally, I would just like to say I completely disagree with that author's use of document.write() in order to link in other scripts. The JSLink property can accept a pipe delimited list of paths to script files, and will load them in the order presented in the list, so instead of making the JSLink value on the webpart be only

~sitecollection/path/to/homepage_message_override.js

you could make it

~sitecollection/path/to/jquery.min.js|~sitecollection/path/to/homepage_message.js|~sitecollection/path/to/homepage_message_override.js

Obviously that leaves out the custom CSS file, you can't load CSS like that through JSLink, so you would have to find some other way of loading custom CSS onto the page.

But that document.write() stuff is just.... eww.

---

Oh - also, to add a pedantic point, the code itself is not "JSLink". The code is "client side rendering override script". Client Side Rendering (CSR) is a system you can hook into and override in order to apply custom HTML rendering.

"JSLink" is a property on various SharePoint artifacts (web parts, fields, content types, etc.) that you can use to link to Javascript files. Any Javascript files. Those files may be used for CSR, or they may not be. Doesn't matter. If you need jQuery on a page to do stuff that has nothing to do with CSR, you could use JSLink to pull in the jQuery file.

In the case of this example, what I would say is happening is that:

The author of that article is using JSLink to pull in a CSR script to register and apply CSR overrides to override the rendering of an Announcement list.