How To Create Tabs In PowerApps

In this blog, I’ll show you a way to create a form that has the appearance of tabs.

Step 1

Create a Canvas App.

Step 2

From the Insert tab, insert a button. If we want our button in the text, instead of Button, type the text you'd like your tab to say. (ex: Tab1. Tab2, Tab3)

Step 3

From the Insert tab, go to Form section -> add Edit Form and place it below the buttons.

Step 4

To add background color to the form, from the Home tab, follow this Fill Section -> choose the color.

Step 5

Select each button, go to the Advanced pane on the right. Change the RadiusTopLeft to 20, and RadiusTopRight to 20. This gives your tabs some curvature at the top.

Step 6

Right-click on each button -> Reorder -> Send To Back ( to give tab curvature at the bottom).

Step 7

Select each tab, choose OnSelect property.

Considering our form will have 3 tabs,

  • OnSelect of Tab1  - Set(Tab1,true);Set(Tab2,false);Set(Tab3,false)
  • OnSelect of Tab2 - Set(Tab2,true);Set(Tab1,false);Set(Tab3,false)
  • OnSelect of Tab3 -Set(Tab3,true);Set(Tab2,false);Set(Tab1,false)

Step 8

To change the tab color when tab is active, choose Fill Property from the Advance pane.

  • Fill of Tab1 -If(Tab1,RGBA(0,42,74,1),RGBA(204,204,204,1))
  • Fill of Tab2 -If(Tab2,RGBA(0,42,74,1),RGBA(204,204,204,1))
  • Fill of Tab3 -If(Tab3,RGBA(0,42,74,1),RGBA(204,204,204,1))

Step 9 - Add content/ fields to respective tabs

Choose the DataCard to be brought under tab1 and change the Visible property of the DataCard to Tab1, the same applies for the other two tab content.

OUTPUT

SUMMARY

In this blog, you learned how to create tabs in PowerApps. I hope this blog helps you. :)