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
    Commented Aug 9, 2018 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/… Commented Aug 10, 2018 at 2:15

3 Answers 3


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
    Commented Aug 10, 2018 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.
    – MüdeFuchs
    Commented Aug 13, 2018 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 }
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">';
        case ( Status == 1):
        return '<img src="/sites/YOURSITE/_layouts/15/images/componentdegraded.png" align="middle">';
        case (Status == 2):
        return '<img src="/sites/YOURSITE/_layouts/15/images/componentactive.png" align="middle">';

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 agree to our terms of service and acknowledge you have read our privacy policy.

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