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