A drop-down is an input widget that can be used to display and edit enumeration attributes. It should not be confused with a reference selector, which is used to select a object with which to fill an association.

This drop-down widget allows the user to select the state of the customer.

General Properties

Empty Option Caption

This property represents the caption for the empty option in the drop-down shown to the user. This is a translable text. For more details, see Translatable Texts.

Filling out the caption for an empty option increases the user experience of your application. It also helps screen-reader users to operate the application easily. For example, the drop-down that represents the color selection for a car could have a caption reading “Select a color.”

The empty option caption is available from Mendix 7.2.0.

Required

This property indicates whether this widget must be filled in by the end user or not. If set to true, this widget can not be left empty and a message will be shown if the end user presses the ‘Save’ button.

Default value: False

Required message

This property determines the message that is shown to the end user if the widget is empty and the ‘Required’ property is set to true. This is a translable text. See Translatable Texts.

For example, if an address field is required, the required message for the text box of the address could be something like “The address is required.”

Data Source Properties

Attribute (path)

Many input widgets, like text boxes and drop-down widgets, can be connected to:

  1. an attribute of the entity of the data view that contains the widget
  2. an attribute of an entity associated with the data view entity by following one or more associations of type reference through the domain model.

In the first case we say the widget is connected to an attribute and in the second case to an attribute path.

An input widget connected to an attribute path must be read-only. The Modeler will check this for you.

Label properties

A label can be used to described the purpose of the widget to the user. The label is shown next to the widget in the user interface. If a label is configured, the widget will be rendered in the browser wrapped in a form group. See Bootstrap documentation.

Show label

This property determines whether the label is rendered and the widget is wrapped in a form group.

Default value: No

Label caption

This property is shown only when Show label is Yes. This property determines what text is rendered within a label.

Editability Properties

Editable

The editable property indicates whether the end user will be able to change the value displayed by the widget.

Value Description
Default The value is editable if security allows it (i.e. if the user that is signed in has write rights to the selected attribute).
Never The value is never editable.
Conditional The value is editable if the specified condition holds. (see below)
  • Default value: Default

Read-only style

This property determines how the widget is rendered if it is read-only.

Value Description
Set by data view Set to Control or Text by the containing data view.
Control Widget is displayed but disabled so the value cannot be modified.
Text Widget is replaced by a textual representation of the value.

Default value: Set by data view

Condition

The widget can be made editable only if the object of the data view that contains the widget satisfies the specificied criteria.

A practical example would be a personal details form in which the user must enter his marital status. In this case, you might wish to disable an input for the marriage date until the user indicates that he or she is married.

Based on Attribute Value

When selected, this enables the widget while a particular attribute has a certain value. Only Boolean and enumeration attributes can be used for this purpose.

Based on Expression

Added in Mendix 7.1.

When selected, this enables the widget while a provided expression evaluates to true. The object of the containg data view is available inside an expression as a $currentObject variable.

Note that the expression is evaluated in the browser, and hence, we advise against using “secret” values (like access keys) in it. In particular, we disallow usages of constants. Also, client-side expressions currently do not support all the functions that are available in the microflows. Please refer to an autocomplete list to know what functions are supported in your version.

Visibility properties

Visible

By default, whether or not an element is displayed in the browser is determined by how the page is designed and the user’s roles within the application. However, the page can be configured to hide the element unless a certain condition is met.

Context

The widget can be made visible only if the object of the data view that contains the widget satisfies the specificied criteria.

A practical example would be a web shop in which the user must submit both billing and delivery information. In this case, you might not wish to bother the user with a second set of address input fields unless they indicate that the billing address and delivery address are not the same. You can accomplish this by making the delivery address fields conditionally visible based on the Boolean attribute SameBillingAndDeliveryAddress.

Based on Attribute Value

When selected, this shows the widget while a particular attribute has a certain value. Only boolean and enumeration attributes can be used for this purpose.

Based on Expression

Added in Mendix 7.1.

When selected, this shows the widget while a provided expression evaluates to true. The object of the containing data view is available inside an expression as a $currentObject variable.

Note that the expression is evaluated in the browser, and hence, we advise against using “secret” values (like access keys) in it. In particular, we disallow usages of constants. Also, client-side expressions currently do not support all the functions that are available in the microflows. Please refer to an autocomplete list to know what functions are supported in your version.

Module Roles

The widget can be made visible to a subset of the user roles available in your application. When activated, this setting will render the widget invisible to all users that are not linked to one of the selected user roles.

Events Properties

On change

The on-change property optionally specifies a microflow that will be executed when leaving the widget after the value has been changed.

On change settings

The on change settings specify what parameters are passed to the microflow, whether a progress bar is shown and more.

See Starting Microflows.

On enter

The on-enter property optionally specifies a microflow that will be executed when the widget is entered, either by using the tab key or by clicking it with the mouse.

On enter settings

The on enter settings specify what parameters are passed to the microflow, whether a progress bar is shown and more.

See Starting Microflows.

On leave

The on-leave property optionally specifies a microflow that will be executed when leaving the widget, either by using the tab key or by clicking another widget.

On leave settings

The on leave settings specify what parameters are passed to the microflow, whether a progress bar is shown and more.

See Starting Microflows.

Common Properties

Name

The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class ‘mx-name-{NAME}’, which can be useful for Selenium testing.

Class

The class property allows you to specify a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. The class should be a class from the theme that is used in the project. It overrules the default styling of the widget.

Note that the styling is applied in the following order:

  1. Default styling defined by the theme the project uses.
  2. The ‘Class’ property of the widget.
  3. The ‘Style’ property of the widget.

Style

The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

background-color:blue; This will result in a blue background

Tab index

The tab index influences the order in which the end user navigates through the page using the tab key. By default tab indices are zero and the tab order is determined automatically by the client system. A value of minus one (-1) means that the widget will be skipped when tabbing through the page.

Default value: 0