This functionality is only available for certain module packages.

You are here: Reference > Form-UI > Field types > input

input

The <input> element inserts a simple input field, a drop-down list box, a radio button, a check box or a button with toggle function, which serves for either entering a value or selecting one.

In the hidden password input (type = "password"), instead of a character an asterisk (*) is displayed.

The text can also be created as a link. Such links are not, as usual, made of blue and underlined text and the link can only be accessed if the [Alt] key is pressed.

The content of the box can be calculated using the Formula Language. The input of integer or double values is limited to reduce the risk of incorrect entries. Other characters except the following can not be entered:

Attribute name Usage Attribute values Default value Description
autoselect optional, only for type = combo true, false false If the drop-down list box provides only one value, this one can automatically be set.
Conditions: Attribute editable = false and no default value is set.
true = if only one value is available, this one is set and displayed italic
false = if only one value is available, this one has to be set manually
bColor optional 0,0,0 to 255,255,255 System color Background color as RGB value
editable optional, only for type = combo true, false   true = any value can be added to the existing values
false = only the predefined values can be selected
font optional Font name-style-size System font Font name, style, and size for displaying text
hSize optional     Width of the element
EEC = width in characters
Web application = width in pixels
hSizeMax optional     maximum width of the element
EEC = width in characters
Web application = width in pixels
hSizeMaxPx optional     maximum width of the element
EEC = width in pixels
Web application = width in pixels
hSizeMin optional     minimum width of the element
EEC = minimum width in characters
Web application = minimum width in pixels
hSizeMinPx optional     minimum width of the element
EEC = minimum width in pixels
Web application = minimum width in pixels
hSizePx optional     Width of the element
EEC = width in pixels
Web application = width in pixels
id required any   unique ID, which is referred to as reference
img only for type = toggle png, gif, jpg   assigns another image to the element
key optional     field from which the value of the EO will be read
link optional     Formula to the object of the navigation target
readonly optional true, false   true = field is read-only. When type = combo, the list can not be expanded.
false = field may be written. When type = combo, the list can not be expanded and a value can be selected.
receiver required     Formula to the object
style only for type = text and radio multi, right, center, left, horizontal, vertical, wrap   defines the attribute type more precisely, for type = "text" combinations are possible. Only the meaningful combinations are listed here:
multi = multiline text box
multi right = multiline text box with right-aligned text
multi right vertical = multiline text box with right-aligned text and scroll bar
wrap = multiline text box with automatically wrapped text
wrap right = multiline text box with automatically wrapped, right-aligned text
wrap right vertical = multiline text box with automatically wrapped, right-aligned text and vertical scroll bar
horizontal = horizontal arranged radio buttons
vertical = vertical arranged radio buttons
text only for type = toggle     the text to display can be calculated using the formula language
tooltip optional     Text or Form-UI of the overlaying tooltip (see tooltip)
type optional text
combo
radio
check
password
toggle
text Type of input box:
text = text box (valid for pureTable)
combo = drop-down list box (valid for pureTable)
radio = radio button
check = check box (valid for pureTable)
password = hidden password input
toggle = button with toggle function
values only for type = combo     List of values to be displayed in a combo box.
=List{Pair{1,'one'},Pair{2,'two'}}
visible optional     true = element is visible
true = element is invisible
visibleItemCount optional, only for type = combo     Number of items to display in a drop-down list box without scrolling
vSize optional     Height of the element
EEC = height in characters
Web application = height in pixels
vSizeMax optional     maximum height of the element
EEC = maximum height in characters
Web application = maximum height in pixels
vSizeMaxPx optional     maximum height of the element
EEC = maximum height in pixels
Web application = maximum height in pixels
vSizeMin optional     minimum height of the element
EEC = minimum height in characters
Web application = minimum height in pixels
vSizeMinPx optional     minimum height of the element
EEC = minimum height in pixels
Web application = minimum height in pixels
vSizePx optional     Height of the element
EEC = height in pixels
Web application = height in pixels
write optional     Field of the EO the value is written to
Allowed sub-elements Quantity
tooltip 0..1

Note:

The selection values in drop-down-list fields must always be unique. Otherwise, it may not be possible to distinguish between the values displayed.

Note:

If the attributes hSizeMax and hSizeMaxPx are set, the hSizeMaxPx is used (hSizeMax is then ignored).

Note:

A non-editable drop-down list box shows the following behavior, when values are pasted from clipboard.
Values, which accord to those in a list (attribute values) are assumed, but differing values are ignored.

Text box:

