Any one have done traffic light (color code) a field based on percentage value on SharePoint 2013 using code? With out Sp designer or visual only using Clint side?

When you enter the % value,

  • If the value is 0 to 30% =green
  • If the value is 30 to 70% ......yellow
  • If the value is 70 to 100%........red
  • Do you need in a view? SharePoint version? Commented Jul 12, 2017 at 13:52
  • @jpussacq what do you mean
    – Sai
    Commented Jul 12, 2017 at 13:53
  • 1) Which version of sharepoint are you using? 2) Do you need to use colors in a "view" or in a form like edit form? Commented Jul 12, 2017 at 13:55
  • We're using SP 2013 on prem. I need to apply on the view , no edit form
    – Sai
    Commented Jul 12, 2017 at 13:58

2 Answers 2


Tray jsLink. This code is for a view:

CSR code samples #1 (Task Priority color)

You can see the reference to a view here:

priorityFiledContext.Templates.Fields = { 
  // Apply the new rendering for Priority field on List View 
  "Priority": { "View": priorityFiledTemplate } 

And you can add your own html and css in these lines:

// Return html element with appropriate color based on priority value 
    switch (priority) { 
        case "(1) High": 
            return "<span style='color :#f00'>" + priority + "</span>"; 
        case "(2) Normal": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
        case "(3) Low": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 

Result is:

enter image description here


You can use JSLink/CSR concept of SharePoint, available in SP2013. The CSR is technique to represent the data. Most of the web part in SP2013 has ability of custom rendering using CSR. Here is an example of exactly what you are trying to achieve (refer to Sample 1 in the page).


  • How to code the % instead of High, Normal or low ?
    – Sai
    Commented Jul 12, 2017 at 14:15
  • In the switch case in sample code, where you are building the HTML of the field (rendering) you can add whatever you require. As per sample in the function priorityFiledTemplate the return statements are what is going render on page. So design your HTML as you require. Commented Jul 12, 2017 at 14:19

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.