Form elements
All form elements (elements for short) have at least the following configuration options:
(1) Within the form, unique element ID (in this example: '6') and element type (e.g. Combobox, Text input, Label...).
(2) Data field: The path over which the element reads and writes its data (relative to the data field of the parent element).
(3) Label: The label of the element (see also Beschriftungen).
(4) Tooltip: A tooltip text, which is displayed when the mouse cursor is positioned on the element (see also Labels).
Elements with tooltips are drawn accordingly for the form operator: 
. This can be (de)activated via the element property Indicate tooltip (4b).
►NOTE◄ Tooltip indicators can also be generally disabled in the form properties. In this case, the setting of a single element no longer matters.
(5) Show label: Selection as to whether the label of the element should be displayed in the form or not.
(6) Active: Selection as to whether the element is active or not. What effects the inactivity of the element depends on the element type. Text fields can no longer be filled in or entered, buttons can no longer be pressed, etc.
(7) Required: Selection as to whether the element is a required field or not. The form or a container can only be validated successfully if all required fields are filled in.
(8) Visible: Indicates whether the element is visible or not. ►CAUTION◄ Also invisible elements are validated (regarding required field, validator) as long as they are set to 'active'.
(9) Read Only: Selection as to whether the element is read-only. For example, for input fields, prevents the user from writing to the field without having to set it to inactive.
(10) View type: Provides further display options of the same component. Which ones are offered here depends on the respective element type. For example, a combobox can also be represented as options in the form of radio buttons. The data model of the element remains unchanged.
(11) Shows all references to the selected element. The configuration of behaviours/actions, validators or calculations can refer to elements.
(12) Jumps to the parent element, if present.
(13) Displays more details about the element (e.g. template ID and XML ID).
The Behaviour (A) tab: Here, behaviour logics can be stored for the element (e.g. perform an action when the value is changed, etc.). See Behaviour types and actions.
Labels
Whenever the above shown combination of the globe button with a text box appears in the property editor, the reference to a resource in the Localization can be taken as an alternative to the direct input in the text box.
If the value has a resource or a default value as its source, the globe icon is colored accordingly.
If the language of the editor (in the ribbon above) is changed, a manually entered value influences the translation for the set language. This should be used in general.
Example
In the localization there is an entry for the resource bundle 'Date type' and resource name 'DEPARTURE_ACTUAL'. The respective localizations are "Abfahrtsdatum tatsächlich" and 'Departure date actual'.
If the use of a specific resource is desired, it can be selected by clicking on the globe icon (2 below). The input field offers the value translated in the currently selected language.
When selecting an element in the list, the corresponding bundle and resource name are automatically displayed. By clicking on the menu icon (1), the bundle and resource name can also be set manually.
If a resource from the localization management was stored as a label, the globe symbol (2) is displayed in color.
If another language would be set now (for example at the ribbon bar above), this field will be translated automatically and immediately.
Size specifications (Category layout)
In addition, some elements offer the possibility to set the Width/Min. Width and/or the Height/Min. Height to configure:
Three modes are supported:
Fix: The size is specified as a fixed value in pixels.
Percent: The size is given as a percentage value.
Here the dimension is calculated relative to the parent element.
►CAUTION◄ Should a parent element container use an automatic size (Auto), this can lead to layout problems, since the size is then mathematically undefined.Relative to font size: The size is interpreted as a factor to the current font size (e.g. for font size 14px the value 2 would provide 28px as measurement).
Auto: The size automatically adjusts to the content.
More details and layout examples can be found in the chapter Form layout.
Custom design with CSS classes
With the help of the layout property 'CSS Class' one or more (separated by spaces) CSS classes can be assigned to an element.
The magnifying glass icon can also be used to search for CSS classes contained in any CSS selectors (stylesheets). A preview is also displayed.
Already predefined design templates are offered under the name pattern 'lb-style' and 'lb-effect'.
Examples:
lb-effect-rotate-z-2-linear-infinite Starts an unlimited rotation of the element around the z-axis
lb-style-section-strong Causes an element container to appear as a highly highlighted section
With the action "CSS Class" CSS classes can also be dynamically added or removed.
Using the styles' expert settings, these classes can be extended or overwritten with the help of CSS selectors, or new custom classes can be defined via the '.classname' CSS selector.
Once the style is loaded (reload client or 'preview'), the changes are applied.
Value transformation
An adapter layer for manipulating read and write element data.
For details, see sub-chapter Value transformation.