(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Label

The Label Component is a text display component that allows for displaying formatted text, numbers, or dates with optional styling and conditional formatting. It supports various visual customizations like icons, tooltips, and different formatting options. The component can also display different text based on threshold rules applied to context data, making it ideal for showing status information or conditional messaging.

Properties

General Properties

displayName - Sets the display name of the component shown in the structure panel. For example, "Status Label" allows for easy identification of this label's purpose in the component structure, making it easier for developers to locate and work with this component.

Visual Properties

textTranslations - Sets the text to display in the label with support for multiple languages. For example, {"en-US": "Order Status", "de-DE": "Bestellstatus"} ensures proper localization of the label. This property supports template expressions to display dynamic content from the context, such as ${context.statusText}.
rules - Configures conditional formatting rules that change the label's text based on conditions. For example, you can set a rule to display "Overdue" in red when an orderDays value exceeds 30. Each rule contains a field name, operator, threshold value, and label translations to display when the condition is met.
fontSize - Sets the font size of the label text in pixels. For example, setting to "14" creates a label with standard-sized text, while "18" would create larger, more prominent text.
fontWeight - Determines the boldness of the label text. Options include "normal" (standard weight), "semi-bold" (moderately bold), or "bold" (heavily weighted). For example, "bold" can be used for emphasis on important status indicators.
widthAuto - Controls whether the label should automatically size to fit its content. When set to true, the label will take only as much width as needed for the text; when false, it will fill the available space in its container.
leftIcon - Specifies an icon to display to the left of the label text. For example, setting to "warning-triangle" would display a warning icon before the text, useful for alert or status indicators.
rightIcon - Specifies an icon to display to the right of the label text. For example, setting to "chevron-right" would display an arrow after the text, useful for navigation indicators.
ellipsisMode - Determines whether text that exceeds the available space should be truncated with an ellipsis (…). When enabled, long text will be cut off with an ellipsis rather than wrapping to multiple lines.
showTooltip - Controls whether a tooltip should be displayed when hovering over the label. When set to true, the tooltip will show the text specified in the tooltipText property.
tooltipText - Sets the text to display in the tooltip when hovering over the label. This is useful for providing additional information about what the label represents.
tooltipPlacement - Determines the position of the tooltip relative to the label. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the label.
tooltipDelay - Sets the delay in milliseconds before the tooltip appears when hovering over the label. For example, setting to "500" will delay the tooltip appearance by half a second.
type - Specifies the data type of the label content for proper formatting. Options are "text" (standard text display), "number" (numeric formatting), or "date-time" (date and time formatting). This affects how the content is formatted and displayed.
format - Determines the formatting pattern for date-time values when type is set to "date-time". For example, "dd.MM.yyyy" displays dates as "01.01.2024", while "HH:mm" displays times as "14:30". This property is only applicable when type is "date-time".
paddingClass - Configures spacing around the label using CSS classes. For example, "p-2" adds light padding on all sides of the component, improving its visual spacing within its container.

Authorization Properties

visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "publicInformation" restricts the label visibility to contexts where the public information policy is satisfied.

Visibility Properties

displayConditions - Defines conditions for displaying the component. This allows showing or hiding the label based on complex rules involving other form values, user roles, or application state. For example, the label might only be shown for orders with specific statuses.

Event Actions Properties

events - Configures the events that the component can trigger and respond to:
- ON_INIT: Triggered when the label component is initialized. Can be used to perform setup operations like setting initial context values.
- ON_DESTROY: Triggered when the label component is removed from the DOM. Useful for cleanup operations and releasing resources.

Testing Hooks Properties

id - Specifies a unique identifier for the component used for programmatic access. For example, "orderStatusLabel" enables targeted manipulation of this specific label component.
dataTestId - Sets the testing hook ID for automated testing. For example, setting to "order-status-label" allows test scripts to reliably locate this component.
enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the label can be highlighted during onboarding or tutorial flows to explain its meaning to users.
guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Order Status", "de-DE": "Bestellstatus"} provides clear identification during guided tours.
guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This label shows the current status of the order", "de-DE": "Dieses Label zeigt den aktuellen Status der Bestellung"} provides detailed context during guided tours.