Workflow Steps#

The workflow steps component is a component that simply provides a visual immediate overview of the current workflow state and the preceding and succeeding steps.


A workflow steps component, highlighting the current step.#

As we progress through the steps, all preceding steps are given a checkmark.


A workflow steps component, showing the first step checked off.#

Each workflow step needs to be configured with some information:

  • Title: A title to display for the step.

  • Description: A description to display for the step.

  • Workflow: The workflow to draw steps from. It’s possible to mix and match workflows.

  • States: A set of workflow states that this step encompasses. It’s possible to include zero, one or many workflow states in a single workflow step.

  • Icon: A Fomantic-UI icon to show for the workflow step.

The workflow steps component does not provide any additional functionality to a portal, beyond an overview and a way to condense a complex workflow into a more visual and linear status.

The component can be configured to be shown in two orientations, determined by the component’s Type-setting. It can be shown horizontally or vertically.


A vertical workflow steps component.#