Auto Complete is a complex input control which comprises the Picker and the Textbox control. It displays a list of possible text values similar to the text transform app users type.
In this article, you will learn how you can use the Auto Complete control in your forms.
Step 1 - Open Page Designer
After creating a page, form, or sub form, hover over its name. Once the 'Open Page Designer' button
appears, click on it.
Step 2 - Add the Auto Complete Control to Your Form
From the Standard tab, drag and drop the Auto Complete control onto your design canvas.
Step 3 - Configure the Auto Complete Control
Upon adding the Auto Complete control, its properties will appear on the right side of the screen.
You can customize the following properties accordingly:
| Identifier | This field is for the name used to identify this specific Layout control. Add a meaningful one so you can use it in expressions. |
| Auto Select First | Selecting this option will allow the auto-selection of the first value before the user enters anything. |
| Background Color | Pick a color from the palette to use as the background color of the control. |
| Data Source | In Data Source, enter the values you expect users to type in. If you have a larger data set, you can map this control to a connector and retrieve values from a database. |
| Display Expression | Enter a dynamic expression to dynamically display data according to a scenario. |
| Font Name | Choose your preferred font. |
| Font Size | Choose your preferred font size. |
| Font Style | Specify whether you want to make the font bold or italicized. |
| Line Count | Define the number of lines you want this control to span on, |
| Placeholder Text | In the Placeholder Text field, type text which guides users such as "Begin typing a user name". |
| Text Color | Choose a suitable text color from the palette. |
| Value Expression | Define a dynamic expression to process the value within the control. |
Add more controls to your form and then save or publish your form.
Step 4 - Populate the Control by Adding Dynamic Expressions
To enable the Auto Complete control to fetch and display values, you need to fill the following fields.
| Data Source | If you have a larger data set, you will need to map this control to a connector and retrieve values from a database. You can retrieve a value with the help of Data Source. Select Expression from the Type drop-down menu, then write an expression. For example, to retrieve the Entity "project", use the expression "entity[project]". |
| Display Expression | In this field, you have to write an expression to define which column you want to display from an Entity. For example, to show the columns Name and Value, write the expression "[Name]+'-'+[Value]". |
| Value Expression | In this field, you need to write an expression to process the value within the control. |
Finally, add more controls to your form and then save or publish it.
Watch How It Works
Watch this video tutorial to better understand how to use the Auto Complete control to add an auto-complete text box to a form.
Need more help? Contact us at support@makeen.io