Mask Phone number, Date fields in CRM

NOTE: THIS IS UNSUPPORTED CRM 2013 CUSTOMIZATION.

For Complete code check https://maskedinputcrm2013.codeplex.com

To provide masking for input fields in CRM form we can use jQuery masked input plugin.

 Using this plugin we can easily add masking for not only phone number, fax, date fields but also we can add masking for like SSN number, driving license number etc.

Also when adding this masking, this plugin is already taking care of inputs validation like phone number should contain only numbers.

 We can add our own formats also using this plugin. For more details about this plugin, Check  http://digitalbush.com/projects/masked-input-plugin/

For CRM implementation

·         Download minified masked input plugin file from https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.min.js

·         Add this JS file to CRM web resources.

·         Create new JavaScript web resource and add following code in that file

var CustomMaskScript = {

    MaskInputField: function (fieldName, format) {       

        var control = Xrm.Page.getControl(fieldName);

        if (control != null && control.getControlType() == 'standard') {

            control.setFocus();

            if (Xrm.Page.getAttribute(fieldName).getAttributeType() == 'datetime') {

                var input = $("#" + fieldName + "_i").find("input");

                if (input != null)

                    input.mask(format);

            } else

                $("#" + fieldName + "_i").mask(format);

        }

    },

};

·         Now add both file in entity form library where you want to use masking

•   Call MaskInputField function on load of Form with attribute name and Format as parameters.

'new_birthdate','99/99/9999'

·         Save and publish customization.

·         And maked input is ready to use

Above example is for manual masking for fields which we can to add masking.

If by default we want to add masking for all phones and date attributes on Form then use following script

var DefaultMask = {

    MASK_date: '99/99/9999',

    MASK_Phone: '(999) 999-9999',

    MaskDatePhoneInput: function () {

        var PageAttributes = Xrm.Page.data.entity.attributes.get();

        var fieldName = '';

        var Format = '';

        for (var i in PageAttributes) {

            var control = PageAttributes[i].controls.get(0);

            fieldName = PageAttributes[i].getName();

            Format = PageAttributes[i].getFormat();

            if (Format == 'phone' || Format == 'date') {

                control.setFocus();

                if (PageAttributes[i].getAttributeType() == 'datetime') {

                    var input = $("#" + fieldName + "_i").find("input");

                    if (input != null)

                        input.mask(ContactDefaultMask.MASK_date);

                } else

                    $("#" + fieldName + "_i").mask(ContactDefaultMask.MASK_Phone);

            }

        }

    },

}

Add this in JS web resources and call function on load.  This will add masking for all phone number and date fields on Form.

Here are some examples of masking 

·         Date

Without Mask:

With Mask

Mask Format:  99/99/9999

·         Phone number

Without Mask:

With Mask

Mask Format:  (999) 999-9999

·         Phone number with Extension

Without Mask:

With Mask

Mask Format:  (999) 999-9999? X99999

·         Social Security Number

Without Mask:

With Mask

Mask Format:  999-99-9999

·         Custom (e.g. Wisconsin Driving license)

Without Mask:

With Mask

Mask Format:  a-9999999999


For Complete code check https://maskedinputcrm2013.codeplex.com