Skip to content
Simple 4-steps timeline suitable for a process visualisation.
How to design it in Power Apps
Preview
What does it consist of?
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?
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
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.