Pages

Thursday, October 11, 2012

Phone Number Formatting

It is a fairly common and understandable requirement that telephone numbers be formatted when entering via the CRM front end. For example, if a user enters "5551234123" or "555-1234123" or "555-123-4123" or any other variation thereof it should be formatted into the standard format of  "(555) 123-4123".

The  jscript logic mentioned below can be used to this end. Specifically this logic will work as follows:
  • Strip any non-numeric values from the phone number field
  • If the phone number is less than 10 digits issue a warning 
  • If the phone number is equal to 10 digits, format as in the example above
  • If the phone number exceeds 10 digits assume it to be an international number and do not perform any additional formatting (besides stripping non-numeric values)
  • Prevent the form from being saved unless the phone numbers adheres to the above rules

The steps to achieve this are as follows --

First, define the PhoneNumberValidation function that performs all the heavy lifting:

function PhoneNumberValidation(phone,phoneDesc) {
 ret = true;
 var phone1 = Xrm.Page.getAttribute(phone).getValue();
 var phone2 = phone1;
 
 if (phone1 == null)
  return true;
  
 // First trim the phone number
 var stripPhone = phone1.replace(/[^0-9]/g, '');

 if ( stripPhone.length < 10 ) {
  alert("The " + phoneDesc + " you entered must be at 10 digits. Please correct the entry.");
  Xrm.Page.ui.controls.get(phone).setFocus();
  ret = false;
 } else {
  if (stripPhone.length == 10) {
   phone2 = "(" + stripPhone.substring(0,3) + ") " + stripPhone.substring(3,6) + "-" + stripPhone.substring(6,10);
  } else {
   phone2 = stripPhone;
  }
 
 }

 
 Xrm.Page.getAttribute(phone).setValue(phone2);
 return ret;
}

Then for each attribute on the form you wish to format, create an "on change" function as follows:

function Attribute_OnChange() {
PhoneNumberValidation("attributeName", "attributeDescription");
}

Where:
  • attributeName is the name of the attribute the "on change" function is acting on e.g. telephone1
  • attributeDescription is a the friendly name for the attribute (used for the warning error messages)

Finally, reference the "on change" event from the form "on save" event to prevent the form from saving unless the phone number has the correct format. For example, the following will work:
function Form_onsave(executionObj) {

 var val = true;
 if (!Attribute_OnChange()) 
  val = false;
 
 if (!val) {
  executionObj.getEventArgs().preventDefault();
      return false;
 }

}

Don't forget to check the "pass execution context as first parameter" in the "on save" event or otherwise it will not work!


4 comments:

  1. Hello,
    Second code snippet contains items that should not be displayed like
    <span class="Apple-tab-span" style="white-space: pre;"> </span>

    ReplyDelete
  2. Thanks for pointing that out! Corrected.

    ReplyDelete
  3. Nahi Simon Can we do through plugin?

    As part of this we need an windows API which will clean/update the existing phones number with standard format.
    This plug-in and API is for Account, Contact and Lead entities for all the OOB phone number attributes (Mobile/Business/Office/Home).

    Please do reply..

    Awaiting for your response.

    Thanks,
    Karthik.P

    ReplyDelete
  4. This formatting logic can also be applied by using a plugin although the updated format will only show after having saved the form. If you had a plugin then you could run an update to "touch" the records which would result in the plugin being fired thereby updating the records.

    If you do this using jscript then you'll need to run a bulk update to update the system. That wouldn't be a plugin but an update. The options would be:

    1. Tool like Scribe
    2. Database script (if on premise, if you know what you're doing)
    3. Export to import excel feature where you export to excel, apply some excel formulas to update the format and then import to update the values.
    4. Custom API

    ReplyDelete