Organize Form Fields with a Tabbed Interface in Power Apps

Long forms can overwhelm users and lower data quality. Grouping related fields into tabs makes the experience cleaner and more intuitive. The modern Tab List control in Power Apps lets you switch between field sets with a single click. In this tutorial you’ll build a tabbed form for an employee onboarding scenario.

Scenario: Employee Onboarding

Your HR team uses a canvas app to capture new-hire details. The data includes personal information, job assignment, emergency contact, and notes. Instead of showing all fields at once, you’ll divide them across four tabs: Personal, Job, Emergency, and Notes.

Step 1: Prepare the Data Source

Create a SharePoint list named EmployeeOnboarding with the following columns:

You can use Dataverse or any other supported data source—the technique remains the same.

Step 2: Build the App Screen

1. Open Power Apps Studio and create a blank canvas app.
2. Add a Label to show the title, for example “New Employee Onboarding.”
3. Insert a Tab List control from the modern controls palette. Rename it to tab_EmployeeForm.

Set the Items property of the tab list to an array of tab names:

["Personal", "Job", "Emergency", "Notes"]

Step 3: Add and Configure the Form

Insert an Edit form control below the tab list. Rename it to frm_Employee. Set its DataSource to the EmployeeOnboarding list.

Add all the fields you need to the form. The cards will be shown or hidden based on the selected tab. Inside the form, arrange the cards in any order—the visibility logic will control which ones appear.

Step 4: Show or Hide Cards Conditionally

Select each card and write its Visible property so that it only shows when its matching tab is active.

Personal tab (FullName, Email, Phone, Address, City, State, ZipCode):

tab_EmployeeForm.Selected.Value = "Personal"

Job tab (Department, Position, StartDate):

tab_EmployeeForm.Selected.Value = "Job"

Emergency tab (EmergencyName, EmergencyPhone):

tab_EmployeeForm.Selected.Value = "Emergency"

Notes tab (Notes):

tab_EmployeeForm.Selected.Value = "Notes"

Make sure the tab list control name matches your own (tab_EmployeeForm in this example). If you use a different name, update the references accordingly.

Step 5: Submit the Form

Add a Button at the bottom of the screen. Set its OnSelect to:

SubmitForm(frm_Employee)

Set the form’s DefaultMode to FormMode.New so it always starts in insert mode.

FormMode.New

Performance and Delegation

The Visible property is evaluated client‑side; it does not affect delegation. Performance is identical to a standard form. For large lists, use delegation‑safe filters in other parts of the app, but the tab logic itself does not introduce any delegation concerns.

Common Mistakes and Troubleshooting

• Missing DataSource: If the form shows no fields, double‑check that the DataSource is set to the correct list or table.
• Tab list not changing visibility: Verify that the control name in the Visible formula matches the actual name of your Tab List control (e.g., tab_EmployeeForm). Renaming the control after writing formulas can break them.
• All fields hidden: If the tab list is empty or its Items property is malformed, no tab value will match. Ensure the array contains the same strings you use in the Visible comparisons.
• Form remains in edit mode: Set DefaultMode to FormMode.New for new records, or use an If formula to switch between new and edit modes.

Final Recommendation

Using the Tab List control is a straightforward way to unclutter a long form without custom navigation galleries. It works well with any data source and keeps the user focused on one section at a time. Try it in your next app and see how quickly users adapt.

References

• Matthew Devaney, Power Apps Tabbed Form Using Tab List Modern Control – original article that inspired this tutorial.
• Microsoft Learn: Tab list control in Power Apps (placeholder – refer to official docs for the latest API details).