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

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.