Dropdown List

organizing infoorganizing info

The Dropdown List Web Control creates a dropdown list from where the app user can select a value.

General

Control Properties

Placeholder Text

Expects type text.

Displays the text in the Dropdown List before the user selects a value.

Data Binding

Value

Expects type text.

By default, a Variable of type Text is generated at the Web Page level to store the data from the dropdown. Users can also edit the Data Binding property and create their own Variables.

Type of List

Simple List

Allows the 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.

  • Option List: Expects the options of the dropdown. By clicking on the '+' sign, you can add as many options as needed.
    • The options defined here represent both how the option will be displayed as well as what will be saved to the bound variable upon selection. To save a value that differs from the selection display, a Custom Expression is required.

Custom Expression

Provides full control over all the properties of the Dropdown List.

  • Data: Expects type list. It is the data which the Dropdown List refers to for the user-selectable options.
  • 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.
  • Value Text: The value that will be stored 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.

Style and Layout

Dropdown Lists have styles for the following states:

Default - When first rendered without state
Disabled - When the Dropdown List is disabled

Check Common style properties of web controls for further details on how to style your Checkbox Web Control.

Actions

Value Changed

This event is run each time an item from the dropdown list is selected.

Metadata about this event can be accessed through the event namespace.

Advanced

State

Is Visible

Expects type boolean.

If TRUE the dropdown list will be visible. If FALSE the dropdown list will not be displayed. If the field is empty, the dropdown list will be visible.

Example #1

A simple List of options:

organizing infoorganizing info  

Example #2

Working with Custom Expressions to use and display data:

organizing infoorganizing info  

Example #3

Working with Custom Expressions to use and display objects:

organizing infoorganizing info

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:

organizing infoorganizing info

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

organizing infoorganizing info

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"