We’ve all been there: Time is very much against us when we’re eagerly waiting on a package to arrive, especially if it’s a last-minute gift.
# What we want (besides the package): Progress tracking (ordering, transition, packing, delivery).
# What helps: Details about the steps (not started, in progress, completed).
# What happens: Being in the know, we can either lean back or push the panic button.
The SAP Fiori micro process flow follows this principle. It provides a fast overview of the progress of multiple workflow items in a list, table, and other containers. It can be applied to a wide range of use cases, such as document, order, and approval flows.
In the parcel delivery example, a step cannot get started until the previous one has been completed.
In the SAP Fiori micro process flow, connector lines between the process steps a visualize this linear dependency. The completion of a step is a precondition for the completion of the next step. Depending on the use case though, the next step can already get started.
Dependent steps and transition state
The steps of independent flows can be processed in arbitrary order. For example, when packing a parcel, the order of its items, like pants, shoes, and a scarf, doesn’t matter.
Independent steps
The default steps consist of icons on a circular background with semantic colors. You can choose among different icons from the SAP icon font.
The status is highlighted as red, orange, or green. Green indicates a positive status, standing for ‘completed’, ‘currently working at optimal performance’, ‘available’, ‘on-track’, and so on. Grey indicates a neutral status. Orange stands for ‘in process’ or ‘critical’. Red indicates a negative status.
Make sure that you replace the default tooltip texts from the original icons or controls with the names of individual steps in the process, for example payment, shipping, and delivery.
Add optional on-click popovers for each step to provide more details.
The micro process flow is a generic container with process steps. It can be embedded into a list or a table and inherits its parent-container’s size.
Do your users asks for a very detailed process overview with many steps? If the parent container isn’t long enough, no worries, you can choose between two behaviors. First, the steps that don’t fit into the width of the parent container could wrap to a new line. Second, the steps that don’t fit move into an overflow.
Simple wrap behavior
Do you want to play it safe and start looking at a store for a last minute gift? No worries, you can check the package status on-the-go on mobile devices. The cozy form factor displays the micro process flow with larger dimensions to enable fingertip interaction.
Cozy mode plus overflow behavior
Check out our next Beacon nugget where you learn how to replace the default steps by other controls to gain even deeper insights and to display partial fillings.
If you found this blog interesting, be sure to read status indicator and micro charts for micro process flow.
# What we want (besides the package): Progress tracking (ordering, transition, packing, delivery).
# What helps: Details about the steps (not started, in progress, completed).
# What happens: Being in the know, we can either lean back or push the panic button.
The SAP Fiori micro process flow follows this principle. It provides a fast overview of the progress of multiple workflow items in a list, table, and other containers. It can be applied to a wide range of use cases, such as document, order, and approval flows.
Visually in the know
In the parcel delivery example, a step cannot get started until the previous one has been completed.
In the SAP Fiori micro process flow, connector lines between the process steps a visualize this linear dependency. The completion of a step is a precondition for the completion of the next step. Depending on the use case though, the next step can already get started.
Dependent steps and transition state
The steps of independent flows can be processed in arbitrary order. For example, when packing a parcel, the order of its items, like pants, shoes, and a scarf, doesn’t matter.
Independent steps
The default steps consist of icons on a circular background with semantic colors. You can choose among different icons from the SAP icon font.
The status is highlighted as red, orange, or green. Green indicates a positive status, standing for ‘completed’, ‘currently working at optimal performance’, ‘available’, ‘on-track’, and so on. Grey indicates a neutral status. Orange stands for ‘in process’ or ‘critical’. Red indicates a negative status.
Microcopy for micro steps
Make sure that you replace the default tooltip texts from the original icons or controls with the names of individual steps in the process, for example payment, shipping, and delivery.
Add optional on-click popovers for each step to provide more details.
For all sizes and all devices
The micro process flow is a generic container with process steps. It can be embedded into a list or a table and inherits its parent-container’s size.
Do your users asks for a very detailed process overview with many steps? If the parent container isn’t long enough, no worries, you can choose between two behaviors. First, the steps that don’t fit into the width of the parent container could wrap to a new line. Second, the steps that don’t fit move into an overflow.
Simple wrap behavior
Do you want to play it safe and start looking at a store for a last minute gift? No worries, you can check the package status on-the-go on mobile devices. The cozy form factor displays the micro process flow with larger dimensions to enable fingertip interaction.
Cozy mode plus overflow behavior
Check out our next Beacon nugget where you learn how to replace the default steps by other controls to gain even deeper insights and to display partial fillings.
If you found this blog interesting, be sure to read status indicator and micro charts for micro process flow.
- SAP Managed Tags:
