LibraryStepper
PROnavigation
Stepper
The Stepper shows progress through a multi-step flow as a clean horizontal track of numbered circles, connectors and labels — completed steps fill in, the current step is ringed, future steps stay muted. It is a pure Power Fx SVG Image driven by a collection and a varStep variable, so it scales to any number of steps with no PCF.
1
Details2
Address3
Review4
DoneYAML source
Preview — full code with PRO# Stepper — PowerBlocks (PRO)
# A horizontal progress stepper rendered as a pure Power Fx SVG Image: numbered
# circles, connectors and labels, driven by a collection and a current-step variable.
#
# STEP 1 — In Screen.OnVisible (or App.OnStart):
# ClearCollect(colSteps, { Label: "Details" }, { Label: "Address" }, { Label: "Review" }, { Label: "Done" });
# Set(varStep, 2); // the active step (1-based)
# STEP 2 — Paste this control. STEP 3 — Set varStep from your Next/Back buttons.
- Stepper:
Control: Image@2.2.3
Properties:
X: =40
Y: =40
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
Multi-step forms
Show users where they are in a wizard and how many steps remain.
Onboarding flows
Guide first-time users through setup with a clear progress track.
Checkout / request flows
Communicate progress through details, review and confirmation stages.
How to use Stepper in Power Apps
- 1Add colSteps and Set(varStep, 1) to Screen.OnVisible (see the YAML header).
- 2Choose your locale (EN or FR) and click "Copy YAML".
- 3Paste the control into your screen's Tree view.
- 4Update varStep from your Next/Back buttons (e.g. Set(varStep, varStep + 1)) — the stepper redraws.
Tip — Pair it with the Multi-Step Form screen, and drive both the stepper and the visible step panel from the same varStep variable.