Auto-complete

What is it?

The Auto Complete widget works just like an input box, where you can enter values or data in the same way. It even predicts the rest of the word you're typing and shows suggestions in a convenient dropdown menu that appears right below the box as you type. 

How and When to use it?

To add a new Auto-complete to your page, simply drag and drop the “Auto-complete” widget from the left side of the page screen to the design area of your page.

To change the name of the Auto-Complete widget, tap on the placed widget to reveal the blue Quick Settings panel. By default, the name is displayed on the widget’s left side for a seamless user experience.

How to configure it?

1. Drag an Auto-Complete into the Form

2. Click the Auto-Complete and then click the setting button  to open Widget Property Settings. 

3. The Widget Property Settings is shown, which contains three tabs, General, Value and Visibility. We will demonstrate how each tab and property is used. 

Introduction of General Properties

The tab General has four subheaders, “Basic”, “Configurations”, “Style” and “Position, Size and Layout”.

Basic

The fields in “Basic” are Name, Display Name, and Description. If you leave the display name field blank when setting up your widget, the name field will automatically become the Display Name. If you fill in both fields, the system will use the Name field as an internal reference (like in page builder), while showing the display name to your users in Production. 

Configurations

Place holder

The PlaceHolder property provides a short hint for users to fill in the input box.

For example, we create an Auto-Complete and rename it as “Country”, look through the PlaceHolder property under Configurations in the Widget Property Settings. 

User may fill in the PlaceHolder. 

The design time and the runtime display are shown below:

Scanner Mode In Mobile

It allows users to scan a barcode or QR code for a faster entry process.

For example, we create an Auto-Complete, look through the Scanner Mode In Mobile property under Configurations in the Widget Property Settings. 

User can enable the Scanner Mode in Mobile. 

In the runtime, users may click the right of the Auto-Complete to scan the QR code or barcode. The runtime display are shown below:

When Value is From Other Page

It determines whether the user can edit the value of the Auto-Complete if the value is from another page. By default, the value is “Normal”, which allows the user to edit the value.

For example, we create a Form A page and a Form B page, and both of them will have an Auto-Complete “Country”. We create a button in Form A page that transfers the country value from Form A to Form B.

For “Country (Form B)”, look through the When Value of From Other Page property under Configurations in the Widget Property Settings. 

User can change it to “Looks Read-Only”

The runtime display is shown below:

Check Updated Value

It provides a validation for values with source value or default formula before storing into the database. If the user wants to save a value which is different from the source value or default formula value, then the system will display a warning message (shown below) and require the user to provide the appropriate value before saving the data. Users can click “Retrieve” to replace the edited value with the calculated value.

For example, we aim to record where our members come from. We create a Form A Page with Input Box “Member” and “Country”, and the Form Table is for display only. We also have a Form B Page that have an Auto-complete “Member”, which the data is from the widget “Member” in the Form A Page and an Auto-Complete “Country”, which the data is transferred from the  Form A Page by mapping the “Country” based on the chosen “Member” using Page Data Source (PDS). 

For “Country (Form B)”, look through the Check Updated Value property under Configurations in the Widget Property Settings. 

User can enable the Check Updated Value:

For example, we attempt to save with an incorrect country name, since Kelvin is from Hong Kong, a warning will be displayed:

Recalculate When Open Record

The Recalculate When Open Record allows the widget to recalculate its values based on its calculation formula or Page Data Source while opening the record.

For example, we aim to record where our members come from. We create a Form A Page with Input Box “Member” and “Country”, and the Form Table is for display only. We also have a Form B Page that have an Auto-complete “Member”, which the data is from the widget “Member” in the Form A Page and an Auto-Complete “Country”, which the data is transferred from the  Form A Page by mapping the “Country” based on the chosen “Member” using Page Data Source (PDS), and the Form Table is for display. 

Notice that in the Form Table in the Form B Page, there is a record in the form table showing that Kelvin is from Hong Kong, which follows the PDS mapping value.

For the “Country (Form B)”, look through the Recalculate When Open Record property under Configurations in the Widget Property Settings. 

Style

The fields of Style are Show Label, Label Style, and Value Style.

By default, Show Label is checked. If it is not checked, the left side of the widget that shows the widget name is removed and the field of the widget fills the entire widget area.

Label Style and Value Style both have the same Size option. 

Label Style has two more fields: Alignment, and Width, which are in units of pixels (px) and accepts a numerical value. In Alignment, you can choose to inherit the previous alignment or choose your own alignment (left, centre, right).

Position, Size and Layout

The options for Sizing Mode are Absolute Size and Relative Size. In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. 

In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production.   

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms. 

Introduction of Value Properties

Go to Value Tab, we will demonstrate how each property is used. 

Default Value

Users may set the default value of the Auto-complete. 

For example, we create an Auto-complete, look through the Default Value property under the Value Tab in Widget Property Settings. 

Users can set the default value of the Auto-complete, “Option A” for example. 

Page Data Source

Page Data Source (PDS) is a data transfer method in which the data is transferred from the source page to the destination page by mapping based on filtering.

For example, we create a Product Page with Input Box “Product Name” and Auto-complete “Type” with value equals to either “Tablet” or “Phone”, and the Form Table is for display only. We can see the type of the product with the first word of the product name, for example, Table Model C is a Tablet type. We also have an Order Page that has an Auto-complete “Order Product”, which the data is from the widget “Product Name” in the Product Page and an Auto-complete “Order Type”. 

If the “Order Product” in the Order Page matches the “Product Name” in the Product Page, then PDS will be triggered and fill in the corresponding “Order Type” value in the Order Page with the “Type” in the Product Page.

To add a PDS property in the Order Page (Child Form), press the Data Source Setting button and press “Add Data Source”. 

Options Source Type

Use Widget Values From Other Form

Users may use the widget values from other forms as options for the Auto-complete. 

For example, we have a Product Form which contains an Input Box “Product Name”, and a Form Table that records the data of the input box. We also have a Child Form which contains an Auto-complete “Child Product Name”, which contains the options from the “Product Name” in the Product Form.

We look through the Options Source Type property under the Value Tab in Widget Property Settings. Choose “Use Widget Values From Other Form” and set the “Data From Page”. 

Use Customized Options

Users may set the options for the Auto-complete. 

For example, we create an Auto-complete, look through the Options Source Type property under the Value Tab in Widget Property Settings. Choose “Use Customized Options” and press “Add Item” to add options. 

Reuse Customized Options

Users may reuse the customized options of the previous Auto-complete. 

For example, we create an Auto-complete, look through the Options Source Type property under the Value Tab in Widget Property Settings. Choose “Reuse Customized Options” and set the “Data From Page”.

Use Workflow States

Users may use the workflow states as options for the Auto-complete. 

For example, we have a Form with the following workflow:

For example, we create an Auto-complete, look through the Options Source Type property under the Value Tab in Widget Property Settings. Choose “Use Workflow States” and set the “Data From Page”. User can also filter the workflow state options. 

Use Email Status

Users may use the email status as options for the Auto-complete. 

For example, we create an Auto-complete, look through the Options Source Type property under the Value Tab in Widget Property Settings. Choose “Use Email Status”.