(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Boardlet
Overview
- Dynamic Boardlet is automatically created when a boardlet from the app boardlet library is used.
- It provides a consistent framework with header, body, and footer sections.
- Each section can hold other dynamic components.
Specs
General Tokens
| Token |
Description |
| boardletNameTranslations |
Localized boardlet name. |
| boardletType |
Visual style: Normal or Ghost. |
| layout |
Element arrangement: horizontal or vertical. |
| scrollingEnabled |
Enables internal scrolling. |
| showHeader |
Shows the header section. |
| showFooter |
Shows the footer section. |
| elements |
Defines header, body, and footer components. |
| visibilityPolicySetId |
Visibility controlled by policy set. |
| dataTestId |
Testing hook identifier. |
| events |
Configures component events. |
| ON_INIT (Events) |
Triggered on initialization. |
| ON_DESTROY (Events) |
Triggered on removal. |
Boardlet Sections Tokens
| Token |
Description |
| titleTranslations/title |
Main heading text; translatable. |
| moreIconVisible |
Shows overflow menu icon. |
| leftIcon |
Optional left icon. |
| rightIcon |
Optional right icon. |
| elements |
Components placed in the header. |
| layout |
Header element layout. |
Structure
(Configured in General Properties)
- displayName – sets the display name of the component shown in the structure panel. For example,
"Customer Dashboard" allows for easy identification of the boardlet’s purpose in the component structure.
Header
Appears at the top of the boardlet and typically includes:
- titleTranslations/title – the main heading text for the boardlet, which can be localized through translations.
- moreIconVisible – controls whether an overflow menu icon appears in the header.
- leftIcon – an optional icon displayed at the left side of the header.
- rightIcon – an optional icon displayed at the right side of the header.
- elements – an array of components to display in the header, typically including action icons or menus.
- layout – controls whether elements are arranged horizontally or vertically within the header.
Body
The body section is the main content area of the boardlet and can contain any combination of components:
- elements – an array of dynamic elements to be displayed in the body section.
- layout – controls whether elements are arranged horizontally or vertically within the body.
Footer
The footer section appears at the bottom of the boardlet and typically includes action buttons:
- elements – an array of components to display in the footer, typically button components.
- layout – controls whether elements are arranged horizontally or vertically within the footer.
Styling
(Configured in Visual Properties)
- title – the shown title of the element.
- boardletNameTranslations – defines the displayed name of the boardlet in different languages. Example:
{"en-US": "Customer Insights", "de-DE": "Kundeneinblicke"} ensures proper localization of the boardlet name.
- layout – determines how elements are arranged within the boardlet. Options include horizontal (elements side by side) or vertical (elements stacked).
- scrollingEnabled – enables internal scrolling for the boardlet content. Content exceeding the height becomes scrollable.
- showHeader – controls the visibility of the boardlet header section.
- showFooter – controls the visibility of the boardlet footer section.
Actions & Variants
(Configured in Events)
- events – configures the events that the component can trigger and respond to.
- ON_INIT – triggered when the boardlet component is initialized. Can be used to perform setup operations like loading initial data.
- ON_DESTROY – triggered when the boardlet component is removed from the DOM. Useful for cleanup operations and releasing resources.
(Configured in Visual Properties)
- boardletType – sets the visual style of the boardlet. Options include Normal (standard bordered container) or Ghost (borderless container).
Tests
(Configured in Testing Hooks)
- dataTestId – sets the testing hook ID for automated testing. For example, setting it to
"customer-dashboard-boardlet" allows test scripts to reliably locate this component.
Authorization
(Configured in Authorization)
- visibilityPolicySetId – determines the visibility of the component based on specified policy sets. For example, setting it to
"adminOnlyPolicy" restricts the boardlet to users with admin privileges.
Guidelines
Header / Toolbar
- Every boardlet must always include a toolbar on the right side.
- The toolbar can exist in two variations:
- First actionbar – actions that affect the boardlet itself.
- Second actionbar – actions that affect the content inside the boardlet. Always separated by a dividing line and cannot exist alone.
- Limit toolbars to three visible actions. Additional actions must be grouped into an overflow menu under the “more” icon.
- The “more” action is mandatory in every boardlet toolbar.
Footer
- The footerbar always controls the workflow of the boardlet.
- Workflow-related actions are always placed at the bottom right. Hierarchy flows from bottom right to bottom left.
- Allowed footerbar layouts:
- Tabs only.
- Tabs with buttons (maximum two).
- Buttons only (maximum two).
- Tabs with actionbar (secondary option, e.g., kiosk mode).
- The footerbar has a fixed height and may never be multiline.
Accessibility
[NO DATA AVAILABLE]