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

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.

  • 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 (codeproject.com/Articles/888923/…) see RegisterModuleInit function – Vadim Gremyachev Apr 29 '15 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 '15 at 15:07
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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