Overview
The Dropdown List Web Control creates a Dropdown List where an App user can select a value from a List.
Control Properties
Placeholder Text
The text that appears in the Dropdown List before the App user selects a value.
Data Binding
Value
The variable where the Input of the dropdown is stored.
Type of List
Simple List: Selecting this value allows the simple creation of options for the Dropdown List.
Under the hood, selecting Simple List creates a List of Strings as the options of the Dropdown List.
Custom Expression: Selecting this value gives full control over all the properties of the Dropdown List
Note: In this example, selecting Custom Expression after creating a Simple List will expose the List of strings created in the Simple List.
Custom Expression properties:
Display Text:
The data which the Dropdown List refers to for the user-selectable options. This field supports the Expression Editor so that Objects may be provided within Lists.
Data:
The data which the Dropdown List refers to for the user-selectable options. This field supports the Expression Editor so that Objects and other data types may be provided within Lists.
Value Text:
The value that will be stored/saved when the App user selects an item in the Dropdown List. If left blank, the Value Text will be the item.
Selected:
Accepts an Expression that evaluates whether or not the selected item is indicated to the App user. An Expression that evaluates to TRUE will make the Dropdown List display the selected Display Text, whereas an Expression that evaluates to FALSE will not display what has been selected to the App user.
Example:
In this example, when the app user selects "Porsche Cayman S" from the Dropdown List, the value of "Porsche" is stored in the variable of dropdown_list. Because the Expression in Selected is checking whether the stored value is equal to the "item.make" property, it evaluates to TRUE and this selection is indicated to the app user.
Styling
Dropdowns can be styled with these controls. For more information, see Common Style Properties of Web Controls.
Examples
Example 1: Simple List of options
Example 2: Working with Custom Expressions to use and display data
Example 3: Working with Custom Expressions to use and display objects
In this example, if the app user selects "Porsche", the value that will be stored will be the entire object as there is no Value Text entered.
{ "make": "Porsche", "model": "Cayman S" }
Example 4: Working with Custom Expressions to use and display different data
In this example, if the app user selects "Porsche Cayman S", the value that will be stored will be the entire object as there is no Value Text entered.
{ "make": "Porsche", "model": "Cayman S" }
Example 5: Working with Custom Expressions to use and display different data
In this example, if the app user selects "Porsche Cayman S", the value that will be stored will be "Porsche" as each Item's make value as the Value Text is set to item.make.
"Porsche"