Post
Ask Question

Color Your SharePoint View Based on Column Value in Office 365

Welcome to a blog on how to color your SharePoint view based on column value in Office 365. We developers usually get  a requirement when our customers want to highlight the view with a color based on some status of the whole item.

SharePoint has the category color field but the functionality is very different from what they expect. So what do we do now, tell them this is not going to work in SharePoint? No, we have a way. Let me show you how.

  • Create a List and under that list, create a column named Status with choice values as Current and Expired.



  • Open the view.

  • Edit the view and use a script editor to add the following code.

    Code
    1. <script type="text/javascript">  
    2.     #Call in the JavaScript  
    3.     function.SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function()  
    4.     {  
    5.         SPClientTemplates.TemplateManager.RegisterTemplateOverrides(  
    6.         {  
    7.             OnPostRender: function(ctx)  
    8.             {  
    9.                 var statuscolor = {  
    10.  
    11.                     #Specify the status with colors here.  
    12.   
    13.                     'Expired': '#DC143C',  
    14.  
    15.                     #Note - If you want all the status choices to show different colors,  
    16.   
    17.                     you can add them here and assign them different colors.  
    18.   
    19.                 };  
    20.  
    21.                 #Get all rows  
    22.   
    23.                 var colorrow = ctx.ListData.Row;  
    24.                 for (var i = 0; i < colorrow.length; i++)  
    25.                 {  
    26.                     #Identify the row with status as expired and color them.  
    27.   
    28.                     var statusval = colorrow[i]["Status"];  
    29.                     var rowid = GenerateIIDForListItem(ctx, colorrow[i]);  
    30.                     var row = document.getElementById(rowid);  
    31.                     row.style.backgroundColor = statuscolor[statusval];  
    32.                 }  
    33.             }  
    34.         });  
    35.     });  
    36. </script>  
  • Once you add the code, add two items to the list.

  • One should have status as current which will show no effect to the row color and the other one should have status as expired whose whole row will display red color stating it has been expired as per the screen below.

Now whatever items you add, if the status equals Expired, the complete row will display in red.