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

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.
    Blogger Comment

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.