SharePoint Online: Status Indicator / Stop Lights

Question

I have 3 columns:

• InorOut
• In (calculated field)
• Out (calculated field)

The In and Out columns displays the icon using this formula:

="<DIV style='text-align:center'>"&IF([In or Out]="In","<img src='/_layouts/images/KPIDefault-0.GIF' align='middle'>","")&"</DIV>"

I also set the return data type to number. It was working for months until today. I took a screenshot yesterday so I know it was working:

Today, it displays the code instead of the icons. Any idea how to fix this or maybe another way to display status icons? I found and tried Status Indicators on SharePoint Online but it didn't work or I wasn't doing it right.

Below is the js code I'm using:

(function() {
var oFldCtx = {};
oFldCtx.Templates = {};
oFldCtx.Templates.Fields = {"InorOut": {"View": overrideStatus} };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();
function overrideStatus(ctx) {
var sStatus = ctx.CurrentItem.InorOut;
var sIconFileName = "";
switch(sStatus) {
    case "In":
            sIconFileName = "KPIDefault-0.GIF";
        break;
    case "Out":
            sIconFileName = "KPIDefault-2.GIF";
        break;
    default:
        break;
}
if (sIconFileName == "") return sStatus;
var sWebURL = _spPageContextInfo.webServerRelativeUrl;
var sIconSrc = sWebUrl + "/_catalogs/masterpage/DS/icons/" + sIconFileName;
var sImgTag = "<img id='" + ctx.CurrentItem.ID + "' ";
sImgTag += "src='" + sIconSrc + "' ";
sImgTag += "/>";
return sImgTag;
}

Resolution: Fixed the typo (WebURL vs. WebUrl) in the above code

The js file is not loading (404), below is the js file properties -- did I set it incorrectly?

Resolution: I learned more about the js properties by reading this link. The article also explained more about the usage of ~site and ~sitecollection in the JS Link I initially didn't understand

Thanks for all the help.

Answer 1

This is a new change to the calculated column from today as per this article.

Using CSR (JS Link) we can achieve the same functionality. Below is a complete article to learn CSR.

How to work with CSR on SharePoint List

Answer 2

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.

Some other JS Link references, posts, and templates that might be helpful: http://www.idubbs.com/blog/js-link-and-csr/

(start here) Hello World for JSLink http://www.idubbs.com/blog/2014/js-link-hello-world/

Response to the change yesterday http://www.idubbs.com/blog/2017/js-link-no-more-html-in-calculated-field-change/

Answer 3

Below is how I solved this issue:

1) Created the .js file in Notepad. I changed it from above code so that I could use the same js file in my subsites where the In/Out Board is being displayed/filtered by Department.

InorOut is my column name with In or Out value.

(function() {
var oFldCtx = {};
oFldCtx.Templates = {};
oFldCtx.Templates.Fields = {"InorOut": {"View": overrideStatus} };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();

function overrideStatus(ctx) {
var sStatus = ctx.CurrentItem.InorOut;

if (sStatus == 'In')    {
    return "<img src='/_layouts/images/KPIDefault-0.GIF'/>";    }
if (sStatus == 'Out')   {
    return "<img src='/_layouts/images/KPIDefault-2.GIF'/>";    }
}

2) Uploaded and checked-in the js file in Site Settings > Masterpages > (I created a new folder called DDD and subfolder called JS (or /_catalogs/masterpage/ddd/js/inoutindicator.js)

3) After uploading the js file, I edited its properties to

• Content type: JavaScript Display Template
• Target Control Type: View
• Standalone: Override
• Target Scope: /
• Target List Template ID: 100

4) Edited the web part displaying the in/out board and under Miscellaneous in web part properties, I entered the JS Link: ~sitecollection/_catalogs/masterpage/ddd/js/inoutindicator.js

This link helped me understand that ~sitecollection or ~site really meant to enter this string of characters and how to understand the js file properties. :)

Again, thanks everyone for contributing and introducing me to CSR or JS Link.