My boss wants me to make a traffic light system inside a list, which changes colour depinding on the values of a column, using javascript(has to be javascript!) in sharepoint 2013.

I found a guide online (https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd#content) and have read multiple tutorials, however i cannot solve the problem.

The code from the tutorial seems flawless, also i tried copy pasting other codes from different tutorials. In the end, whenever i link the JS with my webpart list, the list does not change its look at all and the traffic lights won't work.

Its not that i get an error, its just that the list acts like there is no JS at all? I tried saving the JS on different folders on the sharepoint, however it has not worked for me. can anyone help or suggest what i am doing wrong?

  • Is the "server render" checkbox checked in the web part properties of your list view web part? That could be preventing the JS from being executed. – Thriggle Aug 9 at 16:13
  • Both of the "=Concatenate" answers below will only work if your server admins allow HTML in Calculated Columns. See here for info on that setting and a workaround: techtrainingnotes.blogspot.com/2018/01/… – Mike Smith - MCT - MVP Aug 10 at 2:15

You can also simply use a calculated column to do the job, no js needed!

You need:

  • 3 small traffic light picture (one for red, green and amber) stored on your SharePoint (inside the image library for exemple); ex: https://binged.it/2OomoRb
  • in your list, a choice column with 3 choices (green, amber, red, or whatever you want to name them)
  • in your list, a calculated column with this formula:

    =CONCATENATE("http://mySite/sites/MySiteName/SiteAssets/",IF(Criticality="Red","AmpelRed.png",IF(Criticality="Amber","AmpelAmber.png",IF(Criticality="Green","AmpelGreen.png"))),"' height='30'>")

    and don't forget to select 'data type returned' = number

explanation on the formula: It will build the url to the correct picture depending the value of the column "criticality" (in my case)

heigh, define the picture high in pixels

And that should be it!

  • Worth mentioning that this requires special permissions for sites in on-premise installations, and won't work anymore on O365/SharePoint online: support.microsoft.com/en-us/help/4032106/… – John-M Aug 10 at 14:51
  • I wasn´t aware of restrictions. So far, it did work on the various on prem SP I did work with. Thanks for the information. – Romain Condat Aug 13 at 6:24

In JS you could use something like this and put it into a file and JSLink of a view

(function () {
var templateContext = {};
templateContext.Templates = {};
templateContext.Templates.Fields = {
"NameOfYourField": { "View": DoSomethingFunction }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(templateContext);
})();
function DoSomethingFunction(ctx) {
var Status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

//Switch + IF
switch (true) {
        case (Status == 0 /* or an string*/):
        return '<img src="/sites/YOURSITE/_layouts/15/images/componenterror.png" align="middle">';
        break;
        case ( Status == 1):
        return '<img src="/sites/YOURSITE/_layouts/15/images/componentdegraded.png" align="middle">';
        break;
        case (Status == 2):
        return '<img src="/sites/YOURSITE/_layouts/15/images/componentactive.png" align="middle">';
        break;
        }
}

The result looks like this Status

Create a calculated column Name Icon or something targeted to status(which should have the color in like red, green, and you can have warning with that for Orange or yellow ) then use the below formula to get those color in normal view Not allowing me to post html am updating below by removing < before div

=CONCATENATE("DIV style='font-weight:bold; font-size:12px; background-color:"&IF(Status="Warning","Orange",Status)&"; color:"&IF(Status="Warning","Orange",Status)&"'>width/DIV>")

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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