The Dynamic Progress States component displays a series of connected states showing progression through a process, workflow, or journey. It can visualize status information either from a data source or with static configuration, and supports both horizontal and vertical layouts with customizable appearance for each state.
"OrderProcessingStates".direction - Determines the layout direction of the progress states. Options include "horizontal" (states arranged side by side) or "vertical" (states stacked vertically). Horizontal layout works well for process flows that move from left to right, while vertical is suitable for top-down workflows. Example: "horizontal".
titleField - Specifies the field name in the data source that contains the title for each state. For example, setting it to "stateName" will display the value of the "stateName" field as the title for each state. Example: "stateName".
subtitleField - Specifies the field name in the data source that contains the subtitle text for each state. This provides additional context or detail below the main title for each state. Example: "stateDescription".
stateIdField - Defines which field in the data source serves as the unique identifier for each state. This is crucial for correctly identifying and tracking states. Example: "stateId".
currentStateField - Specifies the field name that indicates whether a state is the current active state. This field should contain a boolean value (true/false) in the data. Example: "isCurrentState".
sortOrderField - Determines which field in the data source is used to sort the states in their display order. States will be arranged based on the values in this field, from lowest to highest. Example: "sequence".
readonly - Controls whether the progress states are interactive or display-only. When set to true, users cannot trigger actions associated with the states. Example: true.
statusRules - Defines rules for dynamically determining the visual status of each state (valid, invalid, pending, disabled) based on data conditions. Rules can compare field values with static values or with values from the current state. Example:
[ { "field": "completionPercent", "operator": "greaterEqual", "valueType": "customValue", "value": "100", "status": "1", "priority": "1" } ]
informationConfigs - Configures additional information items displayed for each state, such as details or metrics with optional icons. This allows showing supplementary data below each state. Example:
[ { "iconName": "info", "text": { "en-US": "Updated {{lastUpdatedDate}}", "de-DE": "Aktualisiert {{lastUpdatedDate}}" } } ]
states - Defines static state configurations when not using a data source. Each state has its own title, subtitle, status, and optional action configuration. Example:
[ { "id": 0, "titleTranslations": {"en-US": "Submitted"}, "subtitleTranslations": {"en-US": "Order received"}, "status": 1, "information": [{"iconName": "calendar", "text": "April 15, 2025"}] }, { "id": 1, "titleTranslations": {"en-US": "Processing"}, "subtitleTranslations": {"en-US": "Order in preparation"}, "status": 3, "information": [] } ]
paddingClass - Configures the padding space around the component using CSS classes. For example, "p-3" adds medium padding on all sides of the component. Example: "p-3".
enableStaticData - Determines whether the component uses statically defined states or fetches state data from a data source. When set to true, the component will use the states defined in the "states" property. Example: false.
getElementsDataSourceId - Specifies the data source ID for retrieving progress states data. This connects the component to an API endpoint that returns the state data. Example: "api/order/process-states".
getEntityCollectionHttpRequestParametersMap - Configures HTTP request parameters for fetching data from the API. This allows customizing query parameters, path parameters, or request body. Example:
{ "PATH": { "orderId": "context.selectedOrder.id" }, "QUERY": { "includeHistory": "true" } }
"orderProcessingViewerPolicy".displayConditions - Defines conditions for displaying the component. This allows showing the component only when certain conditions are met, like when specific data is available. Example:
[ { "field": "context.order.status", "operator": "notEquals", "value": "cancelled" } ]
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"}.