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

Content Switch

The Dynamic Content Switch component is a navigation control that allows users to switch between different views or states in your application. It displays a series of clickable buttons arranged horizontally, where each button can trigger specific actions when clicked. This component is ideal for implementing tabbed interfaces, wizard-style navigation, or toggle functionality between different content sections.

Properties

General Properties

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

Visual Properties

• contentSwitchButtons - Defines the collection of buttons displayed in the content switch. Each button has properties including text translations, events, and a unique ID. For example, [{textTranslations: {"en-US": "Details", "fr-FR": "Détails"}, id: "details", events: [...]}, {textTranslations: {"en-US": "History", "fr-FR": "Historique"}, id: "history", events: [...]}] creates a two-button content switch with localized labels.

• activeButtonIndicator - Specifies a context key to determine which button should be active by default. For example, setting this to "activeTab" will make the component look for a value with this key in the component's context and activate the button with the matching ID. This enables dynamic activation of specific tabs based on application state.

• paddingClass - Configures the padding around the component using CSS classes. For example, "p-4" adds medium padding on all sides of the component, while "px-3 py-2" adds different horizontal and vertical padding.

Event Actions Properties

• events - Configures the events that the component can trigger and respond to. Supports standard lifecycle events:
• ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations like loading default data or setting initial states.
• ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization Properties

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "managersOnlyPolicy" restricts the content switch to users with manager privileges, preventing unauthorized access to navigation options.

Visibility Properties

• displayConditions - Defines conditions for displaying the component based on context values. This allows the content switch to be shown or hidden dynamically depending on the state of other components or application data.

Testing Hooks Properties

• id - Specifies a unique identifier for the component used for programmatic access. For example, "navigationContentSwitch" enables targeted manipulation of this specific component in scripts or for automated testing.

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "main-navigation-tabs" allows test scripts to reliably locate this component during test execution.

• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this component can be highlighted in guided tours to help users understand its navigation functionality.

• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot with support for multiple languages. For example, {"en-US": "Navigation Options", "fr-FR": "Options de Navigation"} ensures proper localization of the hotspot title.

• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot with language support. For example, {"en-US": "Use these tabs to navigate between different sections of the application", "fr-FR": "Utilisez ces onglets pour naviguer entre différentes sections de l'application"} provides localized guidance about how to use the component.

Button Events

Each button in the Content Switch component can trigger the following event type:

• ONCONTENTSWITCH_CLICK - Triggered when a button is clicked. This event can be used to perform actions such as changing the displayed content, updating application state, or triggering navigation. Each button can have its own set of actions configured for this event type.

Example Usage Scenarios

1. Tab Navigation: Create a set of tabs to switch between different views in a single page application.

2. Form Wizard: Implement step indicators for multi-step forms, showing the current step and allowing navigation between completed steps.

3. View Toggles: Create buttons to switch between different visualization modes, such as "Grid View" vs "List View".

4. Language Selector: Implement a language selection interface with buttons for each supported language.

Technical Details

When a button is clicked, the component:

1. Visually activates the selected button
2. Executes any actions configured for the ONCONTENTSWITCH_CLICK event for that specific button
3. Can update the context with the selected button's ID if properly configured in those actions

The component can also automatically select a button on initialization if the activeButtonIndicator property is set and a matching value is found in the context.