CRM Field Masking with JQuery
June 3, 2011 9 Comments
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.
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.
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.
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!
 |
 |
|
| More about Slalom Consulting’s Dallas office. | More about Slalom Consulting’s Customer focus. | |
Subscribe to be emailed about new CRM posts.
About Xavier Vargas
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?
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
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
Is there any way to mask or force street abbreviations rather then suffix?
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
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!
I got the same message.
Did you find a solution?
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