The text box is displayed as a rectangle, which contains a text. The height and width of the box depends on the content. This examples shows a text, which is stored in the "Name" field of the component.

Read-only text field:

The text box is displayed as a gray rectangle, which contains a text. The gray text box indicates that the text cannot be edited.

Note:

For Windows 7 the presentation of read-only text fields varies depending on the selected design. This can lead to representations that are very difficult to read.

Text box writes a comment:

The text box is displayed as a rectangle, where a text can be typed. This examples stores the typed text in the "Comment" field of the EO.

Text box with limited width:

The text box is displayed as a rectangular with limited width, which contains the text Documentation. By limiting the text box to 25 pixels, the text is truncated.

Text box with link:

The text box stores the value of the parameter Place. The containing text is displayed with the font Arial with a size of 15 pt. By holding the [Alt] key you can follow the link to the parameter Place.

Multiline text box:

The multiline text box is displayed as a rectangle, which contains a multiline text. This examples shows a text, which is stored in the "Comment" field of the component.

Multiline Text box with link:

The multiline text box is displayed as a rectangle, which contains a multiline text. This example shows a text, which is stored in the Comment field of the EO. By holding the [Alt] key you can follow the link to the parameter Place.

Drop-down list box:

The drop-down list box is displayed as a rectangle with an arrow symbol beside. By clicking on the arrow a list is expanded. The element of the list, which is marked by the mouse, appears then in the closed list box and is stored therein.

Editable drop-down list box:

The drop-down list box is displayed as a rectangle with an arrow symbol beside. By clicking on the arrow a list is expanded. The element of the list, which is marked by the mouse, appears then in the closed list box and is stored therein. In addition any value can be entered, which is then stored in the list box. If the list box contains a value, which is entered, then the background color of the list box changes to yellow as well as any boxes, which also display this value.

Drop-down list box with tooltip:

If the mouse cursor is placed on the drop-down list box, then the tooltip appears.

Drop-down list box with predefined elements:

The elements of the list are defined with the attribute values with the following syntax:

values="=List{Pair{angezeigterWert,gespeicherterWert}, Pair{angezeigterWert,gespeicherterWert}

Drop-down list box with fixed number of visible elements:

The drop-down list box shows with the attribute visibleItemCount in the expanded state only a fixed number of elements. By scrolling further elements in the drop-down list box can be reached.

Drop-down list box sets a single value automatically

Only one parameter value is determined by a formula. By using the attribute autoselect="true" this value is automatically displayed.

Drop-down list box with references to components:

The drop-down list box stores references to mechatronic or discipline-specific components. The elements of the list are defined by means of the formula language.

A formula, which is generated by EEC, is the value of the parameter, which checks, whether the component is actually available (see Value field in the figure above). If the component is not available, then the formula returns the value null.

The formula, generated by EEC (in the Value field of the parameter) is for the selected component of the example:

=if existsRef('Dokumentation_UI_ 
Configuration.Mechatronic.Documentation.Station') then ref('Dokumentation_UI_
Configuration.Mechatronic.Documentation.Station') else null endif.

Note:

This example is stored in the demo model Documentation_UI_Configuration. It is stored in Documentation_UI_Configuration.Mechatronic.Documentation.Station as Form-UI Dropdown.

Radio buttons horizontal:

Radio buttons are arranged horizontal by default. To force the horizontal arrangement the attribute style with the value horizontal is defined.

The displayed value and the value that is stored can be defined differently. For this purpose the following syntax is used:

<input type="radio"
values="=List{Pair{X,Y},Pair{X,Y}, Pair{X,Y}}"
receiver="parameter('Component')"/>

X = value to be displayed

X = value to be stored

Radio buttons with the same values for display and storage:

In the following example, radio buttons are defined that indicate the same value that is stored by the radio button. The number of radio buttons depends on the number of possible values of the parameter. In this example, the four cardinal points are predefined (North, East, South, West).

Radio buttons with different values for display and storage:

The following example shows how pairs of parameters are defined to display the values 1, 2 and 3, but save the values one, two and three.

Radio buttons vertical:

For vertical arranged radio buttons the attribute style with the value vertical is defined.

Check boxes:

Check boxes store the value of a parameter of type Boolean. Typically, the parameter name is shown beside the box.

Button with toggle function:

A button with toggle function (latching function) stores the value of a parameter of type Boolean. If the button is pressed, the parameter value is true and the button keeps the pressed appearance. Pressing the button again changes the parameter value to false and the button returns to the appearance of the initial state. The two states are displayed with different images in the button.

More: