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.

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 micro process flow

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 micro process flow
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.

Object status

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.

Tooltip for micro process flow

Add optional on-click popovers for each step to provide more details.

Popover for micro process flow


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 of micro process flow

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 for micro process flow

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.


Test your skills

Micro process flow test with mistake

The answer will be revealed in part two.

Not logged in
  • Girish Dunga   3 months ago

    Verticle Scroll bars integrated both the sides!