I want to change color of the list item row based on the field value without any code.

For Example : I do have custom list with fields Title, Status(Pending,Running,Completed). I want to color list items based on color like If Status is

  1. Pending than row color should be yellow
  2. Running than row color should be light green
  3. Completed than row color should be dark green.

Can somebody please let me know the easy step to do that without code using just SharePoint designer or any other out of the box solution?

Thanks in advance

2 Answers 2


In SharePoint 2013 was introduced a so called Client Rendering Mode (CSR) which represents a rendering engine for list views, list forms and search results. I would recommend you to consider the following approach for your task.

Color code item row based on column value in SharePoint Foundation 2013


Follow these steps: 1. Get your coloring logic in a JS file. An example:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

     OnPostRender: function(ctx) {

       var colors =  {
          'Pending' : '#40f600',  
          'Running' : '#f9af00',
          'Completed' : '#f93030' 

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = colors[status];

This script sets the color based on a value of the Status column.

  1. Upload your JS file to a library within a site.
  2. Go to your list view in SharePoint, start editing the page.
  3. Select the list view web part and go to it's properties.
  4. Expand Miscellaneous and specify the location of a JLink file.
  • it work for me but the only change i need to do is instead of putting it in list view WebPart Miscellaneous setting, i kept the script in script editor WebPart
    – Codec
    Apr 22, 2016 at 10:52

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.