2

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? – Juan Pablo Pussacq Laborde Jul 12 '17 at 13:52
  • @jpussacq what do you mean – Sai Jul 12 '17 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? – Juan Pablo Pussacq Laborde Jul 12 '17 at 13:55
  • We're using SP 2013 on prem. I need to apply on the view , no edit form – Sai Jul 12 '17 at 13:58
4

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>"; 
            break; 
        case "(2) Normal": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "(3) Low": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    }

Result is:

enter image description here

2

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).

https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

  • How to code the % instead of High, Normal or low ? – Sai Jul 12 '17 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. – ThinkB4Code Jul 12 '17 at 14:19

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.