Label
Label elements are mainly used in forms to display label texts such as headings, notes, explanations, or similar.
The displayed text is entered directly in the Label property, which can be language-specific in the form design or localized by references to Localization entries (or Company specific localization).
Portals provide the ability to bind a label element to a Data field so that the label reflects the appropriate content at runtime. Assigning data by data field or via an action converts the data to a text for rendering.
By default, the caption of a label is simultaneously bound to its value, but not vice versa. By disabling the Link label with value option, this value-to-label binding can be removed.
If this option is disabled, a label element can also display a common caption, while the actual element value is displayed as a separate caption.
In this case, an additional Default value field is available, which can also be defined in a language-dependent manner.
The combination of Link label with value and Show label can result in different display types:
|
Configuration |
Appearance |
|
Show label: No Label: Shipment no. Link label with value: Yes |
|
|
Show label: Yes Label: Shipment no. Link label with value: Yes |
|
|
Show label: Yes Label: Shipment no. Link label with value: No |
|
|
Show label: Yes Label: Shipment no. Link label with value: No Default value: 12345 |
|
►NOTE◄ In contrast to the label, the default value is also written to the form data if a data field is defined (similar to other elements e.g. Text field).
Tip: By enabling the Enforce line height if empty option, the label always takes up one line of space and does not collapse to height 0.
In this way, layouts that are aligned with each other can be maintained.
Example:
|
Without 'Enforce line height if empty' |
With 'Enforce line height if empty' |
|
|
|
Text content via calculation field
By activating the Calculation field option in the section of the same name, the text content of the label can be derived using a Berechnungsausdrücke.
►NOTE◄ In contrast to other elements, the derived value is not written back to the form data. Therefore, for example, date values can be converted into another format without manipulating the element data..
Font settings
In the Layout properties rubric, stylistic settings can be made for the text content's appearance.
|
Property |
Effect |
|
|
Defines the font color. Blank means the default. Using the color picker, either colors can be selected from the Styles, |
|
Font size |
Sets the font size of the label. The following modes are distinguished:
|
|
Underlined |
Influences the appearance of the font accordingly. |
|
Text alignment |
Specifies whether the text content of the label is left-justified, centered, or right-justified. |
|
Word wrap |
Controls the word wrap behaviour of the label content.
|
HTML markup support
The text area of the label (not the element's caption) supports rendering HTML markup. All harmless layout definitions are supported.
Questionable content such as Javascript code or some style sheet properties are removed for security reasons.
HTML source code with simple markups, which can also contain, for example, links (<a href="http://[...]" target="_blank">MARKUP TEXT</a>), images (<img>), tables (<table></table>). Since the labels are handled in a language-specific manner in the form, a language-specific source text can also be stored, so that not only the visible label text, but also the links or references to images can be language-specific. Accordingly, the source texts can also be stored in localization.
The Show label option must be disabled
Interactions
'Clicking' is the only interaction supported by the label element. If a behaviour with the Click trigger is configured, the mouse cursor changes to the 'hand' symbol when the label is accessed, provided that the Show label option is deselected. Without this option, the area below the displayed text is considered 'clickable', which is only visually defined in the form design.
In the following example, clicking on the heading of a 'Brief instructions' takes the user to a more detailed description. A Tooltip has also been defined for the label, which appears when the mouse cursor is close to the area of the label.
Both the heading and the short list below are enriched here with HTML markup within the caption, for example to determine the font size of the heading (<h4>...</h4>) or the bullet point list (<ul><li>...</li>...</ul>). The previous section explains the details.
►NOTE◄ HTML markup also offers the possibility to provide additional interactions starting from a label text, for example, by including anchor elements (<a href="..." target="_blank">click here!</a>).
In the following example, the clickable content of the anchor element is defined as a button (<button>...</button), so that it appears within the caption that can be used to call up the link of the anchor. However, this always activates the Click trigger, so that any configured behaviour of the label element is triggered in parallel with the retrieval of the web resource.
|
Configuration |
Appearance at runtime |
|
Label property of the label element: |
|
Display 'Tag' type
Displays the label element visually as a tag. In addition, a 'tag icon' can be defined in the 'Common' section.
Tip: With the help of the Set icon URL and Set color actions, the icon and the color of the tag can be dynamically changed accordingly.
Tag contrast color mode
The contrast mode of the tag color (background v.s. font color) is set by default via the Styles entry "tagContrastColorMode", but can be overridden in the layout section per label element.
Possible values:
Empty – value is taken from the Styles entry "tagContrastColorMode".
Default – color is set as the background color. The font color is black or white, depending on the hue of the background.
Foreground – color is set as background color. The font color is dynamically calculated as a lighter/darker version of the background color.
Background – color is set as the font color. The background color is dynamically calculated as a lighter/darker version of the font color.
Examples for the contrast mode (foreground v.s. background):
|
Color value |
Default |
Foreground |
Background |
|
#980F45 |
|
|
|
|
#23d323 |
|
|
|
|
#40b3a2 |
|
|
|
