Stepper

A wizard progress bar with numbered steps, done and current states, connector lines and Back and Next buttons, driven by one context variable.

Overview

A step indicator for multi-step forms. Each step is a numbered circle with a label and a short description, joined by connector lines. Steps that are done show a check mark on a tint of the theme colour, the current step is a solid circle, and steps still to come are outlined. The connectors fill in as people move forward.

Everything follows one context variable, locStepperStep, which starts at 1. Next and Back change it, the Next button turns into Finish on the last step, and selecting a step that is done jumps back to it. The steps share the width evenly, so three or six steps fit the same card.

When to use

Forms with three to six steps that people go through in order, such as a new inspection or an onboarding request.
When people should see how far along they are and what is still coming.

When not to use

Sections people can fill in any order: use a tab bar.
More than six steps, or step labels longer than two words: the labels run out of room on a phone.

Before you paste

The fields of each step, shown with Visible: =Coalesce(locStepperStep, 1) = 2 (with the step's number) on a container per step.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
Gallery	`2.15.0`
ModernButton	`1.0.0`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- StepperRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =StepperHeader.Height + StepperGallery.Height + StepperFooter.Height + 2 * 16 + 48
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =16
      PaddingBottom: =24
      PaddingLeft: =24
      PaddingRight: =24
      PaddingTop: =24
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(880, Parent.Width)
    Children:
      - StepperHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =28
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =12
            LayoutMinHeight: =28
            LayoutMinWidth: =120
          Children:
            - StepperTitle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FillPortions: =1
                  FontWeight: =FontWeight.Semibold
                  Height: =28
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =16
                  Text: ="New inspection"
                  Wrap: =false
            - StepperCount:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Right
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =28
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="Step " & Coalesce(locStepperStep, 1) & " of " & StepperGallery.AllItemsCount
                  Width: =120
                  Wrap: =false
      - StepperGallery:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            AccessibleLabel: ="Inspection steps"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =88
            Items: |
              =Table(
                  {Step: 1, Label: "Site", Description: "Where and when"},
                  {Step: 2, Label: "Checklist", Description: "12 checks"},
                  {Step: 3, Label: "Photos", Description: "Evidence"},
                  {Step: 4, Label: "Review", Description: "Sign and send"}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =0
            TemplateSize: =Self.Width / Max(1, Self.AllItemsCount)
          Children:
            - StepperConnectorBefore:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =If(ThisItem.Step <= Coalesce(locStepperStep, 1), App.Theme.Colors.Primary, ColorFade(App.Theme.Colors.Darker70, 85%))
                  Height: =2
                  Visible: =ThisItem.Step > 1
                  Width: =Parent.TemplateWidth / 2 - 24
                  X: =0
                  Y: =17
            - StepperConnectorAfter:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =If(ThisItem.Step < Coalesce(locStepperStep, 1), App.Theme.Colors.Primary, ColorFade(App.Theme.Colors.Darker70, 85%))
                  Height: =2
                  Visible: =ThisItem.Step < StepperGallery.AllItemsCount
                  Width: =Parent.TemplateWidth / 2 - 24
                  X: =Parent.TemplateWidth / 2 + 24
                  Y: =17
            - StepperCircle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =StepperLabel.Text & If(ThisItem.Step < Coalesce(locStepperStep, 1), ", done", ThisItem.Step = Coalesce(locStepperStep, 1), ", current step", "")
                  Align: =Align.Center
                  BorderColor: =ColorFade(App.Theme.Colors.Darker70, 80%)
                  BorderThickness: =If(ThisItem.Step > Coalesce(locStepperStep, 1), 2, 0)
                  Color: |
                    =If(
                        ThisItem.Step < Coalesce(locStepperStep, 1), App.Theme.Colors.Primary,
                        ThisItem.Step = Coalesce(locStepperStep, 1), Color.White,
                        ColorFade(App.Theme.Colors.Darker70, 45%)
                    )
                  Fill: |
                    =If(
                        ThisItem.Step < Coalesce(locStepperStep, 1), App.Theme.Colors.Lighter80,
                        ThisItem.Step = Coalesce(locStepperStep, 1), App.Theme.Colors.Primary,
                        Color.White
                    )
                  FontWeight: =FontWeight.Semibold
                  Height: =36
                  OnSelect: |
                    =If(ThisItem.Step < Coalesce(locStepperStep, 1), UpdateContext({locStepperStep: ThisItem.Step}))
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  RadiusBottomLeft: =18
                  RadiusBottomRight: =18
                  RadiusTopLeft: =18
                  RadiusTopRight: =18
                  Size: =14
                  Text: =If(ThisItem.Step < Coalesce(locStepperStep, 1), "✓", Text(ThisItem.Step))
                  Width: =36
                  Wrap: =false
                  X: =(Parent.TemplateWidth - Self.Width) / 2
                  Y: =0
            - StepperLabel:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Center
                  Color: =If(ThisItem.Step > Coalesce(locStepperStep, 1), ColorFade(App.Theme.Colors.Darker70, 35%), App.Theme.Colors.Darker70)
                  FontWeight: =If(ThisItem.Step = Coalesce(locStepperStep, 1), FontWeight.Semibold, FontWeight.Normal)
                  Height: =22
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =14
                  Text: =ThisItem.Label
                  Width: =Parent.TemplateWidth
                  Wrap: =false
                  X: =0
                  Y: =44
            - StepperDescription:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Center
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =20
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =12
                  Text: =ThisItem.Description
                  Width: =Parent.TemplateWidth
                  Wrap: =false
                  X: =0
                  Y: =66
      - StepperFooter:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =56
            LayoutAlignItems: =LayoutAlignItems.End
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutJustifyContent: =LayoutJustifyContent.End
            LayoutMinHeight: =56
            LayoutMinWidth: =120
          Children:
            - StepperBack:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Secondary
                  DisplayMode: =If(Coalesce(locStepperStep, 1) = 1, DisplayMode.Disabled, DisplayMode.Edit)
                  Height: =40
                  LayoutMinHeight: =40
                  LayoutMinWidth: =96
                  OnSelect: |
                    =UpdateContext({locStepperStep: Max(1, Coalesce(locStepperStep, 1) - 1)})
                  Size: =14
                  Text: ="Back"
                  Width: =100
            - StepperNext:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Primary
                  Height: =40
                  LayoutMinHeight: =40
                  LayoutMinWidth: =96
                  OnSelect: |
                    =If(
                        Coalesce(locStepperStep, 1) < StepperGallery.AllItemsCount,
                        UpdateContext({locStepperStep: Coalesce(locStepperStep, 1) + 1}),
                        Notify("Inspection sent (example only).", NotificationType.Success)
                    )
                  Size: =14
                  Text: =If(Coalesce(locStepperStep, 1) < StepperGallery.AllItemsCount, "Next", "Finish")
                  Width: =100

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Items` on `StepperGallery`

One row per step, numbered from 1. Description is the small line under the label; use "" to leave it out.

In the YAML

YAML

Items: |
  =Table(
      {Step: 1, Label: "Site", Description: "Where and when"},
      {Step: 2, Label: "Checklist", Description: "12 checks"},
      {Step: 3, Label: "Photos", Description: "Evidence"},
      {Step: 4, Label: "Review", Description: "Sign and send"}
  )

Your version

YAML

Items: |
  =Table(
      {Step: 1, Label: "Details", Description: "Who and what"},
      {Step: 2, Label: "Planning", Description: "When"},
      {Step: 3, Label: "Confirm", Description: "Check and send"}
  )

`OnSelect` on `StepperNext`

What the last step does. Keep the first branch, which moves to the next step; replace the Notify with your submit.

In the YAML

YAML

OnSelect: |
  =If(
      Coalesce(locStepperStep, 1) < StepperGallery.AllItemsCount,
      UpdateContext({locStepperStep: Coalesce(locStepperStep, 1) + 1}),
      Notify("Inspection sent (example only).", NotificationType.Success)
  )

Your version

YAML

OnSelect: |
  =If(
      Coalesce(locStepperStep, 1) < StepperGallery.AllItemsCount,
      UpdateContext({locStepperStep: Coalesce(locStepperStep, 1) + 1}),
      SubmitForm(InspectionForm); UpdateContext({locStepperStep: 1})
  )

`Text` on `StepperTitle`

The name of the task people are working through.

In the YAML

YAML

Text: ="New inspection"

Your version

YAML

Text: ="Request a site visit"

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, StepperRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Stepper

Overview

When to use

When not to use

Before you paste

Controls used

YAML

Make it yours

Items on StepperGallery

OnSelect on StepperNext

Text on StepperTitle

How to paste

When Studio flags a control version

`Items` on `StepperGallery`

`OnSelect` on `StepperNext`

`Text` on `StepperTitle`