How to change the form header colour based on the field value in CRM2011

This is a very common request from the customers to colour code the entity forms based on the field values. For example, a cold opportunity should be represented by red colour or a hot opportunity should be represented by green. This can be achieved as explained in the blog by Gonzalo Ruiz.In this blog I will be doing the same but using CSS web resources. The solution is inspired by the CEBlog.

Scenario

I am changing the account form header based on the  value of customertypecode option set field.

• If the option set value is 1 then change the form header to red.
• If the option set value is 2 then change the form header to green.
• Else keep the default colour.

Solution

The solution consists of 3 web resources

• CSS web resource for red colour

I have named this web resource “new_/ColoredHeaderRed.css”. Here is the code.

.ms-crm-Form-HeaderContainer{
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#fff6f8faE);
 }

• CSS web resource for green colour

I have named this web resource “new_/ColoredHeaderGreen.css”. Here is the code.

.ms-crm-Form-HeaderContainer{
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008000, endColorstr=#fff6f8faE);
 }

• JavaScript web resource to attach the relevant CSS file to the form

I have named this web resource “new_/ColoredHeaderScript.js”. The code is using a switch statement to attach an appropriate CSS file to the form, based on the value of customertypecode field. I am not using default in my switch statement as I don’t want to create a CSS file for default colour. Here is a code.

function loadCSS()
{
   // get the value picklist field
    var relType = Xrm.Page.getAttribute("customertypecode").getValue();
    var filename;
    switch (relType) {
           case 1:
                 filename="/WebResources/new_/ColoredHeaderRed.css";
                 attachCSS(filename);
                 break;
           case 2:
                 filename="/WebResources/new_/ColoredHeaderGreen.css";
                 attachCSS(filename);
                 break;
     }
}// end function

function attachCSS(filename){
       var fileref = document.createElement("link");
       fileref.setAttribute("rel", "stylesheet");
       fileref.setAttribute("type", "text/css");
       fileref.setAttribute("href", filename);
       document.getElementsByTagName("head")[0].appendChild(fileref);
}

Now call the loadCSS()  function on account form load event.

Save and publish the changes and test the solution.

Results

If the option set value is 1.

If the option set value is 2.

Supported or Non Supported

CSS web resources are not meant to be used to change the style of built in forms. So technically it is unsupported. But, we are not trying to retrieve the value of field or DOM object. We are just attaching a style sheet. If the  Microsoft decided to change the name of the header class, it may stop the code to change the header colour but it won’t break the system.