Drop-Down
The drop-down widget is not compatible with the modern version of the Mendix React Client. Depending on your app version, you may wish to convert the widget to a combo box widget using the context menu in Studio Pro.
For more information on converting a drop-down widget into its more modern combo box counterpart, see the Mendix React Client’s Migration Guide.
Introduction
A drop-down is used to display and, optionally, allow the end-user to edit the value of an attribute of data type enumeration.
A drop-down must be placed in a data container and displays an attribute of the object (or objects) retrieved by that container. The name of the attribute to be displayed is shown inside the drop-down, between square brackets, and colored blue.
For example, the following drop-down allows the end-user to see, and set, the Region to which a customer is allocated. The possible values for Region are held in an enumeration.
Properties Pane
The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Drop-down properties consist of the following sections:
Properties:
Styling:
Properties
General Section
Empty Option Caption
Empty option caption is the text that is shown for the empty option in the drop-down shown to the end-user. This is a translatable text. For more details, see Language Menu.
Adding a caption for the empty option improves the user experience of your application. It also helps end-users using a screen-reader to operate the application easily.
For example, the drop-down that allows the end-user to select the region allocated to a customer, where the possible values for Region are held in an enumeration, could have the caption Select a region.
Data Source Section
This selects which attribute will be used within the widget. You can only select attributes which have the correct data type(s).
For more information on selecting a data source, see the Data Source Section section in Properties Common in the Page Editor.
Label Section
A label describes the purpose of a widget to the end-user.
For more information on properties of this section, see the Label Section section in Properties Common in the Page Editor.
Editability Section
Editability determines whether an end-user can change the value in an input widget.
For more information on properties of this section, see the Editability Section section of Properties Common in the Page Editor.
Visibility Section
Visibility determines whether a widget is displayed to the end-user as part of the page.
For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.
Validation Section
Here, you can specify predefined or custom validation which must be applied to the widget value before the data can be used. You can also customize the message which the end-user will get if the data does not pass the validation.
For more information on input widget validation, see the Validation section of Properties Common in the Page Editor.
Accessibility Section
Aria Required
In a text area widget, when Aria required is set to Yes then assistive technologies will read out the field that is required. When set to No then assistive technologies will not read the field out.
Common Section
Events Section
On Change
The on-change property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget, after the value has been changed.
On Enter
The on-enter property specifies an action that will be executed when the widget is entered, either by using the Tab key or by clicking it with the mouse.
On Leave
The on-leave property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget.
This differs from the On change property in that the event will always be triggered, even if the value has not been changed.