JavaScript Upgrade Strategy #11a: Code Not Configuration

As with many things in Dynamics CRM Development, there are more than one way to do the same task.  Take the addition of an OnChange event handler, for instance.

 

A Little Background

Here is how we would normally configure an OnChange Event that automatically formats a phone number field:

 

image

 

This links to this generic JavaScript function that formats the phone number then replaces the original phone number with the formatted one:

 

image

 

But we can also do the same thing using JavaScript:

Xrm.Page.getAttribute(“telephone1”).addOnChange(OnPhoneFieldChange);

 

Why is this important?

Well, it honestly depends on the number of OnChange events you have.  Let’s take the Contact, for instance. 

I could use technique #1 and manually add the Event Handler to each phone number field on the form.  OR, I add this JavaScript to the form OnLoad event:

 

Xrm.Page.getAttribute(“telephone1”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“business2”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“callback”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“company”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“fax”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“telephone2”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“home2”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“managerphone”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“pager”).addOnChange(OnPhoneFieldChange);

Xrm.Page.getAttribute(“mobilephone”).addOnChange(OnPhoneFieldChange);

 

Is there a huge difference?  Not really, but the code-route may be a little faster and easier to maintain than having to edit the properties of each individual field.  Since all of my phone field OnChange events are right in front of me, I can easily see which have events attached.

 

Does technique #2 work in all cases?

Quite honestly, the answer is: Maybe.  I have found that in some cases, we needed to have the OnChange event actually configured using the dialog, instead of using JavaScript.

This is mostly due to the form page life-cycle and when the page elements are created vs. when the JavaScript elements are created and executed.

In a nutshell: If you use technique #2 and you start seeing JavaScript errors about null objects, etc., then the technique will not work on that particular field, so you will need to convert it back to using the configuration dialog.

 

I was refactoring a 12,000-line JavaScript codebase at a customer’s last year and ended up actually adding a feature to my documentation tool, SnapShot!, to generate the JavaScript necessary to move the OnChange and OnSave events from technique #1 to technique #2.  This saved my quite a bit of time in my refactoring process.

Leave a Reply