How to Change Grid Icons Dynamically

Gayan Perera, 01 July 2010

 
Here is an unsupported but a harmless customisation you can do in Dynamics CRM  to change the grid icons dynamically. In the example above I wanted to show whether an account has been locked or not (keep an eye out for my next blog post on how you can set privacy settings on records/child records per user and per role)

The standard grids in Dynamics CRM has a css class defined called "ms-crm-List-Data", if you have a look at the /_grid/AppGrid.css.aspx you'll see that, that class has a behaviour defined, this is what we'll use to swap out the icon.

For example
.ms-crm-List-Data
{
table-layout: fixed;
width: 100%;
behavior: url(/_static/_grid/appgrid_defaultdata.htc) url(/isv/magnetism/project/swapicon.htc);
}

Highlighted in bold is our custom behaviour script, which looks something like this:

<public:component lightweight="true">
<public:attach event="ondocumentready" onevent="initSwapIcon()"/>

<script language="JavaScript"></script>
<script type="text/javascript">
function initSwapIcon() {
    // only apply it to known entities + xyz crm
    if (typeof (this.oname) != "undefined" && window.location.href.toLowerCase().indexOf("xyz") > 0) {
    if (this.oname != "1") { return; } // 1=account
        for (var i = 0; i < this.rows.length; i++) {
        if (typeof (this.rows[i].oid) != "undefined") {
            this.rows[i].cells[1].innerHTML = "<img src=\"" + "/isv/magnetism/project/swap-icon.ashx?id=" + this.rows[i].oid + "&type=" + this.oname + "\" />";
        }
    }
}
}
</script>
</public:component>

 

Inside each row in the second column is where we can get access to the icon, so all we have to do now is replace out the path to the image with our own custom handler which will run it's logic based on the parameters we pass, eg: record id (this.rows[i].oid) and the entity type, so that we can use this across multiple entities.

This is an unsupported customization, a rollup can update the AppGrid.css.aspx file anytime, if it does you'll lose the custom icons, simply include the custom behaviour reference and you'll be back in business.

Enjoy!