Show Color in Task List Item based on numeric column value.

Question

Hi In SharePoint Task List is there any way to change the list item back ground color based one of numeric column value
In task list there is number column and when value of this column range between 50-100 then change the color of this list item.

Answer 1

Hi @adil

In SharePoint Server 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.

Below example demonstrates how to highlight list task rows based on a number column

Template code:

        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++) {  
                        // get the item  
                        var item = rows[i]['column Internal name'];  
                        var rowId = GenerateIIDForListItem(ctx, rows[i]);  
                        var row = document.getElementById(rowId);  
                        if (row != null && item > 50 && item < 100) {                    
                            row.style.backgroundColor = '#FF0000';                    
                        }  
                    }  
                }  
            });  
        });  

Note: Don't forget to replace ['column Internal name'] in var item = rows[i]['column Internal name'] with your own.

Here is how to apply the changes:

1. Switch the page into edit mode
2. Add Script Editor webpart right below the list view web part.
3. Put the specified code by wrapping it using script tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
4. Save the page

Results

----------

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.