Using New Scripting Methods in CRM 2016: Part 2

In our earlier article, we discussed getValue and KeyPress methods introduced in CRM 2016. In this post we are going to discuss AutoComplete methods. The following are the two methods added to implement auto complete feature to text fields:

• ShowAutoComplete
• HideAutoComplete

ShowAutoComplete

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

We can use this method like the following,

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

This method takes object as a parameter which include results and commands. We can define object like the following,

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

Here result represents array of possible values that we want to show under drop down on keypress. Under the results, we can define id, for individual array item, icon to show particular icon for array items and 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.

HideAutoComplete

This method is used to hide the auto complete drop down list that is implemented using showAutoComplete method. We can use it like the following,

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

Note:

Both of above methods only works with Web and Outlook client. Let’s take an example we want to implement autocomplete feature for salutation field in contact entity and want to provide the following possible options for it,

{ ‘Mr.’,’Miss’,’Ms’, ‘Dr.’,’Prof.’,’Mrs.’}

We can use the following code to implement our requirement,

function SalutationAutoComplete() {
  //defind possible salutation
  salutations = [
  { name: 'Mr.'},
  { name: 'Miss'},
  { name: 'Ms'},
  { name: 'Dr.'},
  { name: 'Prof.'},
  { name: 'Mrs.'}
   ];
var OnSalutationkeyPress = function(fld)
{
        var salutationtxt = Xrm.Page.getControl("salutation").getValue();
        resultSet =
            {
            results: new Array(),
            commands:
                {
                id: "salutationcmd",
                label: "Search in Google",
                action: function() {
                    window.open("http://google.com"); //dummy url demo
                }
            }
        };
        var salutationtxtLowerCase = salutationtxt.toLowerCase();
        for (i = 0; i < salutations.length; i++)
         {
            if (salutationtxtLowerCase === salutations[i].name.substring(0, salutationtxtLowerCase.length).toLowerCase())
               {
                resultSet.results.push(
                {
                    id: i,
                    fields: [salutations[i].name]
                });
            }
            if (resultSet.results.length >= 10) break;
        }

        if (resultSet.results.length > 0) {
            fld.getEventSource().showAutoComplete(resultSet);
        } else {
            fld.getEventSource().hideAutoComplete();
        }
    };

    Xrm.Page.getControl("salutation").addOnKeyPress(OnSalutationkeyPress);
}

To use above code we can create a JavaScript web resource and paste the above code under text editor,

After that we need to add our web resource to contact entity form and need to call SalutationAutoComplete on contact form OnLoad like the following,

 

Now after publishing our changes we can test our code by creating or modifying any existing record. As soon as we will type first character, we will see auto complete dropdown like the following,

 

Stay tuned for more Dynamics CRM Updates.