Looking for PowerObjects? Don’t worry, you’re in the right place! We’ve been part of HCL for several years, and we’ve now taken the final step in our acquisition journey: moving our website to the HCL domain. Nothing else is changing – we are still fanatically focused on Microsoft Business Applications!

HCLTech Microsoft Business Applications Practice Blog

for Dynamics 365, Power Platform and the rest of the Microsoft technology stack


Formatting a Phone Field in CRM 2013

Post Author: HCLTech | December 9th, 2013

Microsoft Dynamics CRM 2013 has the capability of creating a phone number field. This is a great feature as it allows for click-to-call functionality directly from the Dynamics CRM record.

However, you may wish to have the display of the phone number formatted as well. Formatting the phone number would provide additional benefits, as it would allow the phone data to be displayed in a uniform fashion. For example, all phone numbers can be displayed in the format (XXX) XXX – XXXX.

In order to accomplish this, one must add a JavaScript code to the phone field as an OnChange event.

Steps:

1. Create a web resource (FormatPhoneNumber). To do this, click Settings > Customizations > Web Resources.

2. Add the JavaScript code to the web resource. To format phone number filed as (XXX) XXX – XXXX), use the following code:

function formatPhoneNumber(context) {
    var phoneNumber = context.getEventSource();

    // Verify that the field is valid
    if (typeof (phoneNumber) != "undefined" && phoneNumber != null) {
        if (phoneNumber.getValue() != null) {
            // Remove any special characters
            var sTmp = phoneNumber.getValue().replace(/[^0-9,A-Z,a-z]/g, "");

            // Translate any letters to the equivalent phone number, if method is included
            try {
                if (sTmp.length <= 10) {
                    sTmp = TranslateMask(sTmp);
                }
                else {
                    sTmp = TranslateMask(sTmp.substr(0, 10)) + sTmp.substr(10, sTmp.length);
                }
            }
            catch (e) {
            }

            // If the number is a length we expect and support,
            // format the translated number
            switch (sTmp.length) {
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                case 8:
                case 9:
                    break;
                case 7:
                    phoneNumber.setValue(sTmp.substr(0, 3) + "-" + sTmp.substr(3, 4));
                    break;
                case 10:
                    phoneNumber.setValue("(" + sTmp.substr(0, 3) + ") " + sTmp.substr(3, 3) + "-" + sTmp.substr(6, 4));
                    break;
                default:
                    phoneNumber.setValue("(" + sTmp.substr(0, 3) + ") " + sTmp.substr(3, 3) + "-" + sTmp.substr(6, 4) + " " + sTmp.substr(10, sTmp.length));
                    break;
            }
        }
    }
}

/// 
/// TranslateMask() will step through each character of an
/// input string and pass that character to the
/// TranslatePhoneLetter() helper method
/// 
/// Input string to translate
function TranslateMask( s )
{
  var ret = "";

  //loop through each char, and pass it to the translation method
  for (var i=0; i
/// TranslatePhoneLetter() takes a character and returns the
/// equivalent phone number digit if it is alphanumeric
/// 
/// Character to translate
function TranslatePhoneLetter( s )
{
 var sTmp = s.toUpperCase();
 var ret = s;

 switch( sTmp )
 {
 case "A":
 case "B":
 case "C":
  ret = 2;
  break;
 case "D":
 case "E":
 case "F":
  ret = 3;
  break;
 case "G":
 case "H":
 case "I":
  ret = 4;
  break;
 case "J":
 case "K":
 case "L":
  ret = 5;
  break;
 case "M":
 case "N":
 case "O":
  ret = 6;
  break;
 case "P":
 case "Q":
 case "R":
 case "S":
  ret = 7;
  break;
 case "T":
 case "U":
 case "V":
  ret = 8;
  break;
 case "W":
 case "X":
 case "Y":
 case "Z":
  ret = 9;
  break;
 default:
  ret = s;
  break;
 }

 return ret;
}

3. Add the web resource to the form library of the phone number field and set up the OnChange event.

formatting a phone field in CRM 2013

Formatting a phone field in CRM 2013 additional img

4. Save and publish the customizations.

Result:

formatting a phone field in CRM 2013

Formatting a phone field in CRM 2013 with Java Script code is easy if you follow these steps!

If you need additional assistance with creating JavaScript or with any Dynamics CRM related topics, check out our other blogs.

Happy CRM'ing!

Joe CRM
By Joe D365
Joe D365 is a Microsoft Dynamics 365 superhero who runs on pure Dynamics adrenaline. As the face of PowerObjects, Joe D365’s mission is to reveal innovative ways to use Dynamics 365 and bring the application to more businesses and organizations around the world.

23 comments on “Formatting a Phone Field in CRM 2013”

  2. I tried this cool script but got an error.

    There was an error with this field's customized event.

    Field:phoneNumber

    Event:onchange

    Error:Unable to get property 'getEventSource' of undefine or null reference

  3. I figured it out. Checked "Pass execution context as first parameter" in Handler Properties.

  4. I got to the last step to add the event handler and when I click OK to add the function nothing shows up in the event handler area. It stays blank when I choose to add something. I copied everything verbatim even with the function names and its still not working. Anyone have any idea whats going on?

    1. Hi - Try to past a screen shot of what you are seeing. A couple items to try would be to do a publish all, if using IE check that your crm url is in list of trusted or intranet zone.

  5. This is awesome thanks a lot, I had JScript which worked for CRM 2011 but not for CRM 2015 but your script does...

    WELL DONE!!!

      1. Thanks Joe, for the reply, I tried those steps, no errors till I publish, then I get this error.
        Field Security
        Profile Error
        You must have sufficient permissions for a secured field before can change its field level security.
        My role is System Customizer, what privileges, will I have to change?

        1. Hi - as a test, try with the administrator role. If it works, then we know for sure it is a permissions issue and not something else.

          2. oh - so you only get the error when publishing? make sure you have read/write to web resources.

  7. Thanks for this. Do you have any thoughts or suggestions on handling phone # extensions in CRM? Is it best to manage extensions in a separate field in order to still utilize the click-to-call functionality? Any help would be greatly appreciated.

    1. Hi Matt - We'd recommend storing the extension in a new field and NOT part of the phone number if click to dial usage is planned. Most click to dial addons will simply pass the whole phone number as it is in crm. Perhaps it will strip out non-digit characters, but everything is passed. Our Power Phone addon behaves this way too.

      1. I figured I would probably need to pull out extensions as it's own field. Thanks for confirming and for the quick reply!

    1. Hi MC - We have done various variations of js to format international numbers. If you know js, take a look at http://www.phoneformat.com/ - you can download their javascript. Then with a bit of work you can pretty much do anything. We have had clients that use it to real time display country code, etc.....

  9. Hi Joe, do you know whether there is a code out there that would allow free formatting to allow free form text after the initial (xxx) yyy-zzzz.

  10. Hi Joe, sorry to bring up an old post but I have been trying to get his solved in my CRM environment. Will this for on the Web Front end forms, or does it have to be on the back end? I have added the code listed her to "onChange," I do not get any errors, but it does not execute the JS and format the number(s).

    Any help/input would be greatly appreciated!

  11. Does this work in Dynamics 365 on Prem? I am getting an error when entering the phone number in the phone field. FormatPhoneNumber is undefined at (Eval code:1:1)

    1. @markshryock:disqus Yes it should. JS is case sensitive. The script function starts with a lowercase, and you've typed in an upper case "F". If you are still having issues, I recommend asking a question to either CRMUG, StackOverflow, Microsoft Forms, or signing up for PO support, since troubleshooting via a blog forum post is not very easy.

PowerObjects Recommends