5

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

2 Answers 2

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.

6
  • I updated the code to the above but that did not work.
    – Becki
    Apr 29, 2015 at 14:34
  • Is Minimal Download Strategy feature is activated on web site? Apr 29, 2015 at 14:36
  • It is currently set to active. Should I deactivate it?
    – Becki
    Apr 29, 2015 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 (codeproject.com/Articles/888923/…) see RegisterModuleInit function Apr 29, 2015 at 14:40
  • 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, 2015 at 15:07
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

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.