Question

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.

Answer 1

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: