Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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.
  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11746-27071&t=iosNC2AkSTGs5lMh-1
  • Live style guide: https://e1-dev.k8s.myapp.de/edgeone-wiki/inspire-design-system-v2/feedback/progress_bar.html#guidelines

Guidelines

General Guidelines

  • Local navigation is only needed when dashboards require elements such as nodes, dependencies, favorites, or subdashboards. Simple applications do not require it:contentReference[oaicite:0]{index=0}.
  • The dashboard navigation boardlet must always remain the same in form and appearance within a breakpoint; it may not be changed:contentReference[oaicite:1]{index=1}.
  • Local navigation always controls only the current dashboard and can vary from dashboard to dashboard:contentReference[oaicite:2]{index=2}.
  • Local navigation tasks include navigating between dashboard nodes, filtering dependencies, and accessing subdashboards:contentReference[oaicite:3]{index=3}.

Guidelines visualized

Usage

  • Use the component to switch between a defined set of dashboards; specify the list and order via dashboards so users can move between views without returning to the library.
  • Match the navigation orientation to the available space by setting direction to "horizontal" for row-based navigation or "vertical" for column-based navigation.
  • If onboarding is needed, make the control discoverable by enabling the hotspot and supplying localized helper copy with enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.

Sizing & Layout

  • Choose direction: "horizontal" when there are few items and scanning should be left-to-right; choose "vertical" when items are numerous or labels are longer.
  • Add outer breathing room using paddingClass to prevent the control from touching adjacent UI.

Visibility & Authorization

  • Gate visibility for roles or policy sets with visibilityPolicySetId to avoid exposing navigation to users who shouldn’t access those dashboards.
  • Use displayConditions to hide the navigation in steps of a flow where it should not be available.

Paired Do & Don’t

DoDon’tArticle setting(s)
Define all destinations and their order once during initialization to keep navigation stable.Reorder items unpredictably during usage.dashboards, events.ON_INIT
Combine conditional rules into a single, mutually exclusive predicate to prevent flicker.Use overlapping displayConditions that rapidly toggle visibility.displayConditions

Accessibility

  • Announce the current location clearly through unambiguous dashboards[].name labels so the built-in highlight is understandable in both orientations.

...

  • Avoid color-only meaning by ensuring each destination has a distinct, descriptive label in dashboards[].name.
  • Present the control only when actionable by configuring visibilityPolicySetId and displayConditions.