2

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: enter image description here

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? enter image description here

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.

0

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

  • Hi Venkat. I followed and tweak it to my list. The column name is "InorOut" but displays as "In or Out" with spaces. After I added the js link (last step), the column still displays the text rather than the image. – Tamras Merin Jun 13 '17 at 23:19
  • Can you confirm the js files loading? Or add an alert statement before return statement like this alert(sImgTag) – Venkat Konjeti Jun 13 '17 at 23:31
  • I added the alert statement like you suggested and saved the js file. Reload the list page, no alerts. – Tamras Merin Jun 13 '17 at 23:35
  • it means your file is not loaded. Where this JS file has been located. If it is in site collection library path should be ~sitecollection/folder path/filename.js or if it is in site library ~site/folder path/filename.js – Venkat Konjeti Jun 13 '17 at 23:37
  • I added it here: /_catalogs/masterpage/DS/js/InOutIndicator.js – Tamras Merin Jun 13 '17 at 23:40
1

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/

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • Thanks Wes. The links are quite helpful - I also found the pingback to link excellent read. – Tamras Merin Jun 14 '17 at 18:29
0

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.

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.