Auto Complete feature in CRM 2016

Posted On February 16, 2016 by Krishna Bhanushali Posted in

Introduction

In this blog we are going to discuss about the new Auto completion feature of CRM 2016. First, a disclaimer – the term ‘autocomplete’ might be a bit misleading since the field is not automatically completed but instead you can select the suggested item from the list.

Requirement

To use the Country text field on the address section of the Account and Contact record to enter the Country but restricting users from entering any random values. Instead, the users need to enter country codes only. The goal was to accomplish this without using lookup field on the form.

For the text fields, the auto complete feature was not available in previous CRM versions. Hence instead of using text fields, we used to have either lookup fields (for many items) or option set fields (for limited set of options).

Solution

In CRM 2016, new methods are introduced for text fields. Using these methods, we can implement auto complete feature for text fields, where users can see the suggestions and either select any option or type its own value.

1. showAutoComplete
This method allows us to show list of possible values as dropdown to add auto complete feature to text fields. As soon as we select any item under the list, it will be populated in target text field and OnChange event of that field will fire.

Use this to show up to 10 matching strings in a drop- down list as users press keys to type character in a specific text field.

Also add a custom command with an icon at the bottom of the drop down list.

The above method can be used as follows:

Xrm.Page.getControl(field name).showAutoComplete(object);

This method takes object as parameter which includes results and command.

Object can be defined like below:

var resultset = { 
   results: [{ 
         id: <value1>, 
         icon: <url>, 
         fields: [<fieldValue1>]}], 
   commands:{ 
         id: <value>, 
         icon: <url>, 
         label: <value>, 
         action: <function reference> 
         } 
 }

Here, the result represents an array of possible values that we want to show under the drop down on keypress. Under the results, we can define id, for individual array item, icon to show particular icon for array items and the field where we pass values.

Commands is used to define additional action on the drop down, for example opening any additional page by providing a link.

2. hideAutoComplete
This method is used to hide the auto complete drop down list that is implemented using showAutoComplete method.

No need to explicitly use this method because, by default, the drop down list hides automatically if the user clicks elsewhere or if a new drop down list is displayed.

The above method can be used as follows:

Xrm.Page.getControl(field name).hideAutoComplete()

Note: Both of above methods only works with Web and Outlook client.

Steps for creating an auto complete feature on single line text field are as follows:

Save and publish script event OnLoad of the form.
When user is going to type some character in auto complete text field, drop down list will display the list of records present. It will show only the first 10 results which are suggested.

When user types some character in auto complete text field, the list of results matching the characters is shown in the drop-down.

Advantages:

This feature is useful when we have a master list of data from which users can select the value, at the same time users can also put data if they don’t find value in the master list.

Lookup approach was restricting users from selecting data only from master list and was not allowing users to put their own values.

One of the best example to this is list of Cities. Users can either select city from master list or if city is not available, then they can put their own value.