Drop Down

A drop-down control renders to a standard HTML <select /> tag containing <option /> tags. You can populate the drop-down from a data source or define a static list.

---

Add a Drop Down {% endembed %}

---

Properties

1. Options

   Specify a list of options to display in the control. It can be generated from a static list or from data. When populating the Options from a Connector or file, use the Field Mapping Editor found in the Property Grid (seen circled in red below) to assign the Text and the Value of the items.

2. Hint

   Some placeholder text that will show when the drop down is empty. This value is not saved if no other value is entered.

3. Read-Only

   Set to True if you want the control to display as read-only (value can’t be changed) on the page.

4. Selected Value

   This value will be shown in the drop down when the field loads.

5. Validations

   Some validations that can be applied to the drop-down.

6. Visible

   Set to False if you don’t want this control to render on the page and be visible to the user.

---

Assigning data to a DropDown

Example:

To display a DropDown list containing option values retrieved by a SQL query:

1. Use an appropriate Event, e.g. Load (page) or Click (button) to which a SetValue action can be added.
2. Add a SetValue action that populates the DropDown options with each returned value.

Data:

DropDowns expect a List of objects containing a text and a value property

[
    {"text":"Monday","value":"1"},
    {"text":"Tuesday","value":"2"},
    {"text":"Wednesday","value":"3"},
    {"text":"Thursday","value":"4"},
    {"text":"Friday","value":"5"}
]

The Field Mapping option in the SetValue action allows for the mapping of object properties other than text & value to these properties

---

Retrieving data from a DropDown

Properties that can contain data:

• Options (Value)

Use an action to capture the values from the control. Go here for more details on how to collect data from controls.

---

Events

1. Change

   An event that triggers when another option in the dropdown is selected.

   Event Input Parameters:

   1. PreviousOption
      The Text and Value of the option that was selected before selecting the option.
   2. SelectedOption
      The Text and Value of the newly selected option.