Improving readability of disabled fields in CRM 4.0

In talking with others apparently this is a common item that people ask for, and I finally ran across it so I figured it would be best to document my approach.

Background:
So we really do some neat things to push the envelope with CRM and this case was no exception. I will dispense with the gory details but long story short we were retreiving some data from an external source (using jQuery, Ajax, and JSON from a WCF service – how cool is that?) on a CRM form and we wanted the fields to be disabled once the field’s data was populated.

Sounds simple enough right? It could have been as simple as this:

crmForm.all.fieldname.value = "foo";
crmForm.all.fieldname.Disabled = true;

It could have been that simple and it was until our users wanted to look at the results. Enter problem stage left.

It appears that I’ve been given the gift of normal vision but not all the users had. It turns out that when you set the Disabled property to true on a CRM field one of the things it does is to change the field’s background and its border to muted color which signifies that the field is disabled. The users were fine with that. The other thing it can do is change the text color of the field to gray. Here’s an example:

This isn’t so good when your users want to read the contents and don’t have perfect vision. Trust me, we even have to scale back our minimum resolution requirements so that all the users can see.

The request was to keep the text color black and just have the background change. So how did I accomplish this?

It really only took a couple of steps. First, I wanted to make sure that the field was still effectively disabled so that the users couldn’t change the data on the field. Since CRM is an Internet Explorer only application, the issue was that when IE sees that a field is disabled it decides to be nice and change the text color to gray. Instead there is another property that you can use called readonly. Setting a field’s readonly property to true does in fact prevent the user from changing the value, so there’s our first part of the problem solved. You can make a field readonly in JavaScript like this:

crmForm.all.fieldname.readOnly = true;

The problem is that we didn’t wanted to leave it like that because when you make a field readonly it looks like this:

That’s functionaly fine, but as you can see it does give the user the impression that they can still edit it. So, let’s make them think it’s disabled by changing the background color, like this:

crmForm.all.fieldname.style.backgroundColor = "#eaf3ff";

Doing so produces the following result:

Alright, we’re almost there. For any perfectionists out there you may notice 2 differences from the first image:

1. The text is black, not gray, which is what we’re going for.
2. The border color is different.

So, we can quickly fix that by setting the border color using a little JavaScript too:

crmForm.all.fieldname.style.borderColor = "#c5c5c5";

Taking one last look we see that the results are exactly what we wanted:

So, in summary, 3 lines of JavaScript gets you exactly where you wanted to be:

crmForm.all.fieldname.readOnly = true;
crmForm.all.fieldname.style.backgroundColor = "#eaf3ff";
crmForm.all.fieldname.style.borderColor = "#c5c5c5";

Hope this helps. Cheers!

Advertisements

One thought on “Improving readability of disabled fields in CRM 4.0”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s