Intro

The micro process flow control enables you to visualize the state of individual items in a linear workflow. You can embed it into a list or a table.

Micro process flows

Micro process flows

Usage

Use the micro process flow if:

You need to show the state of each step in a linear, multi-step process.
Users need to see the progress of multiple items displayed in a list or table at a glance.

Do not use the micro process flow if:

You only need to show the state of a single-step process. Use the progress indicator or object status instead.
You want to visualize a complex non-linear workflow. Use the process flow instead.

Responsiveness

The micro process flow is responsive and adapts to the size of its parent container. If the micro process flow is too long for the parent container’s width, you can choose how it should behave:

Simple wrap: Steps that don’t fit into the width of the parent container wrap to a new line.

Simple wrap behavior of micro process flow

Simple wrap behavior of micro process flow

Overflow: Navigation arrows appear on both sides of the micro process flow, with the number of hidden steps indicated next to each arrow. By clicking the navigation arrows, users can scroll horizontally through all of the steps in the micro process flow.

Overflow behavior of micro process flow

Overflow behavior of micro process flow

The micro process flow control supports cozy and compact form factors.

Layout

The micro process flow acts as a generic container in which process steps are laid out linearly along the horizontal axis. The control provides the following layout options:

Default

The process steps appear as icons with a circular background. They use semantic colors and provide click events. You can choose from different icons provided by the SAP icon font.

guideline

Always replace the default icons with icons that fit to your use case.

Default layout with a circular background

Default layout with a circular background

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

Custom

The default steps can be replaced by other controls. The following controls are supported:

guideline

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, Delivery. For more information, see Using Tooltips.

Custom layout using the 'status indicator' control

Custom layout using the 'status indicator' control

Custom layout using the 'micro chart' control

Custom layout using the 'micro chart' control

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

Types

There are two micro process flow types: one with dependent steps and one with independent steps.

Dependent Steps (Default)

The dependent steps come with a connector line that appears between the process step and the step that follows it. Use this type when the completion of a step is a precondition for the subsequent step.

guideline

When customizing the width of the connector lines, the minimum width must not be less than the default width, and the maximum width must not exceed the step width or step height (whichever is greater).

Micro process flow with dependent steps

Micro process flow with dependent steps

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

You can also indicate the state of the transition between two steps with a suitable icon.

guideline

The width of the icon must not exceed 60% of the connector line width. The height of the icon must not exceed the size of the step node.

Micro process flow with transition state

Micro process flow with transition state

style

column-section-1-1, no-footprint

style

column-section-1-1, no-footprint

Independent Steps

Independent steps are not connected and can be processed in any order. Use this type when the user doesn’t need to perform the steps in a linear sequence.

Micro process flow with independent steps

Micro process flow with independent steps

Guidelines

Users often need more information about a step. To provide more details, add an on-click popover for each step. Also add a click event for each step to invoke the popover.

Micro process flow with on-click popover