Gallery

Power Apps UI Cooker

Introduction

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Vertical Stepper

MyCondy

Last edited 11 days ago by MyCondy

Simple 4-steps timeline suitable for a process visualisation.

How to design it in Power Apps

Preview

⁠

⁠

⁠

⁠

⁠

What does it consist of?

1x Group

1x Button

5x Label

3x Icon

4x Circle

4x Timer

Procedure

Step 1 - create boolean variable on Screen

When you create a new screen(or use already created) you should create a variable on "OnVisible" property:

Set(point0,true);Set(point1,false);Set(point2,false);Set(point3,false)

Step 2 - create Title

Add a new Label object, call it "timeline_title" with this "text" property:

"Process Timeline"

Step 3 - create vertical steps

Add a new Circle object, call it "step_circle" with this "Color" property:

If(point0 = true, RGBA(238, 143, 149, 1),RGBA(255, 255, 255, 1))

Add a new Circle object, call it "step2_circle" with this "Color" property:

If(point1 = true, RGBA(238, 143, 149, 1),RGBA(255, 255, 255, 1))

Add a new Circle object, call it "step3_circle" with this "Color" property:

If(point2 = true, RGBA(238, 143, 149, 1),RGBA(255, 255, 255, 1))

Add a new Circle object, call it "step4_circle" with this "Color" property:

If(point3 = true, RGBA(238, 143, 149, 1),RGBA(255, 255, 255, 1))

Add a new Icon object(3x), call it "vertical" with this "Icon" property:

Icon.VerticalLine

and "Color" property:

RGBA(238, 143, 149, 1)

Step 4 - create & activate timers

Add a new Timer object, call it "step_timer" with this "AutoStart" property:

timer1

and "OnTimerEnd" property:

Set(point0,false);Set(point1,true);UpdateContext({timer1:false});UpdateContext({timer2:true});

Add a new Timer object, call it "step2_timer" with this "AutoStart" property:

timer2

and "OnTimerEnd" property:

Set(point1,false);Set(point2,true);UpdateContext({timer3:true});UpdateContext({timer2:false});

Add a new Timer object, call it "step3_timer" with this "AutoStart" property:

timer3

and "OnTimerEnd" property:

Set(point2,false);Set(point3,true);UpdateContext({timer4:true});UpdateContext({timer3:false});

Add a new Timer object, call it "step4_timer" with this "AutoStart" property:

timer4

and "OnTimerEnd" property:

Set(point3,false);Set(point0,true);Reset(step_timer);Reset(step2_timer);Reset(step3_timer);Reset(step4_timer);UpdateContext({timer4:false});UpdateContext({started:false})

Step 5 - create process button

Add a new Button object, call it "process_button" with this "Text" property:

"START PROCESS"

and "OnSelect" property:

UpdateContext({timer1:true});Set(point0,true);Set(point1,false);Set(point2,false);Set(point3,false);Set(point4,false);UpdateContext({started:true})

Step 6 - group all objects

Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

1x Group

4x Ellipse

3x Rectangle

4x Text

Procedure

Step 1 - create steps

Add a new Ellipse (O command) object, call it "ci_step1" with these properties:

⁠

⁠

do it the same for the rest Ellipse objects - "ci_step2,ci_step3,ci_step4".

Step 2 - create lines between steps

Add a new Rectangle (R command) object, call it "html_line_step12" with these properties:

⁠

⁠

do it the same for the rest Rectangle objects - "html_line_step23, html_line_step34".

Step 3 - create texts for steps

Add a new Text (T command), call it "lbl_step1_title" with these properties:

⁠

⁠

do it the same for the rest Text objects - "lbl_step2_title, lbl_step3_title, lbl_step4_title".

Step 4 - group all objects

Select all objects and press COMMAND + G (MAC) or CTRL + G (WIN) and call the group "gr_stepper_group".

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

gr_stepper_group = Group

ci_step1, ci_step2, ci_step3, ci_step4 = Circle

lbl_step1_title, lbl_step2_title, lbl_step3_title, lbl_step4_title = Label

html_line_step12, html_line_step23, html_line_step34 = HTML TEXT

YAML Output

⁠

Used Colours

Step Circle (Active) - #ee8f95

Step Circle (Inactive) - #FFFFFF

Titles - #000000

⁠

← Todo list⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.