0

I am trying to get a super simple JS script to work on my SharePoint. I found this example here. This is what I am working with:

(function () {
var statusFieldCtx = {};
statusFieldCtx.Templates = {};
statusFieldCtx.Templates.Fields = {
    "Location": {  //The internal name of that column.
        "View": StatusFieldViewTemplate
    }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);

function StatusFieldViewTemplate(ctx) { //Function to change the status styling
    var statusValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; //To get the current item's status value.
    if (statusValue == "Equipment Room") {
        return "<div style='background-color:green;color:white'>" + statusValue + "</div>";
    }
    if (statusValue == "Treatment Room") {
      return "<div style='background-color:red;color:white'>" + statusValue + "</div>";
    }
    else{
        return statusValue;
    }
}
})();

This script does nothing at all. I did put in a alert("Override call worked"); to ensure that it is linked appropriately.

Am I missing something? This is working with SharePoint 2013.

|improve this question
  • 1
    You put the alert in the StatusFieldViewTemplate function? Did you put a breakpoint after you assign statusValue so you can inspect it's value (and also maybe inspect the ctx object to see if you can see anything in there? What type of field is the Location field? – Dylan Cristy Apr 2 at 19:45
  • The Location field is a Single line of text type. Hmm, nope, the Alert only worked in the main function, not the StatusFieldViewTemplate function. . . How can I set a breakpoint? Sorry, this is rather new to me. – Shinobii Apr 2 at 19:53
  • 1
    Hmm, then somehow the override is not getting registered. Are you sure that Location is truly the internal name of the field? Easiest way to check that is to go to the List Settings page for the list, scroll down to the Columns section and click the column name. On the "Edit Column" page, look at the URL for a query parameter "Field=" and there will be the internal name of the field. To set a breakpoint. open the browser dev tools (I think F12 on most). in Chrome there is a tab called "Sources" and in FF and IE I think it's called "Debugger" where you can find a list of the script... – Dylan Cristy Apr 2 at 20:46
  • 1
    ... files being loaded. Find yours and it will show you the code, and you can set a breakpoint there, then refresh the page and it should stop when it hits the breakpoint. – Dylan Cristy Apr 2 at 20:47
  • Well, turns out Location is actually x5vw. Thanks for that! Still cannot get the StatusFieldViewTemplate function to work. I will try the debugger and see what I can find. – Shinobii Apr 2 at 20:58
2

I would double check that "Location" is truly the internal name of the field. Sometimes the display name can change, and to register the CSR override you need to use the internal name.

The easiest way to check that is to go to the List Settings page for the list, scroll down to the Columns section and click on the name of the column. on the Edit Column page, look at the URL for a query param "Field=", and there you will see the actual internal name of the field.

|improve this answer

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.