Efficient Multi-Section Forms Using Tab Navigation in Power Apps

When a form spills beyond a single screen, scrolling can frustrate users and lead to data entry errors. A tabbed interface groups related fields together, letting users complete sections one at a time. Best of all, you can build this entirely with Power Apps built-in controls—no custom components or third-party libraries needed.

In this guide you’ll build a tabbed form for an Asset Management app. The form captures details about company equipment across four categories: General Info, Assignment, Purchase Details, and Notes. By the end you’ll have a clean, functional design that you can adapt to any scenario.

Scenario: Asset Management Form

Your company needs a way to log new equipment. Instead of dumping every field onto one long form, you split them into tabs:

Setup the Data Source

Create a SharePoint list called CompanyAssets with the following columns. Use the data types indicated; all are Single line of text unless noted otherwise.

After the list is created, return to Power Apps Studio and add it as a data source.

Build the Tab Header

We’ll use a set of buttons that look like tabs. These buttons sit below a header bar and change appearance when selected.

1. Create the Header Bar

Insert a Label at the top of the screen to act as a header. Set its properties:

• Text: "Asset Registration"
• Fill: RGBA(0, 60, 106, 1)
• Font: "Segoe UI"
• Height: 140
• Width: App.Width
• X: 0, Y: 0

2. Add the Tab Buttons

Insert four Button controls directly below the header label. Arrange them side by side and set their text: GENERAL INFO, ASSIGNMENT, PURCHASE DETAILS, NOTES.

Style each button consistently:

• Font: "Segoe UI"
• Height: 50
• Width: 160
• Fill: Transparent
• HoverFill: RGBA(17, 77, 133, 0.70)
• PressedFill: RGBA(17, 77, 133, 0.70)

3. Track the Active Tab

Create a global variable that stores which tab is currently selected. In the OnSelect property of every tab button, write:

Set(varTab, Self.Text)

To make sure a tab is selected when the screen loads, set the OnVisible property of the screen to:

Set(varTab, "GENERAL INFO")

Now the buttons will react on hover, but we need a visual indicator of the active tab.

4. Add an Active Tab Underline

Insert a Label that will act as a colored underline beneath the current tab. Make it:

• Height: 4
• Width: 160 (same as the button width)
• Fill: White
• Y: placed directly below the buttons (e.g., btn_GeneralInfo.Y + btn_GeneralInfo.Height + 5)

To move the underline horizontally when the tab changes, set its X property to:

Switch(
  varTab,
  "GENERAL INFO", btn_GeneralInfo.X,
  "ASSIGNMENT", btn_Assignment.X,
  "PURCHASE DETAILS", btn_PurchaseDetails.X,
  "NOTES", btn_Notes.X
)

Build the Form

Now add the Edit Form control and connect it to the CompanyAssets SharePoint list. Delete the default Title and Attachments fields if they appear—they aren’t needed here.

Set the form to a single column vertical layout using the right pane.

Show Fields Based on Active Tab

Select the data cards you want to show for each tab and set their Visible property.

General Info tab – cards: AssetName, Category, SerialNumber, Status

varTab = "GENERAL INFO"

Assignment tab – cards: AssignedTo, Department, Location

varTab = "ASSIGNMENT"

Purchase Details tab – cards: PurchaseDate, WarrantyExpiry, Vendor

varTab = "PURCHASE DETAILS"

Notes tab – card: AdditionalNotes

varTab = "NOTES"

The AdditionalNotes field is multi-line in SharePoint, but the card may only show a single line. Set the card’s Height to 340 and change its Mode property to Multiline so users have room to type.

Submit the Form

Add a Button below the form with Text "Save Asset" and Fill a green color. In its OnSelect property, call:

SubmitForm(frm_CompanyAssets)

Make sure the form’s DefaultMode is set to FormMode.New so that a new item is created each time.

Performance & Delegation Notes

Tab visibility logic runs on the client and does not affect delegation. All data remains on the form control; only the visible cards are rendered, so the app performs similarly to a non-tabbed form. The Switch statement used for the underline is trivial and will not cause slowdowns even on large screens.

Common Mistakes and Troubleshooting

• No fields appear after adding the form The variable varTab is empty when the screen first loads. Set it in the screen’s OnVisible property as shown above.

• Form error: “form isn’t connected to any data yet” Ensure that the DataSource property of the form is set to your SharePoint list. Also verify that DefaultMode is FormMode.New (or FormMode.Edit if editing an existing item).

• Tab underline doesn’t move Double-check the button names used in the Switch statement. If you rename a button, update the reference.

• Multi-line field still shows a single line The data card often inherits a default height. Manually set the card’s Height and the multiline mode as described in the Notes section.

Final Recommendation

A tabbed form is a straightforward way to improve the usability of long data entry screens. The approach shown here uses only standard controls, making it easy to maintain and hand off to other makers. For more advanced scenarios—like dynamic tabs driven by a SharePoint choice column or real-time validation across tabs—you can extend these patterns without adding complex code.

Experiment with different color themes and icon fonts to match your organization’s branding. The design pattern is flexible enough to work for any form-intensive Power App.

References

• Original inspiration: Matthew Devaney – Power Apps Tabbed Form With An Awesome-Looking Design
• Microsoft Learn: Create a form in Power Apps (verify URL)
• Microsoft Learn: Add and configure a data source in Power Apps (verify URL)