Page History
...
| Token | Description |
|---|---|
| displayName | Display name of the component in the structure panel |
| direction | Layout direction of the states (horizontal or vertical) |
| titleField | Field in data source containing the state title |
| subtitleField | Field in data source containing the state subtitle |
| stateIdField | Field in data source serving as unique identifier |
| currentStateField | Field that marks the current active state |
| sortOrderField | Field that defines order of states |
| readonly | Controls whether states are interactive or display-only |
| statusRules | Rules that define visual status of each state |
| informationConfigs | Configures additional information items per state |
| states | Defines static states when not using data source |
| paddingClass | CSS classes for spacing around the component |
| enableStaticData | Toggles static vs. dynamic data mode |
| getElementsDataSourceId | Data source ID for fetching states |
| getEntityCollectionHttpRequestParametersMap | HTTP request parameters for fetching data |
| events | Configurable component events |
| ON_INIT (Events) | Event triggered when component initializes |
| ON_DESTROY (Events) | Event triggered when component is removed |
| visibilityPolicySetId | Policy set controlling component visibility |
| displayConditions | Conditions for showing the component |
| id | Unique identifier for programmatic access |
| dataTestId | Testing hook ID for automated testing |
| enableAsHotspot | Enables component as a guided tour hotspot |
| guidedTourHotSpotTitle | Title of guided tour hotspot |
| guidedTourHotSpotDescription | Description of guided tour hotspot |
...
- id - Specifies the unique identifier for the component, used for programmatic access. Example: "orderProcessingStates".
- dataTestId - Sets the testing hook ID for automated testing. Example: "order-process-states-component".
- enableAsHotspot - Enables the component as a guided tour hotspot. When set to true, the component can be highlighted during guided tours. Example: true.
- guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. Example: {"en-US": "Order Process", "fr-FR": "Processus de commande"}.
- guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. Example: {"en-US": "Track the progress of your order through these states", "fr-FR": "Suivez la progression de votre commande à travers ces états"}.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-45017&t=ftfrOGkPzlG2GaTo-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id7/7-progress-states
Guidelines
Usage
- visualize progression through discrete steps using either dynamic or static sources. configure with
enableStaticData,states, orgetElementsDataSourceIdandgetEntityCollectionHttpRequestParametersMap.
[NO DATA AVAILABLE]
Accessibility
...
- indicate the active step by mapping the data field that marks it as current via
currentStateField. - present key labels by mapping titles and subtitles from your data (
titleField,subtitleField) or, in static mode, viastates[].titleTranslationsandstates[].subtitleTranslations. - add compact, per-state context (dates, metrics) using
informationConfigs(supportsiconNameand localized text).
Sizing & Layout
- switch between left-to-right and top-down presentations using
direction. - tune outer spacing with
paddingClassto keep content readable. - keep text succinct by sourcing only short labels via
titleField/subtitleField(or concisestates[].*Translations) so step headers remain scannable.
States & Feedback
- drive visual status per step using
statusRulesand resolve conflicts with rulepriority. - avoid color-only meaning by pairing status with short, noncritical text via
informationConfigs.
Interactions & Events
- enforce view-only timelines by setting
readonly: truewhen no actions are expected.
Visibility & Authorization
- hide or show the component based on app state via
displayConditions. - restrict visibility for roles/entitlements via
visibilityPolicySetId.
Content & Localization
- localize all user-visible copy:
states[].titleTranslations,states[].subtitleTranslations,informationConfigs[].text,guidedTourHotSpotTitle,guidedTourHotSpotDescription.
Dos & Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
map currentStateField to the data flag that marks the active step so users always see “where they are.” | infer the active step implicitly from order or status alone. | currentStateField |
use sortOrderField (or array order in states) to keep the sequence stable across refreshes. | rely on backend default ordering that can change between calls. | sortOrderField, states[] |
keep process flows readable by choosing the appropriate direction. | force horizontal layout for lengthy, top-down processes. | direction |
| provide concise titles/subtitles from data mappings or translations. | place long paragraphs in step headers. | titleField, subtitleField, states[].titleTranslations, states[].subtitleTranslations |
show extra, noncritical details with informationConfigs (e.g., updated times). | encode critical instructions only inside the extra info. | informationConfigs[] |
drive status with explicit statusRules and set rule priority to avoid conflicts. | combine overlapping rules and hope the renderer resolves them. | statusRules |
make timelines non-interactive when appropriate by setting readonly: true. | leave interactive affordances enabled when no actions exist. | readonly |
| gate visibility with policies or conditions. | show sensitive progress to everyone and rely on copy to warn. | visibilityPolicySetId, displayConditions |
| add onboarding hints using guided hotspot fields. | rely on color or status names alone to teach the UI. | enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription |
| maintain readable spacing around the control. | let the component touch neighboring elements. | paddingClass |
Accessibility
- deterministically identify the active step for assistive technologies using
currentStateField. - ensure status is not color-only by pairing visual status with short text lines configured in
informationConfigs(driven bystatusRules). - where onboarding is necessary, use localized hotspot copy to guide users (
enableAsHotspot,guidedTourHotSpotTitle,guidedTourHotSpotDescription). - keep titles and subtitles short and descriptive for clear announcements (
titleField,states[].titleTranslations,states[].subtitleTranslations). - avoid rapid status changes by using unambiguous predicates and explicit
priorityinstatusRules. - localize supplemental information for clarity across locales (
informationConfigs[].text).
