Multi-Step Form Wizard on a Single Canvas Screen

Designing a long data entry form can quickly become a scrolling marathon that frustrates users. A better approach is to break the form into logical sections and show only one section at a time, all on the same screen. This gives users a clear sense of progress and reduces the cognitive load. In this article you’ll build a step‑by‑step wizard for a customer feedback form using a single Power Apps canvas screen.

Your Scenario: A Three‑Step Feedback Form

Imagine you have a feedback form with nine fields grouped into three categories:

• Info – Name, Email, Company
• Feedback – Subject, Message, Category
• Rating – Overall Score, Recommendation, Comments

You want to present these three groups on one screen, with tab‑style navigation at the top and Next / Previous buttons to move between steps. The Submit button should only appear on the final step.

Step 1: Prepare the Form and Data Source

Add a Form control connected to your data source (for example, a SharePoint list or Dataverse table). Set its Width to fill the screen and reduce its Height so that it only shows the fields for one section. A height that displays four or five fields works well.

Place the form in the upper‑middle area of the screen. You will control which data cards are visible using a context variable that represents the current page.

Step 2: Build the Tab Navigation with a Gallery

Above the form, insert a blank Horizontal Gallery (or a vertical one if you prefer). Inside the gallery add a Button control. This button will act as your tab.

Set the gallery’s Items property to a table of the tab names:

["Info","Feedback","Rating"]

For the button inside the gallery, set Text to ThisItem.Value. Style it to look like a tab: remove the border or give it a bottom border.

Use a context variable to track which tab is active. Put the following formula in the button’s OnSelect:

UpdateContext({locActiveTab: ThisItem.Value})

Apply conditional formatting so the active tab stands out. For the button’s Fill property use:

If(locActiveTab = ThisItem.Value, ColorFade(Power Apps Blue, -20%), White)

And for Color (text colour):

If(locActiveTab = ThisItem.Value, White, Power Apps Blue)

Step 3: Connect Data Cards to the Active Tab

Now bind each data card in the form to a specific tab. Select the cards that belong to the first group (e.g., Name, Email, Company) and set their Visible property to:

locActiveTab = "Info"

For the Feedback cards (Subject, Message, Category):

locActiveTab = "Feedback"

And for the Rating cards (Score, Recommendation, Comments):

locActiveTab = "Rating"

Only the cards for the active tab will be shown. The others remain invisible, keeping the form tidy.

Step 4: Add Next and Previous Buttons

Place a button or label on the screen for Next and one for Previous. Position them below the form, spaced apart.

For the Next button’s OnSelect, use a Switch to advance:

Switch(
  locActiveTab,
  "Info", UpdateContext({locActiveTab: "Feedback"}),
  "Feedback", UpdateContext({locActiveTab: "Rating"})
)

For the Previous button’s OnSelect:

Switch(
  locActiveTab,
  "Feedback", UpdateContext({locActiveTab: "Info"}),
  "Rating", UpdateContext({locActiveTab: "Feedback"})
)

Set the Visible property of the Next button to hide it on the last tab:

locActiveTab <> "Rating"

And for the Previous button, hide it on the first tab:

locActiveTab <> "Info"

Step 5: Show the Submit Button Only on the Last Step

Add a Submit button (or use the one automatically created with the form). Set its Visible property so it appears only when the user reaches the final tab:

locActiveTab = "Rating"

In the button’s OnSelect, submit the form:

SubmitForm(Form1)

Step 6: Initialise the Tab When the Screen Loads

To make sure the form always starts on the first tab, add the following to the screen’s OnVisible property:

UpdateContext({locActiveTab: "Info"})

Common Pitfalls and Troubleshooting

• Cards not hiding – Make sure the Visible property of each data card is set, not the entire form’s. The form itself stays visible; only individual cards toggle.
• Navigation skips tabs – Check your Switch logic for typos. The case labels must exactly match the text used in the gallery Items.
• Tab styling doesn’t update – Verify that the context variable name (locActiveTab) is spelled identically in every formula. Power Apps is case‑sensitive.
• Submit button never appears – Confirm that locActiveTab equals "Rating" when on the last tab. Use a label to debug: set its Text to locActiveTab.

Performance and Delegation Notes

Because this technique relies on Visible properties of data cards, it does not affect delegation. All data loading is still controlled by the form’s DataSource and Item properties. The variable‑driven show/hide logic runs entirely client‑side, so performance remains snappy even for large forms.

If your form loads many fields, consider using a single Vertical Gallery of cards instead of individual data cards. This can improve rendering time by virtualising the list. The same tab‑visibility logic can then be applied to the gallery’s Items filter.

Final Recommendation

Breaking a long form into a multi‑step wizard on a single screen is a clean, user‑friendly pattern. It works well for any scenario where you need to collect structured data without overwhelming the user. Start with a simple three‑tab layout, then extend it with validation on each step or a progress indicator when you need more advanced functionality.

References

• Original source: Multiple Page Form On A Single PowerApps Screen by Matthew Devaney.
• Microsoft Learn: Form control in Power Apps
• Microsoft Learn: Add a gallery to a canvas app