Dropdown
Collaborate with us
Edit this page on GitHub
Use the Dropdown Widget to create drop-down lists in your Mobile and Reactive Web Apps.
With the Dropdown Widget you can implement two types of lists:
- Simple list with text only, when you set Options Content to Text Only. These is the most common type of lists, rendered with the
<select>
HTML tag. It provides native look and feel in the devices. - Custom list with other Widgets, when you set Options Content to Custom. Use them to build a list from, for example, images or other widgets. These lists are rendered with the
<div>
HTML tag.
Properties
Name | Description | Mandatory | Default value | Observations |
---|---|---|---|---|
Name | Identifies an element in the scope where it's defined, like a screen, action, or module. | Yes | ||
Variable | Holds the value entered by the user. | Yes | ||
List | Specifies the list of records to show in the dropdown. | Yes | ||
Options Content | 'Text (Default)' content provides a native experience for selecting textual values (uses the select HTML tag). 'Custom' provides richer content with non-textual widgets (for example, images) inside the dropdown (uses the div HTML tag). | Yes | Custom | |
Options Text | Attribute of the records in the list to use as the label. | |||
Options Value | Attribute of the records in the list to use as the identifier of the selected value. | Yes | ||
Mandatory | Boolean literal or expression that defines the obligatoriness of the widget. | Yes | False | |
Enabled | Boolean literal or expression that defines if the widget is editable. | True | ||
Empty Text | Text literal or expression displayed in the Dropdown list that represents an empty selection. By selecting this option, the variable defined holds a default value. | |||
Style Classes | Specifies one or more style classes to apply to the widget. Separate multiple values with spaces. | "dropdown" | ||
Attributes | ||||
Property | Name of an attribute to add to the HTML translation for this element. | You can pick a property from the drop-down list or type a free text. The name of the property isn't validated by the platform. Duplicated properties aren't allowed. Spaces, " or ' are also not allowed. |
||
Value | Value of the attribute. | You can type the value directly or write expressions using the Expression Editor. If the Value is empty, the corresponding HTML tag is property="property". For example, the nowrap property doesn't require a value, therefore its property is nowrap="nowrap". |
Events
Name | Description | Mandatory | Observations |
---|---|---|---|
On Change | Screen action to execute, or a screen to navigate to when the value of the element changes. | ||
Transition | Transition effect applied when navigating to another screen. | By default defined at module level. | |
Event | JavaScript or custom event to handle. | ||
Handler | JavaScript event handler. |
Runtime properties
Name | Description | Read Only | Type | Observations |
---|---|---|---|---|
Id | Identifies the widget instance at runtime (HTML 'id' attribute). You can use it in JavaScript and Extended Properties. | Yes | Text | |
Valid | False when required inputs aren't present or the input value doesn't comply with the defined data type. You can override this property value when performing custom validations. | Boolean | ||
ValidationMessage | Message describing the built-in validation constraints not satisfied when 'Valid' is False. You can override this property value when performing custom validations. | Text |