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.

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

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 + "' />";
}

Answer 1

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.

Answer 2

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