DropDownBox

Expandable list of options from which only one can be selected.

Symbol
Menu ribbon	Start > Controls > Input/output > Lists > DropDownBox

The "DropDownBox" control element is used to select an element from a list. The selection list only opens on operator action. After the selection, the list entry is displayed in the input field of the DropDownBox. The DropDownBox has a connection to a process variable. The selection changes the process value of this variable. Conversely, the process value also controls the selection.

DropDownBox with open selection list and three list entries

The control element supports the following functionality:

Connection to a specific process variable for the data source
Display of an expandable selection list with list entries for selecting a variable value
Display of a language-switchable text for labelling
Display of a language-switchable text for the input field
Display of graphics in the control element
Connection to the user administration for blocking operability
Display of the background, the frame, the shadow, etc.
Color display of the background, frame, text, etc., also depending on the status of the control element

You can configure these functionalities via the properties in the Properties window when you select the control in the Designer or in the document outline. Whether a property is visible in the properties window depends on the style of the control.

By default, the control uses the "Plain.Default" style. Other system styles are available for the control in the"Style" property from the "General properties" category.

Certain properties may be missing in the Properties window for styled controls. For example, the"Colors" category is not available for controls in the system styles. These properties cannot be edited in the system styles.

You can also create your own styles for the control element. These styles are available for selection in the "Style" property after creation.

The control element consists of a number of other elements. Both the control itself and its elements can be configured via the properties of the control. Properties for a sub-element of the control can usually be found in the category that bears the name of this element.

Example: The properties for configuring the "Label" element can be found in the Properties window in the "Label" category when you select the control element in the Designer or in the document outline.

The DropDownBox and its elements

By default, the DropDownBox contains three list entries (elements of the type "DropDownBoxItem").

To add further DropDownBoxItems to the selection listor remove existing ones, call up the Collection Editorvia the button behind the "MenuItems" property.

The DropDownBoxItem supports the following functionality:

Link via the "Value" property to a value of the process variable specified in the DropDownBox. The list entry selected by the operator at runtime writes this value to the variable. The variable value set by the PLC in turn selects the list entry linked to this value.
Display of a language-switchable text in the control element
Display of a graphic in the control element
Connection to the user administration for blocking operability

The DropDownBox contains an input field that displays the selected list entry. If no list entry is selected at runtime, the text specified for the input is displayed. This text is defined via the "InputText" or "LocalisableInputText" properties in the "Input" category.

If the style of the DropDownBox is reset, the following can also be configured via the properties of the "Input" category:

Width and height of the "InputContainer" element (InputContainerWidth, InputContainerHeight)
Width and height of the "Input" element (InputWidth, InputHeight). The height is also automatically adopted for the higher-level "InputFieldContainer".
Outer distances of the "InputField" element (InputFieldMargin). The values for left and right automatically set the inner distances for the "Input" element.

You can use the value for Left of the "InputFieldMargin" property to move the input further to the right.

InputFieldMargin for left of 8 px (default setting) and 24 px
Border around the "Input" element (InputBorderRadius, InputBorderStyle, InputBorderWidth)
Text font and line height in the "InputText" element (InputFontClass, InputTextContrast, InputUppercase, InputFontSize, InputFontWeight, InputLineHeight)

The following illustration shows how the elements are structurally connected and which properties affect which element:

The InputContainer and its elements