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.
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?
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.
crmForm.all.fieldname.style.borderColor = "#c5c5c5";
Taking one last look we see that the results are exactly what we wanted:
crmForm.all.fieldname.readOnly = true; crmForm.all.fieldname.style.backgroundColor = "#eaf3ff"; crmForm.all.fieldname.style.borderColor = "#c5c5c5";
Hope this helps. Cheers!