Before the holidays I wrote about the new keypress events that exist in Dynamics CRM 2016 and how they can be used to provide more rich data validation but also with the release of Dynamics CRM 2016, the keypress events can be utilized to provide even more functionality by way of auto-complete controls. Auto-completion methods were added to the Xrm client-side library which can be used in conjunction with the keypress events to turn any text field into an auto-complete control. This can come in handy if you want to pull data from a third-party source and display it as if it were a native lookup control in CRM.
A great example of this would be turning the native State and Country address fields into an auto-complete using live data from another source. Without further ado, lets jump into some code on how this can be accomplished using the native Country field.
In this example I will be using the geognos free web service to retrieve a list of countries as well as their respective flags.
Note: The free web service is http only so if you are using it in an https-enabled CRM environment then you will have to manually allow access through a browser prompt.
First setup a standard onload event in your JavaScript and register it on your form.
Then make an ajax call to the geognos web service which will retrieve all countries and add them to a list along with a URL to an image of the country flag.
$.ajax({
url: 'http://www.geognos.com/api/en/countries/info/all.jsonp',
dataType: "jsonp",
jsonpCallback: 'callback',
success: function(data) {
for (var country in data.Results) {
countries.push({
id: country,
name: data.Results[country].Name,
icon: "http://www.geognos.com/api/en/countries/flag/" + country + ".png",
fields: [data.Results[country].Name]
});
}
}
});
Next we will write a function using the keypress event for the native address1_country field which will utilize the new auto-completion methods to hide and show a list of countries. The kepress event needs to handle the logic to filter the list of countries based on what the user types so we will compare what the user typed to the name of the country in the list to filter it down and pass the results to the showAutoComplete method. If the data passed into showAutoComplete has an icon property set (a url to an image) then it will display an icon next to the list item which we will utilize to display the country’s flag.
var keyPressFcn = function (ext) {
try {
var resultSet = { results: [] };
var userInput = Xrm.Page.getControl("address1_country").getValue();
var userInputLowerCase = userInput.toLowerCase();
for (i = 0; i < countries.length; i++) {
if (userInputLowerCase === countries[i].name.substring(0,
userInputLowerCase.length).toLowerCase()) {
resultSet.results.push({
id: i,
fields: [countries[i].name],
icon: countries[i].icon
});
}
if (resultSet.results.length >= 10) break;
}
if (resultSet.results.length > 0) {
ext.getEventSource().showAutoComplete(resultSet);
}
else {
ext.getEventSource().hideAutoComplete();
}
} catch (e) {
console.log(e);
}
};
Lastly, we need to register the keypress function we wrote above to the address1_country keypress event
Xrm.Page.getControl("address1_country").addOnKeyPress(keyPressFcn);
Once we add the script to CRM and register the onload function we can now check it out in action!
Note: The user can still type free-form text into the control and by default CRM won’t validate that the user selected something from the list but JavaScript validation could be added to make sure an item from the list was used if necessary for your business.
Here is the complete script for this example: