March 19, 2024

SamTech 365

PowerPlatform, Power Apps, Power Automate, PVA, SharePoint, C#, .Net, SQL, Azure News, Tips ….etc

Power Apps Tab Controls

As you probably already know, there are couple of important controls that are still missing in PowerApps, e.g. Progress Bar, Tabs, Accordion….etc.

I have posted an article about how to create custom Progress bars, which you can check here –> https://daoudisamir.com/progress-bar-in-powerapps/

When it comes to presenting forms and screens, I am a big fun of having everything in one page and avoiding the users the need to click multiple times and jumps between screens to view different information. So the idea is that I organize my data and functionalities around Tabs whenever it is appropriate (doable and suitable).

Here are couple of examples where I used tabs in PowerApps

How can I implement Tabs in PowerApps ?

For the Tab Control, this can be simplified as follow : A set of buttons (Tabs) and their respective Containers (Content).

1.    The buttons:

As seen like this, we can start by laying couple of buttons, ideally of the same size, fonts …etc.

You can either have no gap between your buttons or leave a fixed space between the buttons.

For this demo, I will use three buttons (Btn1, Btn2, Btn3) to create a 3 Tabs controls.

2.    The containers:

For each button we need its respective container, we will add here three Containers, with distinctive content.

I will call my containers (Container1, Container2, Container3).

I will have to make sure that all the containers are positioned at the same X,Y location, so when my users switch between tabs, content is not moved, even the slight different will be noticeable.

At this stage your solution should look like this:

3.    The “SelectedTab” Variable

Now, where all the magic happens, the SelectedTab variable!

This is a variable that will be set by each button to a specific value.

Btn1 -> Set (SelectedTab,1)

Btn2 -> Set (SelectedTab,2)

Btn3 -> Set (SelectedTab,3)

It allows us to know which tab has been selected, and this Variable will be used for two main purposes:

  • Set the Fill colour of each button, to highlight the selected tab.
  • Show/Hide the containers, to only display the container of the selected tab, by using the visible property.

Set the fill colour of each button:

Instead of having the same background colour for each button, we can do something slight lightly different. What I want to achieve here, is to have a grey (disabled colour)  for all the buttons, except the selected one (let’s say we go with blue for the selected button).

To achieve this dynamic colouring of the buttons, we need to use a very simple formula in the Fill property of the button:

Blue = RGBA(56, 96, 178, 1) Grey = RGBA(166, 166, 166, 1)

Fill Property

Btn1 -> If(SelectedTab=1,RGBA(56, 96, 178, 1),RGBA(166, 166, 166, 1))

Btn1 -> If(SelectedTab=1,RGBA(56, 96, 178, 1),RGBA(166, 166, 166, 1))

Btn1 -> If(SelectedTab=1,RGBA(56, 96, 178, 1),RGBA(166, 166, 166, 1))

Set the Visible property of each container based on “SelectedTab” variable

Now, the last step, is to set the visible property for each container based on the SelectedTab Variable

Visible Property

Container1 -> If(SelectedTab =3, true, false)

Container2 -> If(SelectedTab =3, true, false)

Container3-> If(SelectedTab =3, true, false)

 

The result:

That’s all, you have now your tabs control, ready for you to drop the appropriate content in each tab.

Your final result should be something like this: