enter image description here

So I am trying to add the color to the field instead of the status text. How would you guy by doing this?


2 Answers 2


Put this below code in content editor webpart or in JS file and connect it with JSLink property to your webpart.

Here it is using priority field. You can use your desired field.


(function () {

    // Create object that have the context information about the field that we want to change it's output render 
    var priorityFiledContext = {};
    priorityFiledContext.Templates = {};
    priorityFiledContext.Templates.Fields = {
        // Apply the new rendering for Priority field on List View
        "Priority": { "View": priorityFiledTemplate }



// This function provides the rendering logic for list view
function priorityFiledTemplate(ctx) {

    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

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

Hope this will help you!

  • Thanks for the help. This actually worked with the JSLink. Jun 9, 2016 at 18:13

This can be done via JSLink. JSLink allows you to use JavaScript to do things like conditional formatting of list items, including things like conditionally displaying an image. A quick search for JSLink KPI turns up lots of examples, including this one.

  • Do you think I could use the code below as an embedded code into my page? May 31, 2016 at 21:02
  • Save the file in a folder (style library for example). Copy the js file URL-path. Go to your page with the list and open the settingswindow for the webpart. Under advanced you should see a input for js-link. Post the URL you copied and save.
    – Andreas
    May 31, 2016 at 23:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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