How To Create Tabs In PowerApps

In this article, we are going to learn about how to create Tabs in PowerApps in two different ways and add form as content in Tab.

Approach 1 - Using Buttons

To create multiple tabs first we need to add 3 buttons for Basic Information, Contact Information, and Employee Information.

Step 1

Add a button and set BorderColor as white so that all 3 will be having a separation between them

Step 2

Once you've added all the buttons, add a new Form to the screen

Step 3

Add Data source for the Form to Employee Registration List.

Step 4

Now OnSelect property of the button, set 3 variables that define which tab is currently active at the moment

Step 5

Change DefaultMode of Form to New so that field in Running mode

Step 6

Set variables for that button to each DataCard so that when clicking on that tab only those fields will be displayed. For the basic information tab, the active basic variable is set.

Step 7

For contact information tab, activeContact variable is set

Step 8

Now for Contact related fields set Visible property to activeContact

Step 9

Same for Employee set activeContact true

Step 10

Now run the application and Test whether related fields are getting displayed.

Step 11

Set OnVisible of Screen to set the default value for a variable so that when the screen is loaded by default active tab is the first one.

Step 12

Now Change Size and Fill property based on the selection of the button so that it will display like active tab

Set the same fill to all remaining 2 buttons

This was the Basic Tabbed form with button control.

Approach 2 - Using Gallery Control

Now let's see this to create with Gallery Control

Step 1

Add a Gallery control to your screen

Step 2

Create Collection that will contain tab names for Gallery so that it will have properties like, Tab Name, Active color, and so on.

Step 3

Add Tabs collection to Items property of Gallery

Step 4

Set TemplateFill property of Gallery control

Step 5

Set Title label Text property to this item.Tab

and Color property to Color.White

Step 6

We can change the look and feel as per our need, Here I have changed the label to middle align

Step 7

Now if the item is selected then its background color will be changed.

Step 8

Add Form to screen and add Datasource to it

Step 9

Select each DataCard and set Visible property

Step 10

Run the application

Using Tabs in Screen will help us provide a better user experience to users where they can navigate to different views using Tab structure. 

Hope this helps...

Happy low coding...!!