Introduction:
On Dec 1st Microsoft released another great version of Dynamics CRM – CRM 2016 that has loads of new features and not to forget developer enhancements too.
One of the developer enhancements added to Dynamics CRM 2016 is “Auto Complete” which allows us to provide auto complete feature for the single line text fields.
Configuring a control for Auto-Complete
Let us take an example to provide an auto complete list of cities for the City field on an entity.
function listOfCities() {
// List of sample cities names to suggest
citites = [
{ name: 'Toronto', country: 'Canada', code: '001',a:'0' },
{ name: 'Aarhus', country: 'Denmark', code: '002' },
{ name: 'Cairo', country: 'Egypt', code: '003' },
{ name: 'Alexandria', country: 'Egypt', code: '004' },
{ name: 'Bavaria', country: 'Germany', code: '005' },
{ name: 'Baden-Württemberg', country: 'Germany', code: '006' },
{ name: 'Mumbai', country: 'India', code: '007' },
{ name: 'New Delhi', country: 'India', code: '008' },
{ name: 'Nashik', country: 'india', code: '009' },
{ name: 'Hai Phong', country: 'Vietnam', code: '0010' },
{ name: 'Ho Chi Minh', country: 'Vietnam', code: '0011' },
{ name: 'Mississauga', country: 'Canada', code: '0012' },
];
var keyPressFcn = function (ext) {
try {
var userInput = Xrm.Page.getControl("address1_city").getValue();
resultSet = {
results: new Array(),
commands: {
id: "city",
icon: "../WebResources/new_/Images/add.png",
//This will add the Link at the bottom of the auto complete search result
label: "New",
action: function () {
//specify the action that you want to perform on click of New Link
window.open("https://crmtrial12.crm5.dynamics.com");
}
}
};
var userInputLowerCase = userInput.toLowerCase();
for (i = 0; i < citites.length; i++) {
if (userInputLowerCase === citites[i].name.substring(0, userInputLowerCase.length).toLowerCase()) {
resultSet.results.push({
id: i,
fields: [citites[i].name, citites[i].country, citites[i].code,],
icon: "../WebResources/new_/Images/add.png"
});
}
if (resultSet.results.length >= 10) break;
}
if (resultSet.results.length > 0) {
ext.getEventSource().showAutoComplete(resultSet);
} else {
ext.getEventSource().hideAutoComplete();
}
} catch (e) {
console.log(e);
}
};
Xrm.Page.getControl("address1_city").addOnKeyPress(keyPressFcn);
}In the above source code, we have used three newly added functions in CRM 2016.
- showAutoComplete()
- hideAutoComplete()
- addOnKeyPress()
1. showAutoComplete()
This function is use to show the drop down list based on the string entered by the user in the text box. In our example, if you type “A” in the text box then it will display all the cities starting with “A” as shown below.
2. hideAutoComplete()
This function is use to hide the hide the drop down list. Or else you can simply click anywhere on the form then also this drop down list will get hide.
3. addOnKeyPress()
This function is called whenever we type any character in the text box.
Xrm.Page.getControl(“address1_city”).addOnKeyPress(keyPressFcn);
So to make this Auto complete functionality work, we need to call the function on the form load as shown below. In this example, we have called “ListOfCities” function on form load as shown below.
Conclusion:
With auto-complete feature becoming a part of our daily use on the web, this now helps us provide a quick lookup to possible allowed values, without requiring the field to be converted into a Lookup.
Maplytics InfoCentre – Bing Maps Integration for Microsoft Dynamics CRM.
There's much more, for more Dynamics CRM Tips and Tricks head on to Inogic Blog. If you have any questions on Dynamics CRM or need any help in implementation, customization, upgradation of Dynamics CRM or are looking to get more out of your CRM, feel free to reach us at crm@inogic.com today!
The post Design Auto Complete Text controls in Dynamics CRM 2016 appeared first on Inogic Blog.