Skip to main content

Notifications

Progress indicator using a "Business Process Flow" style

Rick72 Profile Picture Posted by Rick72 385

 

Progress Indicator - Business Process Flow.png

 

 

Give a Thumbs up if you like this component. This makes it easier for others to find in the gallery.

 

My Twitter handle is: formsandflows. Send me a DM if you find any bugs 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 @mdevaney for his component "Progress Indicator Component" which was used as an inspiration for this component.

Categories:

Comments