Dropdown List
Last updated
Last updated
The Dropdown List Web Control creates a dropdown list from where the app user can select a value.
Expects type text.
Displays the text in the Dropdown List before the user selects a value.
Expects type text.
Defines a value to the aria-label of the control for accessibility. For more information see here.
Expects type text.
The Input ID assigned to the Dropdown List. This Input ID can tied to a Label so that clicking on the associated Label will allow users to select an item from the Dropdown List.
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.
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.
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.
Dropdown Lists have styles for the following states:
Default - When first rendered without state Disabled - When the Dropdown List is disabled
Also, the arrow on the box can be independently styled from Style > Override Styles to personalize its size, color, direction, and border.
Check Common style properties of web controls for further details on how to style your Checkbox Web Control.
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.
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.
A simple List of options:
Working with Custom Expressions to use and display data:
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.
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.
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.
Check out this Building Byte video on how to create Dependent Dropdowns using Custom Expression:
[block:embed] { "html": "<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fn0LdL76FdJg%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dn0LdL76FdJg&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fn0LdL76FdJg%2Fhqdefault.jpg&key=7788cb384c9f4d5dbbdbeffd9fe4b92f&type=text%2Fhtml&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "url": "https://www.youtube.com/watch?v=n0LdL76FdJg", "title": "Dependent dropdowns", "favicon": "https://www.google.com/favicon.ico", "image": "https://i.ytimg.com/vi/n0LdL76FdJg/hqdefault.jpg", "provider": "youtube.com", "href": "https://www.youtube.com/watch?v=n0LdL76FdJg", "typeOfEmbed": "youtube" } [/block]
