KeyPress Methods in MS CRM 2016

In MS CRM 2016, now we can add KeyPress methods for text or number fields. 
KeyPress Events will help for validation of data or for formatting fields. 

With KeyPress methods you can easily restrict any text attribute to accept only numbers or only alphabets or format phone numbers. 

There are three KeyPress methods 

• addOnKeyPress - using this method you can add event handler function, which will be called when keyPressed in text or number field. 
• removeOnKeyPress - removes event handler for text or number field which added using addOnKeyPress. 
• fireOnKeyPress - you can manually fire an event handler you created for text or number field. 

Here are some examples 

1. Format Phone number

  

contactScript =

{

    onLoadEvents: function () {

        Xrm.Page.getControl('telephone1').addOnKeyPress(contactScript.formattPhoneNumber);

    },

    formattPhoneNumber: function () {

        var phoneNo = Xrm.Page.getControl("telephone1").getValue();

        if (phoneNo.length == 10) {

            var formattedPhone = phoneNo.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

            Xrm.Page.getAttribute('telephone1').setValue(formattedPhone);

        }

    },

};

Call contactScript.onLoadEvents on Form Load, Once number started entering into phone number(telephone1) attribute,  formattPhoneNumber is triggering , once phone number length reaches 10, it will format phone number to 123-456-0010 format. For format phone number you can use any other regular expression. 

2. Restrict only numbers

In above example (format Phone number), user will able to enter alphabets also, but mostly phone number contains only numbers. so to restrict only numbers you can change formattPhoneNumber function as 

formattPhoneNumber: function () {      

        var phoneNo = Xrm.Page.getControl("telephone1").getValue();

        phoneNo = phoneNo.replace(/\D/g, '');

        Xrm.Page.getAttribute('telephone1').setValue(phoneNo);

        if (phoneNo.length == 10) {

            var formattedPhone = phoneNo.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

            Xrm.Page.getAttribute('telephone1').setValue(formattedPhone);

        }

    },

3. Restrict only Alphabets

contactScript =

{

    onLoadEvents: function () {

          Xrm.Page.getControl('jobtitle').addOnKeyPress(contactScript.OnlyAlphabets);

      

    },

    OnlyAlphabets: function () {

        var firstName = Xrm.Page.getControl("jobtitle").getValue();

        firstName = firstName.replace(/[^a-z]/gi, '');

        Xrm.Page.getAttribute('jobtitle').setValue(firstName);

    }

};

4. Suggest Accounts name based on Existing leads 

This is autocomplete example, which will show lead names when user enters at least 3 characters in account name. In this example retrieving data from lead entity synchronously, and retrieving only 10 leads at a time.

Here is complete code

var AccountScript = {

    onLoadEvents: function () {

        Xrm.Page.getControl("name").addOnKeyPress(AccountScript.keyPressFcn);

    },

    keyPressFcn: function (evt) {

        try {

            var userInput = Xrm.Page.getControl("name").getValue();

            /*Search in Lead will be started when user enters atleast 3 characters*/

            if (userInput.length >= 3) {

                resultSet = {

                    results: new Array(),

                };

                var userInputLowerCase = userInput.toLowerCase();

                /*Retrieve Leads whose full name begins with name entered by user.

                Retrieving only 10 Leads and autocomplete will be shown when user enters minimum 3 characters. */

                var req = new XMLHttpRequest();

                req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.0/leads?$select=fullname&$filter=startswith(fullname,'" + userInputLowerCase + "')&$orderby=fullname asc", false);

                req.setRequestHeader("OData-MaxVersion", "4.0");

                req.setRequestHeader("OData-Version", "4.0");

                req.setRequestHeader("Accept", "application/json");

                req.setRequestHeader("Content-Type", "application/json; charset=utf-8");

                req.setRequestHeader("Prefer", "odata.maxpagesize=25");

                req.onreadystatechange = function () {

                    if (this.readyState === 4) {

                        req.onreadystatechange = null;

                        if (this.status === 200) {

                            var leadresults = JSON.parse(this.response);

                            for (var i = 0; i < leadresults.value.length; i++) {

                                var fullname = leadresults.value[i]["fullname"];

                                /*Add found lead in array which will be shown in autocomplete window*/

                                resultSet.results.push({

                                    id: i,

                                    fields: [fullname]

                                });

                            }

                        }

                        else {

                            alert(this.statusText);

                        }

                    }

                };

                req.send();

               

                /*If at least one record found then only show autocomplete window.*/

                if (resultSet.results.length > 0) {

                    evt.getEventSource().showAutoComplete(resultSet);

                } else {

                    evt.getEventSource().hideAutoComplete();

                }

            }

        } catch (e) {

          

            alert(this.statusText);

        }

    }

};

call  AccountScript.onLoadEvents function on Account form load event.