Dropdown

To change the name of the dropdown 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.

How to configure it? 

1. Drag an Dropdown into the Form

2. Click the Input Box and then click  Widget Property Settings Logo 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 sub-headers, “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 

Dropdown Filter 

Users may limit the number of items shown in the dropdown list with the Dropdown Filter property.

For example, we create a Dropdown, look through the Dropdown Filter property under Configurations in the Widget Property Settings. 

Suppose we create a Dropdown with the following options:  

We can tick the checkbox “With Filter”, and we can see more options about the Dropdown. 

When Value is From Other Page

It determines whether the user can edit the value of the Dropdown if the value is from another page. By default, the value is “Normal”, which enables user to edit the value.

For example, we create a Parent Page with an Input box “Product Name” and a Reference Table of the Child Page, and a Child Page with a Dropdown “Order Product”, which is from widget “Product Name” values in the Parent Page.

For “Order Product” in Child Page, look through the When Value of From Other Page property under Configurations in the Widget Property Settings. Since it is set to be“Normal”, we can choose another option of the Dropdown.

User can change it to “Looks Read-Only”.

The runtime display is shown below: 

Default Placeholder

It specifies a short hint that describes the expected value of an input field. 

For example, we create a Dropdown, look through the Default Placeholder property under Configurations in the Widget Property Settings. 

The design time and the runtime display are 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. User can click “Retrieve” to replace the edited value with the calculated value.

For example, we create a Source Page with Input Box “Product Name” and Dropdown “Type” with data equals to either “Tablet” or “Phone”, and the Form Table is for display only. The type of the product is determined by the first word of the product name, for example, Table Model C is a Tablet type. We also have a Destination Page that have a Dropdown “Order Product”, which the data is from the widget “Product Name” in the Source Page and a Dropdown “Order Type”, which the data is transferred from the source page by mapping the “Order Type” based on the chosen “Order Product” using Page Data Source (PDS). 

For the Dropdown “Order Type”, look through the Check Updated Value property under Configurations in the Widget Property Settings. 

User can enable the Check Updated Value.

Here we attempt to save with an incorrect order type, and a warning will be displayed: 

Recalculate When Open Record (save form value <> database)

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 create a Source Page with Input Box “Product Name” and Dropdown “Type”, and a Form Table for display only. We can see the type of the product with the first word of the product name, for example, “Tablet Model C” is a Tablet type. 

We also have a Destination Page that have a Dropdown “Order Product”, which the data is from the widget “Product Name” in the Source Page, and a Dropdown “Order Type”, which the data is transferred from the source page by mapping the “Order Type” based on the chosen “Order Product” using Page Data Source (PDS), and a Form Table to record the value of the variable in the Destination Page. 

Notice in the Form Table in the Destination Page, there is a record showing that a “Phone Model A” belongs to the “Phone” type, which follows the PDS mapping value “Phone”. 

For the Dropdown “Order Type”, look through the Recalculate When Open Record property under Configurations in the Widget Property Settings. 

If we want to recalculate the widget using the value based on its calculation formula or Page Data Source, we can enable the Recalculate When Open Record.

For example, we create another record in the Form Table showing that “Phone Model A” is a “Tablet” (instead of Phone) 

With the Recalculate When Open Record property, when users open record in the Form Table, it will trigger the recalculation for “Sum”. 

When users open record, the value of Dropdown “Order Type” is Phone, which follows the default calculation instead of the manual input because of the recalculation, while we can see the original record of “Order Type” in the Form Table. 

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, center, 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 Dropdown. 

For example, we create a Dropdown, look through the Default Value property under the Value Tab in Widget Property Settings. 

Users can set the default value of the Dropdown, “Option A” for example. 

The design time and the runtime display are shown below: 

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 Dropdown “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 a Dropdown “Order Product”, which the data is from the widget “Product Name” in the Product Page and a Dropdown “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 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 Dropdown. 

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 a Dropdown “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 Dropdown. 

For example, we create a Dropdown, 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. 

The design time and the runtime display are shown below: 

Reuse Customized Options

Users may reuse the customized options of the previous Dropdown. 

For example, we create a Dropdown, 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”.

The design time and the runtime display are shown below: 

Use Workflow States

Users may use the workflow states as options for the Dropdown. 

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

For example, we create a Dropdown, 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. 

The design time and the runtime display are shown below: 

Use Email Status

Users may use the email status as options for the Dropdown. 

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

The design time and the runtime display are shown below: