Friday, July 6, 2012

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.
image
Save and publish the changes and test the solution.

Results

If the option set value is 1.
image
If the option set value is 2.
image

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.

19 comments:

  1. We did this too, but used colours from Dynamics's pallet:
    color = "#b9fdb0";
    color = "#ffffae";
    color = "#b0e9fd";
    color = "#ffaeae";
    color = "#ffaeae";

    ReplyDelete
  2. Hi..

    I tried this function in my one of the custom entity but the color is not changing.Its in same colors.Same steps I followed...

    ReplyDelete
  3. Hi Amreek,
    I am Trying to use your code but it is not working. I am not getting ant error also.
    Can you tell me what is to checked or what is wrong.

    Regards
    Mrp

    ReplyDelete
    Replies
    1. It should. Can you paste your code and I have a look.

      Delete
  4. I am Trying to use your code but it is not working. I am not getting ant error also.

    The code:
    function loadCSS()
    {

    var relType = Xrm.Page.getAttribute("new_apoio").getValue();
    var filename;
    switch (relType) {
    case 2:
    filename="/WebResources/ColoredHeaderYellow.css";
    attachCSS(filename);
    break;

    case 3:
    filename="/WebResources/ColoredHeaderGreen.css";
    attachCSS(filename);
    break;

    case 4:
    filename="/WebResources/ColoredHeaderRed.css";
    attachCSS(filename);
    break;

    }
    }


    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);
    }

    Can help??

    ReplyDelete
    Replies
    1. Without looking into details. I think your webresource names are wrong. It should have some sort of prefix.

      Go to the webresource and look at the URL.

      Thanks

      Delete
    2. Did you ever get this to work? I am also having difficulty displaying the colors, however there is no error.

      Delete
  5. Thanks for the instructions this out me on the path to what I need.
    Just got the colors to work so far. I added the entire URL to the filename 'http://servername/org/webresources/filename' to get the colors to show up.

    Also the line that calls the gradients is for IE 6 and 7. Go to the below for updated versions of it.

    http://msdn.microsoft.com/en-us/library/ms532887(v=vs.85).aspx

    ReplyDelete
  6. hi,
    i used your code exactly and nothing is happening
    i could work it out if i at least got an error but am getting nothing and the form is not changing

    any help please!!

    ReplyDelete
    Replies
    1. Curious if you ever got this code to work? I'm trying to accomplish the same thing today and no error messages and color does not change. I know it's been 1 1/2-years but hopefully you recall what your resolution was. Thanks mark

      Delete
    2. This is due to changes in IE Browser. Refer to link below to get it working.
      http://stackoverflow.com/questions/16148551/ie-10-attach-css

      Delete
  7. Is this compatible with CRM 2015 Online/Onpremise environemnt?

    Thanks!

    ReplyDelete
  8. Hi,

    I just tried this solution in CRM Online and doesn't seem to work here. I guess the CSS class has changed over time. But even by amending that I am not able to get this to work. I need to colorize the header in CRM online in dependence of the relationship field. Any ideas how to achieve this?

    Many thanks!

    ReplyDelete
  9. Thanks Mate the code works just fine.
    Just a quick question can I do the same thing to the body of the form ??
    or is there a different way ??

    ReplyDelete
  10. I Tried your same code with same scenario..

    while running this code onload am not getting any error also..

    Its not working ..



    Here is my code

    function loadCSS(executionContext)
    {
    // get the value picklist field
    var formContext = executionContext.getFormContext();
    var relType =formContext.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);
    }

    ReplyDelete