Input Elements are widgets in Mendix Studio that are typically used to allow end-users enter or edit data. For example, a text box below allows users to fill in their full names:
Input Elements can only function inside a data container (a data view, a list view, or a data grid). You can either place widget in an existing data container; or click Wrap with a new data view in Properties to create a data view and place an input element inside it automatically.
2 Input Elements Overview
You can find the description of input elements available in Studio in the table below:
|Text Box||A text box is used to allow end-users to enter, edit, and display a text. For example, end-users will be able to enter their names.|
|Text Area||A text area is used to enter, edit, and display a long text that can take several lines, for example, the description of a product.|
|Date Picker||A date picker is used to allow end-users select a date in a calendar, for example, when selecting a day for a delivery.|
|Drop-Down||A drop-down widget is used to allow end-users pick an option from the preset list of options. For example, users can select a color of a product.
You can also use this widget to display and select associations. You need a many-to-one association in the domain model (for more information, see Associations). For example, if a customer has several addresses, the user can select a delivery address from them. In this example, several addresses can be associated with one customer (many-to-one association).
|Check Box||A check box widget is used to allow users to mark a value as true or false. For example, users can tick a box to sign up for the newsletter.|
|Radio Buttons||Radio buttons are used to allow users select the option from a number of preset ones. For example, users can select from several possible locations for picking an order up.|
All input elements properties consist of the following sections:
A date picker has a specific Format section.
3.1 Type Option
This option is only available for Text Box, Text Area, Radio Buttons, Check Box, and Drop-Down widgets.
The Type option allows you to quickly change the type of one input element to a similar one: you can change a Text Box to a Text Area and vice versa, and change Radio Buttons to a Check Box or a Drop-Down and vice versa:
3.2 Data Source Section
Input Elements need to be linked to an attribute to show data and to allow end-users to edit it. Different input elements require different types of attributes. You can find the correspondence between the input elements and attribute types in the table below:
|Input Element||Allowed Attribute Type|
|Text Box||String, Autonumber, Decimal, Hashed String, Integer, Long|
|Date Picker||Date and Time|
|Reference Selector||Autonumber, Date and Time, Decimal, Enumeration, Integer, Long, String|
|Radio Buttons||Boolean, Enumeration|
3.3 General Section
The General section has common properties for every input element, but may also contain specific ones.
3.3.1 Show Label
Enable this property if you want to show a label (name) of a widget to the end-user. This property is enabled by default.
This property only appears if Show Label is enabled. Specify the name that will be displayed to end-users. When you select an attribute, the name of the attribute is shown in the label in braces. This means that instead of a static text, the value of the attribute is displayed to end-users.
Editability indicates whether the end-user will be able to change the value displayed by the widget. Possible values are the following:
Editable – the value displayed by the widget is editable.
Read-only – the value is in read-only mode.
Conditional – the widget is editable only if specified conditions are met based on an attribute value (for more information, see Attribute-Based and Attribute Values sections below) or based on an expression. You can create a condition based on an expression in Studio Pro only (for details, see the Editability Section in Properties Common in the Page Editor)
If an attribute set for the widget’s data source is of the AutoNumber type, the widget is set into read-only mode by default and the Editability setting itself is disabled, because attributes of this type are generated automatically.
The Attribute-Based property is only shown when Conditional Editability is selected.
Attribute-Based conditional editability allows you to show widgets only when they match a certain value of the selected attribute.
The attribute must be of the Boolean or enumeration type.
You can only configure attribute-based conditional editability when a widget is placed in a data container: a data view or a list view. For more information on how to place widgets on a page, see Adding Elements on a Page section in Pages.
3.3.5 Attribute Values
This property is shown only when an attribute in the Attribute-Based property is selected. The Attribute Values property allows you to select certain attribute values.
For example, you would like to make the City field editable only when users fill the Country field in, because you can deliver your products to a limited number of countries. So, you need to select Country in the Attribute-Based property and Netherlands, Belgium, Germany, France in the Attribute Value property:
3.3.6 Specific Properties
Specific properties of the input elements are described in the table below:
|Text Area||Grow Automatically||When enabled, the text area grows automatically depending on the amount if text filled out in it.
This property is disabled by default.
|Text Area||Number of Lines||This property is only displayed when the Grow Automatically option is disabled. The number of lines determine how many lines the text area shows at the same time. If the text in the text area contains more lines you will have to use a scrollbar to see it all.
Default value for the Number of Lines option: 5
|Radio Buttons||Orientation||This property defines whether the radio buttons are displayed in your app horizontally or vertically.
Default value for Orientation: Horizontal.
3.4 Format Section
The Format section is specific for the Date Picker widget only.
The Format section properties are described in the table below:
|Type||Determines the way date and/or time is displayed to users. Possible values of this property are the following ones:
Default value for Type: Date
|Format Example||Displays an example of the selected format type.|
3.5 Input Validation Section
In Input Validation, you can specify whether the widget’s value should be validated. You can set a validation type for an input widget and specify an end-user message in case validation fails. For example, you can mark the Full name field as required for new customers and you can add a message saying: “Please specify your name to proceed”.
The Input Validation section properties are described in the table below:
|Validation Type||This property indicates whether a value filled in a widget should be validated. Possible options are the following:
|Message||A message that is shown to end-users when Validation Type is Required or Custom and when the validation has failed.|
3.6 Conditional Visibility Section
Conditional visibility allows you to hide a widget from a page unless the certain conditions are met.
For information on the Conditional Visibility section and its properties, see Conditional Visibility Section.
3.7 Design Section
For information on the Design section and its properties, see Design Section.