Progress indicator using a “Business Process Flow” style - #ARCHIVED#

Posted on by
This content has been archived. It may no longer be relevant.  

My Twitter handle is: formsandflows. Send me a DM if you find any bugs in this component and I will try to fix them as quickly as possible.

How to use it

This component has 6 input properties. They are described below.

ColorActive

  • The color used for the current or a previous stage.
  • Type: Color

ColorInactive

  • The color used for a next stage.
  • Type: Color

CurrentStage
The number of the current stage. Numbering starts at 1.

Type: Number

Items

  • The items. The number of items can be dynamic. You do need to take care yourself that the this component is wide enough to show all text.
  • Type: Table

Example used in screen above:

Table(
    {ID:1,Title:"Reviewed"},
    {ID:2,Title:"Quarter 1"},
    {ID:3,Title:"Quarter 2"},
    {ID:4,Title:"Quarter 3"},
    {ID:5,Title:"Quarter 4"},
    {ID:6,Title:"Completed"}
)

TextColor

  • The color of the text.
  • Type: Color

TextFont

  • The font of the text.
  • Type: Text

How it works

  • The stages are shown using a gallery.
  • The gallery has a padding of 0.
  • The width of a gallery item is calculated by dividing the width of the gallery by the number of items.
  • 3 circle shapes are used to show the “icons”.
  • 2 rectangle shapes are used to connect the “icons”.
  • The circles need to be higher in the hierarchy than the rectangles.

A big thanks to Matthew Devaney for his component “Progress Indicator Component” which was used as an inspiration for this component.

Download

This component can be downloaded from GitHub.

Print 🖨