dynamics-crmdynamics-crm-4

Colorize the CRM grid


How can I colorize the CRM grid on Dynamics CRM 4?

I would like to automatically display the list of an entity with a back color when loading the view.

My goal is to have different colors depending on the status of the listed entity. For example, I want to have a color for cases that have a date field that is in the past and another color for cases that have this date in the future.


Solution

  • The solution described below is a change not supported by Microsoft (that means, use it at your own risks). Plus, there is no guarantee that it won't be broken when applying CRM rollups.


    On the CRM server, modify the C:\Program Files\Microsoft Dynamics CRM\CRMWeb\_static\_grid\grid.htc file:

    Add the following code at the end of the initializeData() function:

    if (window.location.href.toLowerCase() == 
        "http://CrmServerName:5555/OrganizationName/cs/home_cases.aspx") {
        // We ensure that we are on the organization we want to colorize and that we 
        // are on the Cases page
    
        var colorizeColumn = InnerGrid.FindColumnIndex("new_date");
    
        if (colorizeColumn > 0) {
            // We ensure that the column we'll use to colorize is present
    
            for (var i = 0; i < InnerGrid.AllRecords.length; i++) {
                // For each line
    
                // Build the date value from the displayed date
                var new_date_displayed = InnerGrid.AllRecords[i][3].
                    cells[colorizeColumn].innerText;
                var new_date_value = new Date(new_date_displayed.substring(6,10), 
                                              new_date_displayed.substring(3,5) - 1, 
                                              new_date_displayed.substring(0,2), 
                                              new_date_displayed.substring(11,13), 
                                              new_date_displayed.substring(14,16), 0, 0);
                // Get current date
                var current_datetime = new Date();
    
                if (new_date_value <= current_datetime) {
                    InnerGrid.rows[i].style.backgroundColor="ff0066";
                } else {
                    InnerGrid.rows[i].style.backgroundColor="ff6600";
                }
            }
       }
    }
    

    And here's what you get:

    Colorized grid