Changing fields style 2013

Changing Style properties might seem basic to MSCRM 'outsiders' but that’s ok cause they haven’t met Anne and Ted from MS support.

Once they get accustomed to un-suppor-ted concepts and accept the risk, it’s up to us to make it a smooth journey.

Let’s assume we need to change the fields color, background-color, border and font properties.
Although it seems easy, get yourself ready for a bumpy ride.

The simplest most direct course of action would be to use a JQUERY selector
(e.g. #new_myattribute) to match a single html construct that applies to all field types.
Luckily both CRM 2011 and 2013 support the attribute.id + '_d' container (e.g. new_myattribute_d) which makes it simple to apply the same styling rules to all controls.

After some exploration it appears that changing the background-color (e.g. background-color: red) and border (border: 1px solid green) rules are the safest way to go since current CRM behavior doesn’t override these changes between field tabs and form saves.

The most problematic controls, as you might have guest by now, are controls that open other windows or apps such as ticker, url, email, phone (2013) and lookup.
CRM will override some of the styling rule you apply to these controls when you tab in and out of the fields. For example changing the font color will revert to its original color after you blur out of the field.


Finally , some controls are more complex (HTML wise) and require different Selectors in order to apply styling rules. To overcome this obstacle we can use an OR selector and build a few selectors that match all html constructs. Again, these changes will most likely be overridden by CRM so I didn’t implement them in my solution.

I haven’t tried all CSS styling options to see what lasts and what not. I leave it up to you to experiment further.

following is a simple 2013 field styler.
It has 3 methods.
The border and background methods that use 1 type of selector ('#new_attr1_d') and the css method
That use a different selector (i.e. '#new_attr_d div')

function styler(contorlId) {
    var sr = {},
        sel1 = ["#", contorlId , "_d"],
        sel2 = sel1.concat(" DIV");
    //change border style
    sr.border = function(){
        return applyStyle.call($(sel1.join("")), 
                               "border" , arguments[0]);
    }
    //change background style
    sr.background = function(){
        return applyStyle.call($(sel1.join("")), 
                               "background" , arguments[0]);
    }
    //change all other styles
    sr.css = function(){
        return applyStyle.apply($(sel2.join("")), arguments);
    }
    
    function applyStyle() {
        if (this.length) {   
            switch(arguments.length) {
                case 1: 
                    this.css(arguments[0]); 
                    break;
                case 2: 
                    this.css(arguments[0],arguments[1]); 
                    break;
            }
        }
        return sr;
    }    
    return sr;
}

See usage of styler inside the for loop.
The styler function accepts the field's id e.g. styler("new_attr1")
and returns a literal object which you can use to style against your field.

//test fields
var all = 
   ["new_phone1", "new_url1", "new_ticker1", 
    "new_string1", "new_optionset1", "new_float1", 
    "new_number1", "new_email1", "new_datetime1",
    "new_datetime2", "new_decimal1", "new_bool1", 
    "new_currency1", "new_account1", "new_memo1" , 
    "new_textarea1"];

//test the styler on all field types
for (var i = 0; i < all.length; i++) {
    //test disabled fields
    //xrmPage.getControl(all[i]).setDisabled(true);

    styler(all[i])
        .border("1px solid red")
        .background("gray")
        .css({
                textDecoration: 'underline',
                color: 'navy'
         });
}

One 2013 improvement that is worth mentioning is that all fields have two presentation states:

1. An inline value state which is what you see when you enter the field

2. A print state that takes over once field editing is done.

This concept actually allows for styling of controls that you could not style in 2011 such as disabled Option Sets.

A few tips for dessert:

1. When changing the background be sure to pick a light color since changing font-color won’t stick in all fields.

2. Put the styler in your SDK web resource so it’s available in all your forms.

Feel free to comment. Cheers,