Format and validate a phone number in CRM 2011

There is no out-of-the-box functionality to format a phone number in CRM 2011.

What we need

What is needed is something that allows the user to type in his phone number, like this:

and when the user tabs of the phone number field, it converts the content to look like this:

Notice that the phone number is nicely formatted? And while we are at it, might as well do some validations for what was typed in. This is the purpose of this article.

How to do it

Web resources are reusable components in CRM 2011, and there is built in ability to pass in the context, or the entity to the web resource. This lends itself to considerable power in the scripting environment, because you can then use that entity to interact with the XRM DOM.

The following article will show these steps:

1. Create a javascript that validates and formats the phone number.
2. The script will have a single parameter, called context. This object will provide all the information in it to enable the script to interrogate the value and update the screen value.
3. Create an OnChange event handler on the phone field, and call the javascript function.

Steps

Create javascript function

1. Read the following article: Create a general use Javascript library for CRM 2011
2. Add the following code to that library:

   // This receives the passed in context from the form,  // then interrogates the context to which entity member fired the event, then // extracts the value from that entity control, // strips out the formatting crap and makes sure it is a real number. // If the number is proper (10 numeric)  it formats the number back into a string // then writes the string back to the control. //If the number is not proper, it squeals at the user. // function FormatPhoneNumber(context) {   var oField = context.getEventSource().getValue();   var sAllNumeric = oField;  if(typeof(oField)!= "undefined" && oField!= null)   {     sAllNumeric = oField.replace(/[^0-9]/g, "");     switch (sAllNumeric.length)     {       case 10:        sFormattedPhoneNumber = "(" + sAllNumeric.substr(0,3) + ") " + sAllNumeric.substr(3,3) +"-"+ sAllNumeric.substr(6,4)        break;     default:       alert("Phone must contain 10 numbers.")      break;    }   }   context.getEventSource().setValue(sFormattedPhoneNumber); }

3. Save and publish the library.
4. Begin customizing the form that contains the phone number you want to edit.
5. Edit form properties by clicking the Form Properties icon on the ribbon
6. Add the library you created to the Form Libraries List (the top one) and save. This will make the script available for use in the form.
7. Edit the properties of the phone number field 
8. Select the Events tab and make sure the OnChange event is selected. 
9. Click Add on the Event Handler list 
10. Specify the library you have just added to the form as the Library
11. Type the  name of the function in the Function textbox
12. Ensure Enabled is Checked
13. Ensure Pass execution context as first parameter is checked
14. Save and publish.
15. This shows the steps detailed above: