AutoComplete is one
of the most desired and the most basic featurefor Microsoft Dynamics365. It not
only enhances customer experience but helps in fast and accurate entry of
records.
Soluzione has developed an Auto-Complete solution that can be plugged
into any Microsoft Dynamics version ranging from Dynamics 365, Dynamics 2016,
2015 and 2013.
Auto Complete can be implemented on
simple text fields as well as for complex and composite fields (e.g. Composite
Address fields).
Let’s walk through using an example:
The example givenbelow is for implementation of “Auto complete feature” in Micosoft Dynamics 365 for simple text field such as Country in Address Details. One may simply type few characters in the field and a list of country names is displayed in sorted manner.
Assume the simple text field on which we want to enable autocomplete
feature is “na_country” and an entity Country Master(na_countrymasters)
contains the master list of countries.
Create a web resource say “AddressDetails.js” which will have 2 methods:
Method 1: LoadAutoComplete
This method is executed at the time of ‘Form Load’ to get the list of
all countries existing in Country Master (na_countrymasters) entity. We are
using Microsoft Dynamics 365 CRM web API to get a list of countries sorted by
name. (How to use web API is another topic and we will go into details later.)
function LoadAutoComplete() {
if (Xrm.Page.getControl(“na_country”) != null) {
Xrm.Page.getControl(“na_country”).setDisabled(true);
}
var clientURL = Xrm.Page.context.getClientUrl();
var oDataPath = clientURL + “/api/data/v8.0/”
var req = new XMLHttpRequest();
req.open(“GET”, encodeURI(oDataPath + “na_countrymasters?
if (Xrm.Page.getControl(“na_country”) != null) {
Xrm.Page.getControl(“na_country”).setDisabled(true);
}
var clientURL = Xrm.Page.context.getClientUrl();
var oDataPath = clientURL + “/api/data/v8.0/”
var req = new XMLHttpRequest();
req.open(“GET”, encodeURI(oDataPath + “na_countrymasters?
$select=na_name,na_countryname&$orderby=na_name”), true);
req.setRequestHeader(“Accept”, “application/json”);
req.setRequestHeader(“Content-Type”, “application/json; charset=utf-8”);
req.setRequestHeader(“OData-MaxVersion”, “4.0”);
req.setRequestHeader(“OData-Version”, “4.0”);
req.onreadystatechange = function () {
if (this.readyState == 4) /* request complete*/ {
req.onreadystatechange = null;
if (this.status == 200) {
var reqResults = JSON.parse(this.response).value;
if (reqResults != null && reqResults.length > 0) {
var countries = [];
for (var i = 0; i < reqResults.length; i++) {
var country = reqResults[i];
countries.push({
id: country.na_countrymasterid,
req.setRequestHeader(“Accept”, “application/json”);
req.setRequestHeader(“Content-Type”, “application/json; charset=utf-8”);
req.setRequestHeader(“OData-MaxVersion”, “4.0”);
req.setRequestHeader(“OData-Version”, “4.0”);
req.onreadystatechange = function () {
if (this.readyState == 4) /* request complete*/ {
req.onreadystatechange = null;
if (this.status == 200) {
var reqResults = JSON.parse(this.response).value;
if (reqResults != null && reqResults.length > 0) {
var countries = [];
for (var i = 0; i < reqResults.length; i++) {
var country = reqResults[i];
countries.push({
id: country.na_countrymasterid,
name: country.na_name,
isocode: country.na_countryname,
fields: [country.na_name, country.na_countryname]
});
}
if (Xrm.Page.getControl(“na_country”) != null) {
Xrm.Page.getControl(“na_country”).setDisabled(false);
isocode: country.na_countryname,
fields: [country.na_name, country.na_countryname]
});
}
if (Xrm.Page.getControl(“na_country”) != null) {
Xrm.Page.getControl(“na_country”).setDisabled(false);
}
autoCompleteCountries(countries);
}
}
else {
var error = JSON.parse(this.response).error;
console.log(error.message);
}
autoCompleteCountries(countries);
}
}
else {
var error = JSON.parse(this.response).error;
console.log(error.message);
}
}
};
req.send();
}
};
req.send();
}
The above method calls the List of countries from Country
Master entity and calls the second method AutoCompleteCountries().
Method 2: Auto Complete Countries
This method works on “key press” event on Country field (The
field on which autocomplete is applied)
function autoCompleteCountries(countries) {
var keyPressFcn = function (ext) {
try {
var userInput = Xrm.Page.getControl(“na_country”).getValue();
var resultSet = {
results: new Array(),
commands: {
id: “sp_commands”,
label: “Learn More”,
action: function () {
results: new Array(),
commands: {
id: “sp_commands”,
label: “Learn More”,
action: function () {
// Any help or other information URL
//window.open(“http://www.microsoft.com/en-us/dynamics/crm-customer-center/create-or-edit-an-account.aspx”);
}
}
};
//window.open(“http://www.microsoft.com/en-us/dynamics/crm-customer-center/create-or-edit-an-account.aspx”);
}
}
};
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, countries[i].isocode]
});
}
if (resultSet.results.length >= 10) break;
}
if (resultSet.results.length > 0) {
ext.getEventSource().showAutoComplete(resultSet);
}
else {
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, countries[i].isocode]
});
}
if (resultSet.results.length >= 10) break;
}
if (resultSet.results.length > 0) {
ext.getEventSource().showAutoComplete(resultSet);
}
else {
ext.getEventSource().hideAutoComplete();
}
} catch (e) {
console.log(e);
}
} catch (e) {
console.log(e);
}
};
};
Xrm.Page.getControl(“na_country”).addOnKeyPress(keyPressFcn);
}
Setting in Microsoft Dynamics 365:
Add the AddressDetails.js as new web resource in CRM.
Add this web resource to the form using
form properties. Go to manage function and set Load Auto Complete function on form Onload event.
Publish the changes in MS Dynamics 365 CRM. Open the form and start
entering letters in Country field. You should get the below autocomplete output.
To Know More visit
http://www.solzit.com/auto-complete-feature-microsoft-dynamics/
or talk to our experts
No comments:
Post a Comment