| Status | ||||
|---|---|---|---|---|
|
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:
Create a Datasource.
Bind your Datasource with a control.
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.
On your Form Add an object of type String.
Double-click on it, rename it, and assign any name. In our case, I am naming it FirstName.
Drag and drop FirstName onto the Form Designer
Right-click on the Data Sources, select the Add Data Source option. The Add New Data Source dialog box will appear. Keep the first option selected and click on the Next button.
Give your Data Source a name, for example, 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.
Right-click on the FirstName field and select the Edit option. Then, go to the DataSources tab and choose your newly created datasource (dsPerson).
Navigate to the Control Types tab and select the AutoComplete control.
Now, go to the Standard Properties tab and set the properties as follows:
Display Field: FriendlyName
Selected Value Path: PersonID
Item Template Name:
Search Parameter Name: textToSearch
View One Link Type:
Initial Value DataSource:
Initial Value DataSource Display Field:
Click Ok on the Field Configuration Dialog box.
Save and Publish your Form and restart the Workflow Studio.
Now create a Workflow and drag your form onto the Workflow Designer pane and publish your Workflow.
Now publish the Form and the Workflow on the EmpowerID Web.
Reset the IIS
Run your workflow and see how autocomplete control appears in the UI.
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.
Display Field: FriendlyName
Selected Value Path: PersonID
Item Template Name: EidAutoCompletePerson
Search Parameter Name: textToSearch
View One Link Type:
Initial Value DataSource:
Initial Value DataSource Display Field:
Publish your Form both from the Workflow Studio and in the EmpowerID web UI. Run your workflow and type any name in autocomplete control it will show you the friendly name along with the login name.
| 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 |
