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

Dashboard Navigation

The Dynamic Dashboard Navigation Component provides a visual navigation interface for switching between dashboards within an application. It renders a progress-state style navigation interface that allows users to move between dashboards either horizontally or vertically. This component highlights the current dashboard and enables seamless navigation through multiple connected dashboards without having to return to a dashboard library.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Process Dashboards" allows for easy identification of the navigation's purpose in the component structure, making it easier for developers to locate and work with this specific dashboard navigation.

Visual Properties

• direction - Determines the orientation of the dashboard navigation steps. Options include "horizontal" (steps displayed in a row) or "vertical" (steps displayed in a column). For example, choosing "horizontal" creates a navigation bar that spans across the top of a container, while "vertical" creates a navigation panel that runs down the side, providing different layout options based on available space and design preferences.

• dashboards - Configures the list of dashboards to include in the navigation and their order. This accepts an array of dashboard objects, each containing an ID and name. For example, [{"id": "dashboard-1", "name": "Overview"}, {"id": "dashboard-2", "name": "Details"}] creates a two-step navigation between these dashboards, with the names displayed as the navigation labels.

• paddingClass - Configures spacing around the dashboard navigation using CSS classes. For example, "p-4" adds medium padding on all sides of the component, improving its visual spacing within its parent container.

Event Actions Properties

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the dashboard navigation component is initialized. Can be used to perform setup operations when the navigation first appears, such as loading user preferences or determining the starting dashboard.
  • ON_DESTROY: Triggered when the dashboard navigation 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 "analyticsDashboardsAccess" restricts the dashboard navigation to users with specific analytics permissions, allowing for role-based control of navigation access.

Visibility Properties

• displayConditions - Defines conditions for displaying the component. This allows showing or hiding the dashboard navigation based on complex rules involving form values, user roles, or application state. For example, the navigation might only be shown when a specific module is active or when the user has completed certain preliminary steps.

Testing Hooks Properties

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

• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the dashboard navigation can be highlighted during onboarding or tutorial flows to guide users on how to navigate between different dashboard views.

• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Dashboard Navigation", "de-DE": "Dashboard-Navigation"} provides clear identification during guided tours.

• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Use this navigation bar to switch between different dashboard views", "de-DE": "Verwenden Sie diese Navigationsleiste, um zwischen verschiedenen Dashboard-Ansichten zu wechseln"} provides detailed context during guided tours.