If you’ve ever struggled with forms that have too many fields and feel overwhelming for users, this Power Apps modern tabbed interface approach might just be the solution you’re looking for. Let’s dive into the steps I took to make it happen, and there’s even an associated video at the bottom!
Power Apps Modern Tabbed Form Step by Step
Step 1: Adding the Tab List Control
To get started in Power Apps, open your app and go to a form already on a screen. From the Insert menu, select the Tab List control—it’s simply called “Tab List” in the menu. This is the foundation of our tabbed interface, and it’s so much simpler than the old ways of creating tabs with buttons or galleries.
Step 2: Setting Up Tab Sections
Decide what your tabs will be named. For this demo, I chose three: “Purchase Request Info,” “Vendor,” and “Details.” Go to the Items property of the Tab List control and enter the names as a list, like this:
["PR Info", "Vendor", "Details"]This instantly created my tabs—super easy and a huge time-saver compared to manually building tab-like buttons!
Step 3: Determining the Selected Tab
To figure out which tab the user is on, use this expression: TabList1.Selected.Value. To test it out, you can add a temporary text box to the canvas and set its Text property to TabList1.Selected.Value. This lets you see the name of the selected tab in real-time as you click through them. It’s a great way to confirm everything’s working as expected.
Step 4: Controlling Card Visibility
Now comes the fun part—making the right fields show up on the right tabs. Select a card in your form (those little containers for each field), go to its Visible property, and add a formula to control when it appears. For example, for a card that should only show on the “Purchase Request Info” tab, I entered:
TabList1.Selected.Value = "PR Info"This means the card is visible only when that tab is active.
Step 5: Applying Visibility to All Cards
Repeat Step 4 for every card in the form, tweaking the formula based on which tab each card belonged to. For instance, vendor-related fields got TabList1.Selected.Value = “Vendor”, and details like justification and budget code got TabList1.Selected.Value = “Details”. To speed things up, I held down the Ctrl key and clicked multiple cards in the left pane to update their visibility settings all at once.
Step 6: Setting a Default Tab on the Power Apps Modern Tabbed Form
You most likely want users to start on your first tab every time they open the form. To make this happen, create a variable. In the OnVisible property of the screen, add this formula, using the name of your first tab:
UpdateContext( { varFormTab: {Value:"PR Info"} } )Then, select the tab control and choose the property called DefaultSelectedItems, and type the name of the variable there:
This ensures the form always opens on that tab, giving users a consistent starting point.
Step 7: Managing Always-Visible Fields
Some fields, like the “Title,” you may want to show on every tab. For those, simply set their Visible property to true without tying them to a specific tab. This way, they’re always there, no matter which tab the user is viewing—perfect for key info that needs to stay front and center.
Step 8: Ensuring Required Fields Are Completed
One challenge with tabbed forms is making sure users fill out all required fields, especially when they’re spread across tabs. Here’s how I tackled it:
- Marking Fields as Required: I set the Required property on the card to true for any field that had to be filled out. This automatically adds a little asterisk next to it, so users know it’s mandatory.
- Conditional Submit Button: To guide users through the process, I made the submit button visible or enabled only when they reached the “Details” tab (the last one). I set its Visible property to:
TabList1.Selected.Value = "Details"This encourages them to complete all tabs before submitting.
- Form Validity Check: For a smoother experience, I tied the submit button’s DisplayMode to the form’s validity. I used:
If(frmPurchase.Valid, DisplayMode.Edit, DisplayMode.Disabled)This disables the button unless all required fields are filled in, no matter which tab they’re on.
Step 9: Enhancing with Error Messages
You most likely don’t want users guessing why the submit button is disabled, so add a text box near it with a custom error message. Set its Text property to:
"Required fields have not been filled out"Then, I styled it with red text and bold font for emphasis. To control when it shows, I set its Visible property to:
!PurchaseForm.Valid && TabList1.Selected.Value = "Details"This makes the message appear only on the last tab when required fields are missing—clear feedback right where it’s needed.
Final Touches
To wrap things up, test the form thoroughly. Click through each tab, filled out fields, and made sure the visibility logic works perfectly.
Why I Love the Power Apps Modern Tab Control
Building this form was a breeze compared to older methods like creating separate screens or faking tabs with buttons. The modern tab control cuts down on steps, saves time, and makes the form so much easier for users to navigate. Whether you’re dealing with purchase requests, vendor info, or detailed data entry, this approach keeps everything tidy and intuitive.
I hope this step-by-step guide inspires you to try it out in your own Power Apps projects. Let me know how it goes—or if you’ve got any creative twists to share! Happy building! Here is the associated video, and thanks to the Power Hour friends who were watching me demonstrate it live and offered helpful suggestions and various ways that some of these things can be accomplished!
Leave a Reply