Selection Box

What is it?

The Selection Box widget allows you to choose from a range of options. You can select one or multiple options, depending on the widget settings. When you add this widget to a form, the option(s) you select will be saved individually for each unique copy or iteration of the form. This ensures that your chosen option(s) are saved accurately and separately with each form submission.

How and When to use it? 

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

To change the name of the selection box, tap on the placed button 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 a Selection Box into the Form

2. Click the Selection Box and then click "Widget Property Settings" to open Widget Property Settings. 

The General Tab is shown, we will demonstrate how each property is used. 

1.  Name 

Users can change the name of the Selection Box with the Name property.

For example, we create a Selection Box, look through the Name  property under Basic in the Widget Property Settings. We rename it as “Gender”, and we add 2 customized options for the Selection Box. 

The design time and the runtime display are shown below: 

2. Display Name

It changes the label of the Selection Box with Display Name property. Compared to the Name property, the Name property is used in the configuration, while the Display Name is what the user will see in the Form in runtime. 

For example, we create a Selection Box, look through the Display Name property under Basic in the Widget Property Settings. 

Users can change the value of the Display Name of the Selection Box, “Gender” for example. 

The design time and the runtime display are shown below:

3. Description

It provides a space for app designer’s remark purpose. 

For example, we create a Selection Box, look through the Description property under Basic in the Widget Property Settings. 

4. Selection Box Type

It changes the type of the Selection Box with the Selection Box Type property. 

Users can choose either “Radio Box” or “Check Box” as the Selection Box Type. By definition, a user can only select 1 option out of the Radio Box options while users can choose multiple options out of the Check Box options.

For example, we create 2 Selection Boxes, look through the Selection Box Type property under Configuration in the Widget Property Settings. 

We choose Radio Box for Selection Box “Gender” to allow users to choose only one of the options and choose Check Box for Selection Box “Reason” to allow users to choose multiple options.

The design time and the runtime display are shown below:

5. Options Per Row 

It changes the options per row of the Selection Box with the Options Per Row property. By default the Selection Box is 2 options per row.

For example, we create a Selection Boxes with 4 customized options, look through the Options Per Row property under Configuration in the Widget Property Settings. 

The design time and the runtime display are shown below:

6. Options - Hide Options Label for Web 

It allows hiding the options label for the web of the Selection Box with the Hide Options Label for Web property

. 

For example, we create a Selection Boxes with 2 customized options, look through the Hide Options Label for Web property under Configuration in the Widget Property Settings. 

Users may enable the Hide Options Label for Web property.

The design time and the runtime display are shown below:

7. Allow Deselect (for Radio Box only)

It allows users to deselect the Selection Box (Radio Box) with the Allow Deselect property.

For example, we create a Selection Boxes with 2 customized options, look through the Allow Deselect property under Configuration in the Widget Property Settings. 

Users may enable the Allow Deselect property.

For example, the user has chosen an option from the radio box. Users can deselect the option by clicking the option again.

The runtime displays are shown below:

8. Allow Select All (for Check Box only)

It adds a check box option to allow users to select all of the Selection Box (Check Box) with the Allow Select All property. 

For example, we create a Selection Boxes with 2 customized options, look through the Allow Select All property under Configuration in the Widget Property Settings. 

Users may enable the Allow Select All property.

Users can select all of the options by selecting the “All” option. The design time and the runtime display are shown below:

Introduction of Value Tab Properties

1. Drag a Selection Box into the Form

2. Click the Selection Box and then click "Widget Property Settings" to open Widget Property Settings 

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

1. Default Value

Users may set the default value of the Selection Box. 

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

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

The design time and the runtime display are shown below:

7. 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 Member Parent Page with Input Box “Member Name (Parent)” and Selection Box “Gender (Parent)” with value equals to either “Male” or “Female”, and the Form Table is for display only. We also have a Member Child Page that has a Dropdown “Member Name (Child)”, which the data is from the widget “Member Parent Page” in the Member Parent Page and a Selection Box “Gender (Child)”. 

If the “Member Name (Child)” in the Member Child Page matches the “Member Name (Parent)” in the Member Parent Page, then PDS will be triggered and fill in the “Gender (Child)” value in the Member Child Page with the “Gender (Parent)” in the Member Parent Page.

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

3. Options Source Type

3.1. Use Widget Values From Other Form

Users may use the widget values from other forms as options for the Selection Box. 

For example, we have a Parent Form which contains an Input Box “Location”, and a Form Table that records the data of the input box. We also have a Child Form which contains a Selection Box “Child Location”, which contains the options from the “Location” in the Parent Form.

For “Child Location”, 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”. 

3.2. Use Customized Options

Users may set the options for the Selection Box. 

For example, we create a Selection Box, 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:

3.3. Reuse Customized Options

Users may reuse the customized options of the previous Selection Box. 

For example, we create a Selection Box, 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:

3.4. Use Workflow States

Users may use the workflow states as options for the Selection Box. 

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

For example, we create a Selection Box, 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”. Users can also filter the workflow state options. 

The design time and the runtime display are shown below:

3.5. Use Email Status

User may use the email status as options for the Selection Box. 

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

Note that we enlarge the size of the Selection Box for better demonstration. The design time and the runtime display are shown below: