Stepper

Multi-step progress indicator with two display types and three density levels. Bar type renders segmented pill progress. Step type shows numbered circles with optional labels and connectors. Supports back-navigation, jump-to-step, three sizes, light and dark themes, and a custom check icon override. 11 properties.

cmpStepper.yaml

1. Go to the Components tab (right side panel, next to Screens)
2. Click New component — this creates a blank component
3. Click outside the new component to deselect it
4. Paste the YAML with Ctrl+V / ⌘V

Preview

✓

Job Info

✓

Labor

✓

Materials

Notes

Photos

Review

Installation

Copy the YAML using the button above.
Open your canvas app in Power Apps Studio.
Go to Components → New component → Import from code.
Paste the YAML and click Save.
Insert cmpStepper onto any screen from the component panel.

Usage

Basic setup (Step type)

cmpStepper.StepLabels = Table(
    {Label: "Job Info"},
    {Label: "Labor"},
    {Label: "Materials"},
    {Label: "Notes"},
    {Label: "Photos"},
    {Label: "Review"}
)
cmpStepper.Type = "Step"
cmpStepper.Density = "Full"
cmpStepper.CurrentStep = locStep
cmpStepper.Size = "Medium"
cmpStepper.Theme = "Light"

Bar type for compact layouts

// No labels needed — bar mode ignores StepLabels
cmpStepper.StepLabels = Table(
    {Label: "1"}, {Label: "2"}, {Label: "3"},
    {Label: "4"}, {Label: "5"}, {Label: "6"}
)
cmpStepper.Type = "Bar"
cmpStepper.CurrentStep = locStep
cmpStepper.Size = "Small"

Back-navigation with OnStepSelect

// Allow tapping completed steps to go back
cmpStepper.ClickableSteps = "Completed"
cmpStepper.OnStepSelect = Set(locStep, cmpStepper.SelectedStep)

// Next / Back buttons
btnNext.OnSelect = If(locStep < 6, Set(locStep, locStep + 1))
btnBack.OnSelect = If(locStep > 1, Set(locStep, locStep - 1))

// Read the active step
lblProgress.Text = "Step " & locStep & " of 6"

Custom check icon

// App.Formulas — define once and reuse
nfCheckIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E";

cmpStepper.CheckIcon = nfCheckIcon

Properties

Input

Property	Type	Default
`StepLabels` Table of {Label} rows. One row per step — row count drives the total step count automatically.	Table	6 EMS steps
`CurrentStep` 1-based index of the active step. Connect to a local variable (e.g. locStep) and update on Next/Back.	Number	1
`Type` "Bar" renders segmented pill bars. "Step" renders numbered circles with optional labels and connectors.	Text	"Bar"
`Density` "Full" shows circles, connectors, and labels. "Compact" hides labels. "Minimal" hides labels and connectors. Only applies when Type is "Step".	Text	"Full"
`Size` "Small" (4/22px), "Medium" (6/28px), or "Large" (8/34px). Scales bar height, circle size, and component height.	Text	"Medium"
`Theme` "Light" or "Dark". Controls connector color, future circle border, and label text colors. Does not set background — place the component on a matching surface.	Text	"Light"
`ClickableSteps` "Completed" allows tapping done steps only. "None" disables all navigation. "All" allows jumping to any non-active step.	Text	"Completed"
`AccentColor` Fill and border color for active and completed steps. Defaults to blue-600.	Color	RGBA(37,99,235,1)
`CheckIcon` Optional URL-encoded SVG to replace the default ✓ in completed circles. Use currentColor as the stroke/fill token — the component substitutes white automatically.	Text	Blank()

Output

Property	Type	Description
`SelectedStep`	Number	The step index last tapped by the user. Read this inside the `OnStepSelect` handler to update your step variable.

Events

Event	Description
`OnStepSelect`	Fires when a tappable step circle is pressed. Read `SelectedStep` inside this handler. Only fires if `ClickableSteps` is not “None”.

Implementation Details

StepLabels drives step count

There is no separate TotalSteps property. Both galleries use Sequence(CountRows(StepLabels))for their Items and TemplateSize. Add or remove a row from the table and the layout updates automatically — no sync needed.

Two galleries, two modes

galSimple (Visible when Type = "Bar") contains a single GroupContainer per slot with radius 100 for pill-shaped bars with a 6px gap. galFull (Visible when Type = "Step") contains left/right connector rectangles, a GroupContainer circle, a label, and a transparent button overlay per template. Swapping Type simply toggles gallery visibility.

Connector positioning

Each template item owns its left and right connector halves. The left connector runs from X=0 to just before the circle edge; the right connector runs from just after the circle edge to X=TemplateWidth. The midpoint of each connector aligns with the circle center using the same Y formula as the circle’s vertical position. Connectors are hidden on the first (left) and last (right) items respectively using Visible.

Density without extra props

The single Density prop replaces two separate booleans. lblStep.Visible = Density = "Full". Connector visibility checks Density <> "Minimal". The circle and connector Y positions use the same Density = "Full" branch to vertically shift when labels are hidden, keeping the circles centered in the component height.

Transparent active circle

The active step circle has Fill = RGBA(0,0,0,0) (transparent) with an accent-colored border. This lets the circle inherit the surface color behind it — the component never assumes a background color, so it works on white cards, gray panels, or dark surfaces without any extra configuration.

Check icon override

When CheckIcon is blank, completed circles show a Unicode ✓ via lblCircle. When a data URI is provided, lblCircle.Text becomes empty and imgCheck becomes visible. The component calls Substitute(CheckIcon, "currentColor", "%23ffffff") to inject white into the SVG stroke/fill token.

ClickableSteps & navigation

The transparent btnStepSelect overlays each circle. Its DisplayMode is driven by a Switch on ClickableSteps: None disables all buttons, Completed enables only steps where Value < CurrentStep, and All enables every step except the current one. On press, _stepSel is set to the tapped step index and OnStepSelect fires.

Examples

Compact header progress (Bar)

cmpStepper.Type = "Bar"
cmpStepper.Size = "Small"
cmpStepper.StepLabels = Table(
    {Label:"1"},{Label:"2"},{Label:"3"},
    {Label:"4"},{Label:"5"},{Label:"6"}
)
cmpStepper.CurrentStep = locStep

Wizard with back-navigation (Step / Full)

✓

Job Info

✓

Labor

✓

Materials

Notes

Photos

Review

cmpStepper.Type = "Step"
cmpStepper.Density = "Full"
cmpStepper.ClickableSteps = "Completed"
cmpStepper.CurrentStep = locStep
cmpStepper.OnStepSelect =
    Set(locStep, cmpStepper.SelectedStep)

Tight header (Step / Compact)

✓

cmpStepper.Type = "Step"
cmpStepper.Density = "Compact"
cmpStepper.Size = "Small"
cmpStepper.ClickableSteps = "None"
cmpStepper.CurrentStep = locStep

Architecture

12 controls — 2 galleries. Bar gallery: 1 GroupContainer per slot. Step gallery: 2 rectangles + 1 GroupContainer circle (with Label + Image children) + 1 Label + 1 Button per slot.

11 properties — 9 input, 1 output, 1 event.

Default height — Bar: 6px (Medium). Step Full: 72px (Medium). Step Compact/Minimal: 32px (Medium). Width is fixed at 400 — set to Parent.Width in most layouts.

cmpStepper (Width = 400, Height = dynamic)
├── galSimple  (Visible: Type = "Bar")
│   └── [per slot]
│       └── cntSimpleBar  — GroupContainer, radius 100, 6px gap, AccentColor or gray fill
│
└── galFull    (Visible: Type = "Step")
    └── [per slot]
        ├── rctLineLeft   — left connector half, Visible: step > 1 && Density ≠ "Minimal"
        ├── rctLineRight  — right connector half, Visible: step < total && Density ≠ "Minimal"
        ├── cntCircle     — GroupContainer, radius 100, AccentColor fill (done) / transparent (active/future)
        │   ├── lblCircle — "✓" or number, hidden when CheckIcon provided and done
        │   └── imgCheck  — custom SVG, Visible: done && CheckIcon not blank
        ├── lblStep       — label text, Visible: Density = "Full"
        └── btnStepSelect — transparent hit target, DisplayMode driven by ClickableSteps

Get new components and templates when they drop

One email when something new ships. Unsubscribe anytime.

Community

Use the toolbar to format · or type markdown directly