In our previous blog we have seen the new and cool features of MS Dynamics 2016. In this piece, we will take a tour of the New Client Scripting method introduced in Dynamics CRM 2016. The client scripting method offered by this release can be utilized to create a unique user experience and make it more interactive while data is entered into the CRM forms.
Method – getValue
This method was previously available only for attribute collection. Using it, we could get field value after the field was updated, and only if the cursor was unfocused from that field. Now, it is possible to capture the value of field right when users start entering value in the field.
We can use this method as shown below:
Xrm.Page.getControl(field name).getValue();
If you want the user to enter value as per our specific pattern or regular expression, we can use the code mentioned below:
function OnfieldKeyPress() {
var fieldValue = Xrm.Page.getControl(“field name here”).getValue().toString().replace(/[^0-9]/g, “”);
Xrm.Page.getAttribute(“field name here”).setValue(fieldValue);
}
This method will work only if we call this on a Keypress event. So let us try to understand how to call a function on Keypress event for a text field.
Event –Keypress
The following three Keypress methods are added to the 2016 version:
- addOnKeyPress()
This is used to attach a function with a Keypress event:
Xrm.Page.getControl (fieldname).addOnKeyPress(function name);
If we add this statement in function which is called at the loading of the form, then OnFieldKeyPress function will be attached with Keypress event of field.
- removeOnKeyPress()
This is used to remove/detach a function that is attached with a Keypress event:
Xrm.Page.getControl(fieldname).removeOnKeyPress(function name);
- fireOnKeyPress()
This is used to call Keypress event handler for text or a number field.
Xrm.Page.getControl(field name).fireOnKeyPress();
So addOnKeyPress and removeOnKeyPress basically attach or delete the already attached function with Keypress event while fireOnKeyPress enables Keypress event for text or number fields.
Example:
New Key Press Method on telephone number field
First we will setup a function on the new addOnKeyPress event for the main telephone field.
Xrm.Page.getControl(‘telephone1’).addOnKeyPress(function() { });
Then we will retrieve the value from the main telephone field to get the keys that the user had entered.
var userInput = Xrm.Page.getControl(‘telephone1’).getValue();
Then we will build a regex to replace any of the inputted keys that are not “(“, “)”, “-“, or a number.
userInput = userInput.replace(/[^\d-()]+/g, ”);
Lastly, we will replace the main telephone value with the new clean version of the user’s input
Xrm.Page.getAttribute(‘telephone1’).setValue(userInput);
It’s just that easy! Now if a user presses an invalid character in the main telephone field, it will automatically delete the character so that the field will not be saved with invalid data.
JavaScript Code
SetKeyPressMethodOnTelephoneNumber = function () {
Xrm.Page.getControl(‘telephone1’).addOnKeyPress(function () {
var userInput = Xrm.Page.getControl(‘telephone1’).getValue();
userInput = userInput.replace(/[^\d-()]+/g, ”);
Xrm.Page.getAttribute(‘telephone1’).setValue(userInput);
});
}
Note: – Call these Methods on Form load Event
So, are you satisfied with the workaround given? Do share us your ideas.
To know more about Suyati’s expertise in Microsoft Dynamics CRM, please write to us at services@suyati.com.
About the author:
Naveen Kumar is currently working as a Software Developer at Suyati Technologies. He has around 3 years of experience in Microsoft .NET technologies and owns a vast and dedicated experience in Microsoft Dynamics CRM development. Naveen’s MS Dynamics CRM specialization involves CRM2011, CRM 2013, CRM 2015, and CRM 2016 along with tremendous expertise in C#, HTML, CSS, jQuery, and JavaScript. He likes reading books, listening to music, cooking, playing volleyball and basketball. Besides these, Naveen loves to paint when is free.
