(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Content
Overview
- The Content Component is a versatile UI element.
- It embeds and displays other content, such as boardlets, inside the application.
- It supports conditional rendering based on context values.
- It allows customized sizing of the embedded content.
- It enables reuse of content across multiple areas while staying context-aware.
Specs
Tokens
| Token |
Description |
| displayName |
Display name shown in the structure panel. |
| contentId |
ID of the boardlet to display. |
| rules |
Conditional display rules based on context data. |
| customHeight |
Custom height for the content container. |
| paddingClass |
CSS padding classes around the component. |
| events |
Configurable component events. |
| ON_INIT (Events) |
Event triggered when the component is initialized. |
| ON_DESTROY (Events) |
Event triggered when the component is removed. |
| visibilityPolicySetId |
Controls visibility through policy sets. |
| displayConditions |
Defines conditions for showing or hiding the component. |
| id |
Unique identifier for programmatic access. |
| dataTestId |
Identifier for automated testing. |
| enableAsHotspot |
Enables the component as a guided tour hotspot. |
| guidedTourHotSpotTitle |
Title for the guided tour hotspot. |
| guidedTourHotSpotDescription |
Description for the guided tour hotspot. |
Structure
- The Content Component embeds other content, such as boardlets, inside the application.
(Configured in General Properties)
- displayName – Sets the display name of the component shown in the structure panel. For example, "Customer Dashboard Content" allows for easy identification of the component's purpose in the component structure, making it easier for developers to locate and work with this specific content container.
(Configured in Visual Properties)
- contentId – Specifies the ID of the boardlet to display within this component. For example, setting it to "9f19d7de-d089-46c6-9814-68e8f52b6130" will load and render the boardlet with that ID. This allows you to create content once and reuse it in multiple places throughout your application.
- rules – Configures conditional display rules that determine whether the content is shown based on context data. For example, you can set up a rule that only shows an approval form when a status equals "pending_approval". Each rule contains fields for a field name, operator, and threshold value to be evaluated against the context.
Styling
(Configured in Visual Properties)
- customHeight – Sets a custom height for the content container. This can be defined using pixels, percentages, or other CSS height values. For example, "400px" creates a fixed height container, while "100%" makes the content fill its container's height. This allows for consistent sizing across different display contexts.
- paddingClass – Configures spacing around the content using CSS classes. For example, "p-4" adds medium padding on all sides of the component, improving its visual spacing within its parent container.
Actions & Variants
(Configured in Event Actions Properties)
- events – Configures the events that the component can trigger and respond to:
- ON_INIT – Triggered when the content component is initialized. Can be used to perform setup operations when the content first appears, such as loading additional data or setting initial states.
- ON_DESTROY – Triggered when the content component is removed from the DOM. Useful for cleanup operations and releasing resources, such as closing connections or clearing cached data.
(Configured in Visibility Properties)
- displayConditions – Defines conditions for displaying the component. This allows showing or hiding the entire content component based on complex rules involving form values, user roles, or application state. For example, the content might only be shown when a certain workflow step is active or when the user belongs to a specific department.
Tests
(Configured in Testing Hooks Properties)
- id – Specifies a unique identifier for the component used for programmatic access. For example, "userProfileContent" enables targeted manipulation of this specific content component through scripts or automated tests.
- dataTestId – Sets the testing hook ID for automated testing. For example, setting to "user-profile-content" allows test scripts to reliably locate this component during automated testing.
- enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the content component can be highlighted during onboarding or tutorial flows to explain important sections to new users.
- guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "User Profile", "de-DE": "Benutzerprofil"} provides clear identification during guided tours.
- guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This section displays user profile information", "de-DE": "Dieser Abschnitt zeigt Benutzerprofilinformationen an"} provides detailed context during guided tours.
Authorization
(Configured in Authorization Properties)
- visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "contentAccessPolicy" restricts the content visibility to users with specific access permissions, allowing for role-based display of sensitive information.
Guidelines
[NO DATA AVAILABLE]
Accessibility
[NO DATA AVAILABLE]