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

Boardlet

The Dynamic Boardlet Component is a special container element created always when boadlet in app boardlet library is created. It provides a consistent framework with header, body, and footer sections that can contain other dynamic components. 

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.

Visual Properties

• boardletNameTranslations - Defines the displayed name of the boardlet in different languages. For example, {"en-US": "Customer Insights", "de-DE": "Kundeneinblicke"} ensures proper localization of the boardlet name.

• boardletType - Sets the visual style of the boardlet. Options include "Normal" (standard bordered container) or "Ghost" (borderless container). For example, setting to "Ghost" creates a seamless integration with the surrounding UI.

• layout - Determines how elements are arranged within the boardlet. Options include "horizontal" (elements arranged side by side) or "vertical" (elements stacked). For example, using "vertical" provides a clean top-to-bottom flow of content.

• scrollingEnabled - Enables internal scrolling for the boardlet content. When enabled, content that exceeds the boardlet's height will become scrollable, maintaining a consistent size for the boardlet itself.

• showHeader - Controls the visibility of the boardlet header section. When enabled, displays the title area at the top of the boardlet which can contain a title and optional action icons.

• showFooter - Controls the visibility of the boardlet footer section. When enabled, displays an area at the bottom of the boardlet, typically used for action buttons like "Submit" or "Cancel".

• elements - Defines all sections of the boardlet including header, body, and footer components. This array contains the component specifications for each section with their own properties and child elements.

Authorization

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the boardlet to users with admin privileges.

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.

Event Actions

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

Boardlet Sections

Boardlet Header

The header section 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.

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

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