CRM Field Masking with JQuery

Slalom Consultant Xavier Vargas

Slalom Consultant Xavier Vargas has worked with Enterprise CRM customers in numerous verticals. Based in Dallas, He has also delivered training engagements as an MCT (Microsoft Certified Trainer).

It’s always a good thing to make the user experience as nice as possible. One thing missing from CRM is the ability to mask fields. You’ve probably seen this online on sites that ask for your phone number or social security number where the text box already contains the hyphens in the necessary spots.  This clues the user in as to what format you’re expecting from them and leads to cleaner data.

Recently I had a client that needed all their zip codes to be entered along with the carrier code, which is the 4 number suffix at the end of a zip code. I figured this would be a great opportunity to implement some field masking.

Using a JQuery masking plugin written by Josh Bush (which he has also posted as a GitHub project) I was able to add a single line function to define my masking. To do the same, download this file and upload it to your CRM system as a web resource. Disclaimer: neither I nor Slalom Consulting has any relationship with Mr. Bush or his code—before using it please examine and evaluate the code yourself to determine whether it is suitable for your use, and use at your own risk.

Next, jump onto the form that you want to add a field mask to and add the JQuery and JQuery Mask library.

CRM field masking image 3

You’ll also notice that I have my own Global javascript file in the list.  This file contains a reference to a Mask function that will call the JQuery Mask plugin. You can choose to register each field mask function call individually or you can place them all on a single function. I’ve shown both examples below.

function Mask(field, format)
{
  $("#"+field).mask(format);
}

function maskFields()
{
  Mask("address1_postalcode", "99999-9999");
  Mask("telephone1", "(999) 999-9999");
  Mask("telephone2", "(999) 999-9999");
  Mask("fax", "(999) 999-9999");
}

The next step is to define an OnLoad function call. We’ll be calling the Mask function above and passing it in the schema name of the field and the mask value we want applied.

CRM field masking image 4

You’ll also need to register one more function call on the OnSave.  The reason for this is that the JQuery plugin doesn’t save the value to the CRM form.  We need to take care of this.  We do this by comparing the value in the html to the value on the field.  If they’re different, then this means the user changed the field.  Insert the following into your global and register it in the OnSave.

function formatFields()
{
  formatField("address1_postalcode");
  formatField("fax");
  formatField("telephone1");
  formatField("telephone2");
}

function formatField(fieldName)
{
  if(Xrm.Page.getAttribute(fieldName).getValue() != $("#"+fieldName).val())
  Xrm.Page.getAttribute(fieldName).setValue($("#"+fieldName).val());
}

And that’s all there is to it. Here are the results.

CRM field masking image 1

CRM field masking image 2

The JQuery plugin allows us to define all sorts of field masks and you can add dynamic logic to change the mask based on the country. Happy CRMing!

Slalom Consulting's Dallas Office Slalom Consulting's Customer focus page
More about Slalom Consulting’s Dallas office. More about Slalom Consulting’s Customer focus.

subscribe by emailSubscribe to be emailed about new CRM posts.

About Xavier Vargas
Slalom Consultant Xavier Vargas has worked with Enterprise CRM customers in numerous verticals. Based in Dallas, He has also delivered training engagements as an MCT (Microsoft Certified Trainer).

