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

Content

The  Content Component is a versatile UI element that embeds and displays other content (such as boardlets) within your application. It enables conditional rendering based on context values and supports customized sizing. This component serves as a powerful way to reuse content across multiple areas of your application while maintaining context-awareness.

Properties

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.

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.

• 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.

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.

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.

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.

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.