Monday, April 18, 2011

Adding custom JavaScript in CRM 2011

Hello Gang,

In this post I want to cover adding JavaScript phone number formatting to a CRM form.  We'll go through adding the library as a web resources and attaching the function to a form attribute.

The first thing that we need to do is create the web resources:

  • Open the customizations tool in crm (opens in new windows)
  • Find the web resources node and open it
  • Click new in the toolbar.  You'll see the below screen pop up:
  •  Name the library, set the desplay name and description if needed.  Set the type to Script (JScript) and the Language to 'English'.  Click the 'Text Editor' button and paste in the following JavaScript:
function DC_FormatPhoneNumber(e) {
    /*Figure out what attribute called this*/
    if(!e) {e = window.event;}
    var element = e.srcElement;
    var value = Xrm.Page.data.entity.attributes.get(element.id).getValue(); 

    /*remove the non alpha characters*/
    value = value.replace(/[^0-9]/gi, "");


    if(value.length == 10) {
        var re = /^(\d{3})(\d{3})(\d{4})$/
        if(re.test(value) == true)
        {
            value = "("+RegExp.$1 + ") " + RegExp.$2 + "-" + RegExp.$3;
        }
    }else if(value.length == 11) {
        var re = /^(\d{1})(\d{3})(\d{3})(\d{4})$/
        if(re.test(value) == true)
        {
            value = RegExp.$1+" ("+RegExp.$2 + ") " + RegExp.$3 + "-" + RegExp.$4;
        }
    }else if(value.length == 7) {
        var re = /^(\d{3})(\d{4})$/
        if(re.test(value) == true)
        {
            value =  RegExp.$1 + "-" + RegExp.$2;
        }
    }

    Xrm.Page.data.entity.attributes.get(element.id).setValue(value);

}
  • Here's a screen shot of the text editor:
  • Now click 'Ok' and save the web resource.  Click publish after the save is complete
  • We are now ready to reference the newly created web resource from a CRM form.  It this case we'll use the account object.  Open the account object inside of the customizations tool:
  • Double click on the 'main form' line and open up the main form for editing.
  • At the top of the form there is a button labeled 'Form Properties.'  Click on this button.  The below window will open:
  •  We need to add the newly created web resource.  Click the first 'add' button in the 'Manage libraries that will be available in the form' section.  The below window will open: 

  • Select the web resource that you created and click 'OK'.  Back on the Form properties screen set the 'Control' field to 'Main Phone' and the 'Event' to 'OnChange.'  Now click the 'Add' button

  • This will bring up the below screen.  In the 'Library' field set the picklist to the web resource name.  In the Function field set the value to 'DC_FormatPhoneNumber' or what ever function you'd like to call.  

  • Click 'Ok.'  You can now save the form and publish it.  Phone numbers will be formated for the 'Main Phone' attribute.
Cheers and happy coding...

2 comments:

  1. Hey Caleb - This is pretty darn cool. Very slick, and a handy way to handle commonly used javascript. We will be rolling out CRM 2011 soon; I can see a lot of benefits using this approach. Hope all is well with you brother!

    Dave Batterberry

    ReplyDelete
  2. Caleb,

    Real nice! Helped me (novice JScripter) get the job done fast and easy. Hope I can return the favor someday!

    Mike Kirke

    ReplyDelete