Color Code SharePoint List Rows or Cells using Javascript

You can color code your list rows of a SharePoint list by using this code. Insert a script editor webpart, paste in this code, and change the customizations in the code:

<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Yes' : '#FF0000',  
          'No' :  '#0000FF'

       };

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

});
</script> 

What you need to change is:

• var statusColors:
• Change them to the options you want to color code on
• Change each option to a different color
•   var status = rows[i]["ColumnName"]
• Change ColumnName to the name of the column that you are color coding on

To only color one cell instead of the whole row, use this code:

<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
                  var rowId = GenerateIIDForListItem(ctx, rows[i]);
                          var row = document.getElementById(rowId);
                          var td = row.cells[6];
                            var td0 = row.cells[0];
                          switch(rows[i]["Status"]){
                            case "Bad":
                                       td6.style.backgroundColor = '#FFC7CE';
                                       break;
                            case "Not Good":
                                       td.style.backgroundColor = '#FFCC99';
                                       break;
                            case "Good":
                                       td.style.backgroundColor = '#FFFFCC';
                                       break;
                            case "Great":
                                       td.style.backgroundColor = '#C6EFCE';
                                       break;
                  }
                     td0.style.fontWeight = "600";
                     td0.style.backgroundColor = '#d3d3d3';
       }
     }
   }); 

});
</script> 

And finally, to add borders to your list items you can do this with CSS

<style>
.ms-listviewtable > tbody > tr td{
        border-top: 1px solid #AFAFAF !important;
        border-bottom: 1px solid #AFAFAF !important; 
        border-left: 1px solid #AFAFAF !important;
        border-right: 1px solid #AFAFAF !important;
    }
</style>

Once you change the code and insert it onto your page, your list will be color coded.
- Tested in SharePoint 2016

Source: 

• https://social.technet.microsoft.com/Forums/lync/en-US/31a3ff2f-0dee-417d-b84a-777eb2e8ab06/color-code-sharepoint-list?forum=sharepointgeneral
• http://uask.pt/blog/2017/02/14/sharepoint-csr-jslink-view-cell-customization/
• https://social.technet.microsoft.com/Forums/en-US/599db8b2-0d5d-4f82-bffc-06a8215e2454/jslink-color-code-background-entire-cell?forum=sharepointcustomization
• https://sharepoint.stackexchange.com/questions/158983/add-gridlines-to-a-sharepoint-2013-list-view

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.