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:

• Integer: +/-, only numbers without decimal points
• Double: +/-, numbers, decimal points, e

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.

<input type="text" receiver="this" key="name"/>

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.

<input type="text" receiver="this" key="name" readonly="true"/>

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.

<input type="text" receiver="this" key="comment" write="comment"/>

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.

<input hSizeMax="25" type="text" receiver="this" key="name"/>

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.

<input link="parameter('Place')"
font="Arial-regular-15"
type="text"
receiver="parameter('Place')"/>

Multiline input field for text:

The multiline input field for text is displayed as a rectangle, where a multiline text can be typed. This example shows a text, which is stored in the "Comment" field of the component.

<input type="text"
receiver="this"
key="comment"/>

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.

<input type="text"
receiver="this"
key="comment"
link="parameter('Place')"/>

DropDown list box:

The DropDown list box is displayed as a rectangle with an arrow symbol at the side. 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.

<input type="combo"
receiver="parameter('CardinalPoints')"/>

Editable DropDown list box:

The DropDown list box is displayed as a rectangle with an arrow symbol at the side. 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.

<input type="combo"
editable="true"
receiver="parameter('CardinalPoints')"/>

DropDown list box with tooltip:

When the mouse cursor is placed on the DropDown list box, the tooltip appears.

<input type="combo"
tooltip="Tooltip for combo box"
receiver="parameter('CardinalPoints')"/>

DropDown 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}

<input type="combo"
values="=List{Pair{1,'eins'},Pair{2,'zwei'}}"
receiver="parameter('Ort')"/>

DropDown list box with fixed number of visible elements:

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

<input type="combo"
visibleItemCount="2"
receiver="parameter('CardinalPoints')"/>

DropDown 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.

<input receiver="=parameter('Test')"
values="=List{Pair{'one','1'}}"
type="combo"
autoselect="true" ></input>

DropDown list box with references to components:

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

<input type="combo"
values="=List{Pair{'Station', this},Pair{'Documentation', mc}}"
receiver="parameter('Component')"/>

A formula, which is created 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, created 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.

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).

<input type="radio" receiver="parameter('CardinalPoints')"/>

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.

<input type="radio"
values="=List{Pair{1,'one'},Pair{2,'two'}, Pair{3,'three'}}"
receiver="parameter('Place')"/>

Radio buttons vertical:

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

<input type="radio" style="vertical" receiver="parameter('CardinalPoints')"/>

Check boxes:

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

<line><input type="check" receiver="parameter('found')"/>
<label>found</label></line>

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.

<input type="toggle"
	receiver="parameter('found')"
	img="=if $found = true
		then type('Documentation_UI_Configuration.ProjectLibrary.HelpObjects.
		Images.action').image
		else type('Documentation_UI_Configuration.ProjectLibrary.HelpObjects.
		Images.E_Mail').image
endif"/>

More:

Display of modified parameter values in radio buttons and drop-down list boxes