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

Vertical tab panel

Vertical Tab Panel is a container component that organizes content into multiple vertically arranged tabs. It provides an intuitive navigation interface for grouping related content while maintaining a clean, structured layout. The tabs are displayed along the left side of the panel, making it ideal for applications with multiple sections or complex forms.

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Settings Panel" allows for easy identification of the tab panel's purpose in the component structure.

• id - Specifies a unique identifier for the component used for programmatic access. For example, "userSettingsTabPanel" enables targeted manipulation of this specific vertical tab panel through actions or events.

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "settings-tab-panel" allows test scripts to reliably locate this specific component.

Visual Properties

• elements - Defines the tabs and footer contained within this panel. This array contains DynamicVerticalTabComponent objects for tabs and optionally a DynamicVerticalTabPanelFooterComponent for footer content. Each tab needs a tabNameTranslations property and can contain nested components.

• paddingClass - Configures internal spacing around the tab panel using CSS class naming. For example, "p-4" adds medium padding on all sides, while "pt-2 pb-4" adds small padding at the top and larger padding at the bottom.

• visibilityPolicySetId - Determines the visibility of the component based on policy sets. For example, setting to "adminOnlyPolicy" ensures the tab panel only appears for users with admin privileges.

Tab Configuration

Each tab in the elements array has several properties:

• tabNameTranslations - Sets the text displayed on the tab label with support for multiple languages. For example, {"en-US": "Personal Information", "de-DE": "Persönliche Informationen"} provides localized tab names.

• disabled - Determines whether the tab can be selected by users. When set to true, the tab appears grayed out and cannot be clicked, useful for indicating content that is temporarily unavailable.

• showIcon - Controls whether an icon is displayed next to the tab name. When enabled, shows the icon specified by the iconName property.

• iconName - Specifies which icon to display when showIcon is true. For example, "user" displays a user icon next to the tab label, providing visual cues about the tab's content.

Footer Configuration

The panel can include a footer section that remains visible regardless of which tab is selected:

• DynamicVerticalTabPanelFooterComponent - A special component that can be included in the panel's elements to create a persistent footer area. This is commonly used for action buttons like "Save", "Cancel", or other controls that apply to all tabs.

Event Actions

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the vertical tab panel component is initialized. Can be used to perform setup operations like loading initial data.
  • ON_DESTROY: Triggered when the vertical tab panel component is removed from the DOM. Useful for cleanup operations when navigating away from a page.

Component Methods

• setActiveTab - Programmatically activates a specific tab by its ID. This action accepts a parameter with the key of the tab to activate. For example, calling setActiveTab with {"key":"profileTabId"} will switch to the tab with that ID.