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

Accordion item

he Dynamic Accordion Item component is a collapsible section that functions as a child element within a Dynamic Accordion container. Each accordion item represents a single expandable/collapsible segment with its own title, content area, and layout configuration. When expanded, it displays its content, and when collapsed, only the header is visible. This component is designed to organize content in a space-efficient manner by showing only the relevant information based on user interaction.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Product Details" allows for easy identification of this accordion item in the component structure.

Visual Properties

• titleTranslations - Sets the title text displayed in the accordion item header with support for multiple languages. For example, {"en-US": "Product Specifications", "de-DE": "Produktspezifikationen"} ensures proper localization of the header text.

• disabled - Controls whether the accordion item can be expanded or collapsed by users. When set to true, the accordion item appears grayed out and cannot be clicked, useful for showing content that is currently unavailable.

• elements - Contains all components to be rendered within this accordion item when it is expanded. This array can include any dynamic components like forms, fields, images, or other UI elements that form the content of the accordion item.

• layout - Defines the layout arrangement of elements within the accordion item. Options include "horizontal" (elements arranged side by side) or "vertical" (elements stacked on top of each other). For example, using "vertical" layout provides a clean presentation for form fields in an accordion item.

Authorization

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

Testing hooks

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "product-details-accordion-item" 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 accordion item component is initialized. Can be used to perform setup operations like loading default data or setting initial states.
  • ON_DESTROY: Triggered when the accordion item component is removed from the DOM. Useful for cleanup operations and releasing resources.