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: 


IdentifierThis 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 FirstSelecting this option will allow the auto-selection of the first value before the user enters anything.
Background ColorPick a color from the palette to use as the background color of the control.
Data SourceIn 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 ExpressionEnter a dynamic expression to dynamically display data according to a scenario.
Font NameChoose your preferred font. 
Font SizeChoose your preferred font size.
Font StyleSpecify whether you want to make the font bold or italicized. 
Line CountDefine the number of lines you want this control to span on,
Placeholder TextIn the Placeholder Text field, type text which guides users such as "Begin typing a user name". 
Text ColorChoose a suitable text color from the palette.
Value ExpressionDefine 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