Dropdown List Control Dropdown List Control

Dropdown List Control

Leo Ng Leo Ng

Overview

Dropdown Lists web control creates a Dropdown List where an app user can select a value from a List.

dropdown.gif

Control Properties

Placeholder Text

The text that will appear 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 will allow simple creation of options for the Dropdown List.

    mceclip0.png

Under the hood, selecting Simple List creates a List of Strings as the options of the Dropdown List.
Custom Expression: 
Selecting this value will give full control over all the properties of the Dropdown List
    mceclip1.png

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.


       mceclip3.png

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 1:

mceclip14.png
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 for the whether the stored value is equal to the "item.make" property, it evaluates to TRUE and this selection is indicated to the app user.

mceclip15.png

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
mceclip4.png

Example 2: Working with Custom Expressions to use and display data

mceclip6.png

 

Example 3: Working with Custom Expressions to use and display objects

mceclip7.png

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

mceclip16.png

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

mceclip10.png

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"

Further Reading