Skip to main content

Autocomplete Control

An autocomplete control is a user interface element, often used in forms or applications, that provides suggestions or completions for user input as they type. The control predicts the rest of a word or phrase based on the characters entered by the user, offering a list of suggestions that match the input.

This control is commonly used to enhance user experience, reduce errors, and speed up data entry. Using Autocomplete controls, users can benefit from predictive suggestions.

There are basically three steps to create an autocomplete control on the form:

  1. Create a Datasource.
  2. Bind your Datasource with a control.
  3. Set the properties and perform the configurations for the autocomplete control.

Steps to create an autocomplete control on the form to assist users in finding a person in EmpowerID.​

Follow these steps to create an autocomplete control on the form to assist users in finding a person in EmpowerID.

  1. On your Form, add an object of type String.
Workflow Page
Workflow Page

  1. Double-click on it, rename it, and assign any name. In our case, we are naming it FirstName. Workflow Page

  2. Drag and drop FirstName onto the Form Designer. Workflow Page

    • Right-click on the Data Sources section and select Add Data Source.
    • The Add New Data Source dialog box will appear. Keep the first option selected and click Next.
Workflow Page
Workflow Page

  1. Provide a name for your Data Source, e.g., dsPerson. Select Generated as your Data Source Type. From the Component Name, choose PersonSearch and from the Method to Execute, select GetSearch (string textToSearch). Finally, click on the Finish button. Workflow Page

  2. Right-click on the FirstName field and select Edit option.Then go to the DataSources tab and choose your newly created Data Source (dsPerson).

    Workflow Page
    Workflow Page

  3. Navigate to the Control Types tab and select the AutoComplete control. Workflow Page

  4. Go to the Standard Properties tab and set the properties as follows:

    PropertyValue
    Display FieldFriendlyName
    Selected Value PathPersonID
    Item Template NameLeave Empty
    Search Parameter NametextToSearch
    View One Link TypeLeave Empty
    Initial Value DataSourceLeave Empty
    Initial Value DataSource Display FieldLeave Empty

  5. Click OK on the Field Configuration Dialog box.

  6. Save and Publish your Form and restart the Workflow Studio.

  7. Now create a Workflow and drag your Form onto the Workflow Designer pane and Publish your Workflow.

  8. Now publish the Form and the Workflow on the EmpowerID Web.

  9. Reset IIS.

  10. Run your Workflow and see how the Autocomplete Control appears in the UI. Workflow Page

Enhancing the Autocomplete Control​

  1. Right now, it is showing just the Friendly Name of a Person. What if we wanted to show the Login Name along with the Friendly Name of a person. We could do that using the Item Template Name property. Go to your autocomplete control again and edit the properties as below.

    PropertyValue
    Display FieldFriendlyName
    Selected Value PathPersonID
    Item Template NameEidAutoCompletePerson
    Search Parameter NametextToSearch
    View One Link TypeLeave Empty
    Initial Value DataSourceLeave Empty
    Initial Value DataSource Display FieldLeave Empty
Workflow Page
Path for AutoComplete file
  1. Publish your Form from both the Workflow Studio and the EmpowerID Web UI. Run your Workflow and type any name in the Autocomplete Control. The control will now display both the Friendly Name and the Login Name.
Workflow Page
Different templates in AutoComplete File
info

To see where all the templates are present. Go to this file AutoComplete and open it to see all the templates.

File is present on this path: C:\Program Files\TheDotNetFactory\empowerID\web sites\EmpowerID.Web.PortableAreas.Common\Views\Templates

Workflow Page
Workflow Page