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

How To Create Tabs In PowerApps

Step 2

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

How To Create Tabs In PowerApps

Step 3

Add Data source for the Form to Employee Registration List.

How To Create Tabs In PowerApps

Step 4

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

How To Create Tabs In PowerApps

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.

How To Create Tabs In PowerApps

Step 7

For contact information tab, activeContact variable is set

How To Create Tabs In PowerApps

Step 8

Now for Contact related fields set Visible property to activeContact

Step 9

Same for Employee set activeContact true

How To Create Tabs In PowerApps

Step 10

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

How to create Tabs in PowerApps

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

How To Create Tabs In PowerApps

Set the same fill to all remaining 2 buttons

How To Create Tabs In PowerApps

How To Create Tabs In PowerApps

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.

How To Create Tabs In PowerApps

Step 3

Add Tabs collection to Items property of Gallery

Step 4

Set TemplateFill property of Gallery control

How To Create Tabs In PowerApps

Step 5

Set Title label Text property to this item.Tab

and Color property to Color.White

How To Create Tabs In PowerApps

Step 6

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

How To Create Tabs In PowerApps

Step 7

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

How To Create Tabs In PowerApps

Step 8

Add Form to screen and add Datasource to it

How To Create Tabs In PowerApps

Step 9

Select each DataCard and set Visible property

How To Create Tabs In PowerApps

Step 10

Run the application

How to create Tabs in PowerApps

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...!!