Create a reusable Tab component to use in all your future Power Apps

Create a reusable Tab component to use in all your future Power Apps 

PowerApps brings us a lot of options and possibilities. With the upcoming Pages feature it will be useful to have some readily available components that will give you the flexibility of creating your pixel perfect pages with speed whilst keeping a uniform look and feel with the rest of you app. This article provides a short explanation on how to create a reusable component to create ‘tabs’ on a page. 

Using tabs on a page helps a lot in organizing its content an objective most makers will encounter in many apps. To facilitate reuse of functionality Power Apps offer the Component Libaries which allow you to re-use the components therein in any (canvas) app you create within the environment. 

While the styling is entirely up to you, the provided example will give the Tabs a very consistent Power Apps feel. Let’s find out how to easily create reusable “Tabs” in Power Apps. 

How To Create a new or open an existing ‘Components Library App’. 

  • Select the Apps 
  • Within Apps select the Component Libraries (preview) tab 
  • Select ‘+ New component library (preview)’ from the ribbon 

Within the new component library app you will be brought to the Components tab on the Tree view page with the Component1 component selected. Within an existing library navigate to the Components Tab and select ‘+ New component’.

Note: For the below setting, depending on when in the future you read this post, experience may differ.

Before working on the component turn on the ‘Enhanced component properties’. You can do this by selecting File and then Settings. In the settings pop-up select ‘upcoming features’, on the Experimental tab check ‘Enhanced component properties’.

Setting up the component

As a good practice rename your component, since we are making a tab component, I will name it ‘Comp_Tab_DCL’ which basically indicates it is a component called Tab and is maintained in the Demo Component Library (DCL).

Adjust the size of the component to be more in line with the expected actual use.

  • Width: 200
  • Height: 60

Adding a Label

Add a Label control which will hold the display name of the tab, for the purpose of this demo we will assume there are no multi language support requirements.

Add a label and rename it: Lbl_DisplayName_Tab

Change:         

Lbl_DisplayName_Tab.X to 0

Lbl_DisplayName_Tab.Y to 0

Lbl_DisplayName_Tab.Width to Parent.Width

Lbl_DisplayName_Tab.Height to Parent.Height

Lbl_DisplayName_Tab.Align to Center

Adding a Rectangle

Add a Rectangle control which will be an underlining indicator of whether this is the currently selected tab.

Add a rectangle and rename it: Rec_LineSelected_Tab

Change:

Rec_LineSelected_Tab.Height to 3

Rec_LineSelected_Tab.X to Lbl_DisplayName_Tab.PaddingLeft

Rec_LineSelected_Tab.Y to Parent.Height – Self.Height

Rec_LineSelected_Tab.Width to Parent.Width – (2 * Self.X)

Adding a Button

Add a Button control which will be the selector for the tab managing the logic for tab selection.

Add a button and rename it: Btn_TabSelection_Tab

Change:         

Btn_TabSelection_Tab.X to 0

Btn_TabSelection_Tab.Y to 0

Btn_TabSelection_Tab.Width to Parent.Width

Btn_TabSelection_Tab.Height to Parent.Height

Btn_TabSelection_Tab.Text to “”

Btn_TabSelection_Tab.Fill to Transparent

Btn_TabSelection_Tab.HoverFill to Transparent

Btn_TabSelection_Tab.PressedFill to Transparent

With these first elements defined we can continue in creating some of the component properties. Select Comp_Tab_DCL and add a custom property.

The first property we will create is the OnSelect property which will hold the expression that is fired when the component (instance) is selected. The OnSelect custom property should have following configuration:

  • Display name: OnSelect
  • Name: OnSelect

Description: The expression which is fired when selecting the component. Example: UpdateContext({varTabSelected: Comp_Tab_DCL.Text })

  • Property type: Behavior
  • Data type: Text

Display name

The second property to be created will be the Text property which will provide the DisplayName of the tab. Next to this if will be used as the comparison value for the selected tab variable on the screens where we will use the tab. The Text custom property should have following configuration:

  • Display name: Text
  • Name: Text
  • Description: The display name of the tab
  • Property type: Input

Data type: Text

Add Tabselected

The final property to be created will be the TabSelected property which will hold the variable of the currently selected tab on the screen. The TabSelected custom property should have following configuration:

  • Display name: Text
  • Name: Text
  • Description: The variable holding the currently selected tab value
  • Property type: Input
  • Data type: Text

Displayname

Now that all the elements are there, we can tie a couple of them together before we can test our re-usable tab component. To start with the display name of the tab, it should display the Text property of the component.

 

  • Select Lbl_DisplayName_Tab

Change:

  • Text to Comp_Tab_DCL.Text

Component selected

The second thing we’ll change is the rectangle, it should only be visible if the tab component is selected (and thereby currently active).

 

  • Select Rec_LineSelected_Tab

Change:

  • Visible to If(Comp_Tab_DCL.Text = Comp_Tab_DCL.TabSelected, true, false)

The final thing we must do before we can test this out is to connect the OnSelect property of the control to the Btn_TabSelection_Tab control.

  • Select Btn_TabSelection_Tab

Change:

  • OnSelect to Comp_Tab_DCL.OnSelect()

And that’s it… Congratulations on creating an easy re-usable Tabs component!

So there is a small instruction which comes with this component which we’ll shortly go through. In the Tree view switch to the Screens tab and insert an instance of Comp_Tab_DCL to the screen which will likely be called Comp_Tab_DCL_1.

  • Rename Comp_Tab_DCL_1 to Comp_SelectMe and follow the below instructions.
  • Select Comp_SelectMe

Change:

  • Text to “Select Me”
  • OnSelect to UpdateContext({varTabSelected: Self.Text})
  • TabSelected to varTabSelected
  • (Optionally adjust the size of the tab)

You just connected the screen variable ‘varTabSelected’ to the tab component which by selecting it will set it to the name (Text property) of the tab. Any other component visible property can now be made dependent upon the value in ‘varTabSelected’. For example

Container1.Visible is If(varTabSelected = “Select Me”, true, false)

You can add as many tabs as you need, just make sure the instances of the tabs on the screen have different names. Hierarchies can be achieved by changing the variable for example varSubTabSelected.

Good luck in using this! If this was useful for you, please follow us on LinkedIn and we’ll keep you posted on more interesting Powers.

MORE RELEVANT NEWS

How to maximize the Power Platform

How to maximize the Power Platform

Integrate Power BI and Apps in your daily applications In the (Microsoft) Power Platform it’s becoming easier to combine different tools to get the most out of your data. That is also since we have more options for data...

read more
Increase productivity with the right integration

Increase productivity with the right integration

PowerApps Portal Part 2: Sharepoint Integration Part 1 of the PowerApps Portal series covered the collaboration with partners and customers. I briefly touched on the Sharepoint Integration and I will go into more detail in...

read more

Get in Touch

Accelerate your innovation capacity