JSLink Client-Side Rendering Not Functioning on Custom List

Question

I tested out the use of JSlink on the homepage with a demo list & it worked fine.

Home Page

I then used the same JSLink on the Demo List itself but images did not render. enter image description here

Any ideas on what I'm missing?

~site/Webparts/JSLink/JSLinkFieldTemplateBase.js|~site/Webparts/JSLink/JSLinkFieldTemplateExt.js

function listItemClick() {
    $(".status-image").on("click", function () {
        var status = $(this).attr("data-val");
        alert("STATUS: " + status);
    });
}

_spBodyOnLoadFunctions.push(listItemClick);

(function () { 
    var overrideContext = {};
    overrideContext.Templates = {}; 
    overrideContext.Templates.Fields =
    {
        'Status': { 'View': overrideTemplate }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext); 
})();


function overrideTemplate(ctx) {
    var status = ctx.CurrentItem.Status;
    var image = "";

    if (status == "Delayed")
        image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Delayed.png";
    if (status == "On-time")
        image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Ontime.png";
    if (status == "Late")
        image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Late.png";

    return "<img class='status-image' src='" + image + "' data-val='" + status + "' />";
}

Updated to:

function listItemClick() {
    $(".status-image").on("click", function () {
        var status = $(this).attr("data-val");
        alert("STATUS: " + status);
    });
}

_spBodyOnLoadFunctions.push(listItemClick);

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        Templates: {
            Fields: {
                'Status': { 'View': overrideTemplate }
            }
        }
    });
});

function overrideTemplate(ctx) {
    var status = ctx.CurrentItem.Status;
    var image = "";

    if (status == "Delayed")
        image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Delayed.png";
    if (status == "On-time")
        image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Ontime.png";
    if (status == "Late")
        image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Late.png";

    return "<img class='status-image' src='" + image + "' data-val='" + status + "' />";
}

Vadim Gremyachev · Answer 1 · 2015-04-29T15:12:13.850

2

It seems your template is not applied since clienttemplates.js library is not yet loaded when SPClientTemplates.TemplateManager.RegisterTemplateOverrides function is invoked.

Instead of

(function () { 
    var overrideContext = {};
    overrideContext.Templates = {}; 
    overrideContext.Templates.Fields =
    {
        'Status': { 'View': overrideTemplate }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext); 
})();

try to enclose it using SP.SOD.executeFunc function:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        Templates: {
              Fields: {
                 'Status': { 'View': overrideTemplate }
              }
        } 
    });
});

If Minimal Download Strategy feature is activated, then you could utilize RegisterModuleInit function to register template as demonstrated below:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function init() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

        // overrides go here

    });
  }

  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/yourtemplate.js"), init);
  init();

});

Follow Register CSR-override on MDS enabled SharePoint 2013 site for a more details.

edited Apr 29 '15 at 15:12

answered Apr 29 '15 at 14:03

Vadim Gremyachev

42,498
3
86
167

I updated the code to the above but that did not work. – Becki Apr 29 '15 at 14:34
Is Minimal Download Strategy feature is activated on web site? – Vadim Gremyachev Apr 29 '15 at 14:36
It is currently set to active. Should I deactivate it? – Becki Apr 29 '15 at 14:38
Aha, yep, first option would be to deactivate it (simplest one) and the second option would be to invoke template as demonstrated here (http://www.codeproject.com/Articles/888923/SharePoint-Client-Side-Rendering-List-Forms-p) see RegisterModuleInit function – Vadim Gremyachev Apr 29 '15 at 14:40
I would try just to deactivate MDS feature – Vadim Gremyachev Apr 29 '15 at 14:41
1

Deactivating did not work. I'll have a read over the Code Project article tomorrow and see how I get on. :) – Becki Apr 29 '15 at 15:07

score 0 · Answer 2 · answered Apr 29 '15 at 18:30

0

JSLink is great but not the only solution.

Your code can easily be put in a Calculated Column; if set to output as Number it will evaluate the HTML and display the IMG

"<IMG src=""http://URL/sites/Main/Testing/Webparts/JSLink/Status-"&[Status]&".png"">"

By the looks the only image name you have to rename is On-time

answered Apr 29 '15 at 18:30

Danny '365CSI' Engelman

21,176
7
35
79

in share point 2016 now it is deprecated. or this feature in calculated column is disabled by micro soft. – Negi Rox Aug 23 '17 at 06:22
correct; see: https://sharepoint.stackexchange.com/questions/218102/june-13th-2017-microsoft-blocked-handling-html-markup-in-sharepoint-calculated-f/218110#218110 – Danny '365CSI' Engelman Aug 24 '17 at 11:30

JSLink Client-Side Rendering Not Functioning on Custom List

2 Answers2

Linked