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

adil 1,206 Reputation points
2022-10-24T14:04:00.037+00:00

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.

SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,272 questions
SharePoint Server Management
SharePoint Server Management
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Management: The act or process of organizing, handling, directing or controlling something.
2,864 questions
{count} votes

1 answer

Sort by: Most helpful
  1. AllenXu-MSFT 17,421 Reputation points Microsoft Vendor
    2022-10-25T07:57:29.45+00:00

    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
    253746-image.png

    ----------

    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.