How To add Autocomplete to a Text Field in Dynamics CRM


Scenario:


It might be requested you: when user types texts to a textbox, System helps to user with suggesting some values from couple entities in Dynamics CRM or maybe fetching records from any other resources.

Solution;


It is very simple, just register your code to the key press event for the object and fill the object with suggested values .

There is supported event for MSCRM engine (it has been so long since i do not call MSCRM :) ) calls : addOnKeyPress - when user presses a key over the object, the event is called for given delegated method

please consider performance and load on the network so;

1- do not fetch data from external resources each time user clicks the key - you can wait for the first 3 or 4 letters from the user
2- never fetch all matching records what user types so far, add "top 20 records" to your fetch method 

Implementation:

first of all register the method while loading the form in Dynamics CRM:

<Practice> 
 Create a javascript (.js) for each entity in Dynamics CRM for dedicated client scripting as much as   possible.
</Practice>

<Practice>
method standards could be

form_onLoad(executionContext) {

    var formContext = executionContext.getFormContext(); //to get the formContext

}

form_onSave(executionContext) {

    var formContext = executionContext.getFormContext(); //to get the formContext

}
</Practice>

now let's delegate our method to the event

function form_onLoad(executionContext) {

    var formContext = executionContext.getFormContext(); //to get the formContext

    formContext.getControl("<name of the textbox>").addOnKeyPress(<name of the textbox>_addOnKeyPress);
}


We should create a custom method : <name of the textbox>_addOnKeyPress which takes Execution Context parameter

function <name of the textbox>_addOnKeyPress(executionContext) {

    var formContext = executionContext.getFormContext(); //to get the formContext
    var input = formContext.getControl("<name of the textbox>").getValue();

    var resultSet = null;

    if (input != null && input.length > 3) {
        try {
                    // activate AutoComplete (or AutoFill)
                    resultSet = fetchDataMethodfromOtherSources(param1,param2,....);           
            }
        } catch (exp) {
            alert(exp);
        }
    }

    if (resultSet != null && resultSet.results != null && resultSet.results.length > 0) {
        executionContext.getEventSource().showAutoComplete(resultSet);
    } else {
        executionContext.getEventSource().hideAutoComplete();
    }
}



enjoy...

Comments

  1. Good solution, but as we can see in official documentation on https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/controls
    "The following methods for the Standard control are deprecated in this release: addOnKeyPress, fireOnKeyPress, and removeOnKeyPress." How would you apply your logic withot addOnKey event?

    ReplyDelete
    Replies
    1. Hello,

      thanks for the mesage.

      You are rgiht, Unfortunately, it is deprecated.

      Microsoft addresses similiar functionalitiy to PowerApps Component Framework (PCF) control so please follow my another post regarding exposing HTML events for input element.

      http://www.muhammetatalay.com/2020/07/controller-exposing-html-input-element.html

      You can apply auto-complete through the control that i develop.

      enjoy.

      Delete

Post a Comment

Popular posts from this blog

Complex Query in QueryExpression in Microsoft CRM 2011

Exception caught instantiating TERADATA report server extension SQL Reporting Services

Microsoft Power Apps Portal integration with Dynamics 365 CE On-Premise - Step By Step Guide