23 Responses to CRM Field Masking with JQuery

  1. Mike Karls says:

    Hi Xavier,

    Great piece of code. I used it to do phone formatting for international phone numbers based on the Country selected, prepoluating with the call out number and the country code.

    One issue I am running into is that certain countries can have varying lengths for their phone numbers and if, for example, I made the phone number allow for 10 digits and I only type in 9, it does not save. Would you be able to provide me with assistance on how to have the digits store in an example like this?

    • Xavier Vargas says:

      Mike,
      Take a look at examples on the jquery plugin page: http://digitalbush.com/projects/masked-input-plugin/

      Under the demo tab you’ll see an example that shows how to capture a phone number with or without an extension. Essentially, you use the “?” wildcard that makes entry of the subsequent characters optional. To capture both 9 and 10 digit numbers you might do something similar to:

      +999-999-999?9

      Try playing around with this wildcard to get the formatting you’re looking for.

      -Xavier

  2. Stefano Guidi says:

    Hi Xavier,
    …great post. Only a question: how i can capture the “onchange” event.
    i apologize for my english
    Steve

    • Steve,

      Unfortunately, this isn’t possibly. Because of the fact that the jquery plugin is spoofing the mask over the textbox, the onchange doesn’t actually happen. What you can do, however, is a comparison on the onSave event to check if the value of the text field is different from what the plugin field is showing:

      if(Xrm.Page.getAttribute(fieldName).getValue() != $(“#”+fieldName).val())

      In this manner you can execute your onChange events before the form saves. If you’re so bold, you may be able to hack around with the plugin and inject an onchange event somehow.

      -Xavier

  3. Hammy says:

    Is there any way to mask or force street abbreviations rather then suffix?

  4. arunes says:

    Hi Xavier, you missed one point. If masked fields are required, setting values on onsave method will not work properly, because crm form validates fields before onsave method.

    You can change Mask function to workaround this;
    function Mask(field, format) {
    $(“#” + field).mask(format).change(function () {
    Xrm.Page.getAttribute(field).setValue($(this).val());
    });
    }

    If you have better solution, please share..

    arunes

  5. Leandro says:

    Hi Xavier,

    I have a problem.
    I’m receiving that message:
    The value of the property ‘$’ is null or undefined, not a Function object

    I hope you can help me!

    • Diego Santos says:

      I got the same message.

      Did you find a solution?

      • Leandro says:

        Yes,
        I added the library of JQuery in Web Resource and then made reference to the properties page.
        Another option is copy the content of jquery1.4.1.min.js and add to your archive of scripts

  6. Tom says:

    I tried to use this in the lastest crm, and I get Object doesn’t support property or method mask , any suggestions? I have the 1,4.1 library downloaded and at the top, then mask, then my local function. The activities tracking javascript I left at the top.

  7. Sharath says:

    Thanks. It’s worked for ssn mask.

  8. Ram says:

    Same Code is not working for CRM 2013 after upgrade. Any suggestions

  9. Masini says:

    It’s not working because the input field is created on execution time.

    • Ram says:

      Any Workaround for that ?

      • Masini says:

        I solved this by putting an event “onClick” in that shows “–” to edit InLine for him to apply the mask by clicking. Works well because the is created at runtime.

        Not the best way to do, but it is how it has worked.

      • fsmasini says:

        In the example:

        $(“#address1_postalcode .ms-crm-Inline-Value”).on(“click”, function () {
        Mask(“address1_postalcode”, “99999-9999″);
        });

        It’s return the tag to add onClick.

  10. RP says:

    I’m having issues getting this to work with CRM 2013. This is the onload code I’m using:

    function Mask(field, format)
    {
    $(“#”+field).mask(format);
    }

    function TestMask ()
    {
    Mask(“fieldname”,”99-9999″);
    }

    function maskDUNS ()
    {
    crmForm.all.fieldname.attachEvent(“onclick”, TestMask);
    }

    Any suggestions?

    • Masini says:

      A very simple way to solve it using Xrm.Page.getControl(“fieldname”).setFocus(true); statement. Before calling the function that applies the mask.

      Thus, it will create the input to receive the data that the user will fill.

      • Salman says:

        I have tried both of your options mentioned here, masking applied on the field but it doesn’t allow user to input in these fields. user have administrator rights. Please Help

  11. Alexander says:

    Hello, I’m using crm 2011, and I made everything said in this post, but I get the error:
    Object doesn’t support property or method mask.
    Any sugestion???
    Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 130 other followers

%d bloggers like this: