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 |