In this post, we will learn how to Create Power Apps tabs control. PowerApps does not yet have a tabbed form. So we can create the tabbed form by combining some PowerApps input controls such as a gallery, buttons, images, icons and so on.

Power Apps Tabs

• We need to create PowerApps tab control so that we can group form items and keep the form’s visible size manageable.
• A tab is a Button or any clickable input control that appears at the top of a Form or a Window. When a user clicks on this tab, it opens another area of items.

How to create tabbed forms in PowerApps?

The easiest way to create tab control in PowerApps is by using Gallery control.

1. Insert a blank gallery control in your screen, in this example we will use blank horizontal gallery.
2. In the items property of the gallery write a list of your tab headers.

["tab1","tab2","tab3","tab4"]

3. Insert button control in your gallery items.
4. In the text property of the button write the following formula to get the value of gallery items “tab1, tab2, tab3,tab4”

ThisItem.Value

The color of the form tabs is the same whether the user has selected a tab or is hovering over one. We will also indicate the current tab in a different way to improve usability.

5. In the fill property of the button inside the gallery write the following formula to highlight the selected tab

If(ThisItem.IsSelected,Green, RGBA(56, 96, 178, 1))

6. Insert rectangle control and give it background to be the background of your tabs.

When a user clicks on a form tab, only the fields in the current section should be visible, and the other tabs should be hidden. We can accomplish this with some simple logic.

7. In your form control , to Show Form Fields Only For The Current Tab in the visible property of the form controls write the following formula to appear in the tab1 and hidden from other tabs, and change tab1 to tab2 for the controls you want to display on tab2 and so on.

Gallery1.Selected.Value="tab1"

So it is very simple to create power apps tabs and organize your long form using Power apps tabs.

See Also

• Nested Collection In PowerApps :3 Level
• PowerApps Variables Types : Context Variable Vs Global Variable Vs Collections
• Canvas App Collections
• How To Overcome PowerApps Delegation Limit?
• How To Use Power Automate?
• PowerApps Print Function, Forms, And Scrollable Galleries
• PowerApps Validation Examples On/before Submitting
• Share PowerApps With External Users / Guest Users

Join us

• Subscribe to Power Platform Geeks YouTube channel.
• Register to Saudi Arabia Power Platform User Group.

Need Help

• Have a related question? Please ask it at deBUG.to Community.