Power Apps Tab List – Modern Controls


Purpose

A Power Apps tab list control displays a set of tabs, each representing a different section or page within an app. Its purpose is to allow users to easily navigate between related content and switch between different views or modes.


Properties

AccessibleLabel
Screen readers will voice this text when a user selects the control
Alignment
Sets the tab bar orientation from left-to-right or from up-to-down

Options:

= “Horizontal”



= “Vertical”


ContentLanguage
Describes the language used to the audience (e.g. “en-US”)
DefaultSelectedItems
Initial values displayed in the control before the user interacts with it
DisplayMode
Selects the mode: Edit, View or Disabled. In Edit mode the user can input values. In View mode the user can only see the values and in Disabled mode the control is greyed-out.
Height
Distance from the top of the control to the bottom
Items
Table containing values displayed inside the radio group

Example:
[“Tab 1”, “Tab 2”, “Tab 3”, “Tab 4”]
OnChange
Actions that will be executed when the Value property of the checkbox changes
OnSelect
Actions that will be executed when the radio group is pressed.
Render Size
Determines the tab bar control size

Options:
= “Small”
= “Medium”
= “Large”
Visible
Determines whether to show or hide the control
Width
Distance from the left side of the control to the right side
X
Distance from the left edge of the screen to the left side of the control
Y
Distance from the top edge of the screen to the top of the control




How To Use The Power Apps Tab List Control

1. Select the Tab List control in Power Apps studio. Create tabs by updating the Items property with a single column list.

["All", "Submitted", "Accepted", "Rejected"]



2. Set the Default property of the control to determine the initial tab being displayed

"All"



3. Get the tab list’s current value by using this code.

TabListCanvas1.Selected.Value




Filter A Gallery With A Tab List Control

A tab list control can be used to filter a gallery. Read this tutorial for instructions on how do it with a tab list.




Filter A Form With A Tab List Control

By pairing a tab list control with a form control a tabbed form can be created. Read this tutorial for instructions on how do it.







Questions?

If you have any questions or feedback about Power Apps Tab List – Modern Controls please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Subscribe
Notify of
guest

28 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Steve Hanzelman
Steve Hanzelman
11 months ago

Matt,
As always thanks for putting this information together.

I do not see Default as a property, only DefaultSelectedItems.

I tried to use the numeric key rather than the value as the DefaultSelectedItem, but no luck.

This worked for Value, Filter([“All”,”Interventions”,”Goals”,”Accommodations”,”Services”,”Enrollment”],Value=”All”).

We are currently at Authoring Version 3.23042.5.

Thanks,
Steve

Last edited 11 months ago by Steve Hanzelman
Tracy
Tracy
17 days ago

Same here, no Default property.

Last edited 17 days ago by Tracy
Robert
Robert
11 months ago

Hey,

Thanks for sharing.

Whenever I put text values in the “Items” property it returns what I interprets as a random numeric value, anyone know why?

Sammy Hassan
Sammy Hassan
11 months ago

Have you tried using this inside a component to act as a screen navigation? When I try, it works in so much as it lets me navigate, however it doesn’t retain the selected item from screen to screen.

Phil Dunns
Phil Dunns
10 months ago

Then use this code in the Default property of each tab list:

gblSelectedTab

There is no Default property on the tab list, how would this work ? Thanks.

Jala
Jala
2 months ago
Reply to  Phil Dunns

I would assume it goes under DefaultSelectedItem. However, when I place it there. The tab list selections work as expected but the navigation feature no longer works. Please advise.

Ciprian Popovici
Ciprian Popovici
11 months ago

How can be reset tab value to default value . If add a separate button to do that , what is the code for this modern control.
Thank you

Thierry
Thierry
10 months ago

On each screen for the tab list controls defaultselectedItems property use this type of formula;
Last(FirstN(ColTab, n)).Value
Where n is the position number of the tab on the relevant screen.

on visible property of each screen use the following:
ClearCollect(ColTab,[“Tab1”,”Tab2”,”Tab3”])
on hidden property of each screen use the following:
Clear(ColTab))

This works perfect for me.

Eric J.
Eric J.
11 months ago

Looking forward to this component getting some more modifiable fields (Fill, Font, Font Size) so that it becomes worth using.

Corie Cornelius
Corie Cornelius
10 months ago

Is it possible to set a selected tab via a buttons onselect property?

kol
kol
9 months ago

hi

how do you create next button to change on each tabs

Kashif
Kashif
9 months ago

How to beautify these TABS i.e. Color, Background etc

Ameya
Ameya
9 months ago

Hii I’m using tabs from modern controls,
right now I have selected tab Item so it is showing me a form after clicking on submit button control should go on next tab item automatically how can I achieve this

Jeferson
Jeferson
8 months ago

To reset the default selected, just create a variable using updatecontext, just like below:
UpdateContext({vPLN_reset_tab_list_loja: [“”]});;UpdateContext({vPLN_reset_tab_list_loja: [“Geral”]})

and put into defaultselecteditem

Alejandro
Alejandro
7 months ago
Reply to  Jeferson

Thank you! I have been trying this for a while 🙂

Per Inge Håland
Per Inge Håland
6 months ago

Using the TabList to navigate screens:
Created a table in App Formulas – navMenu = Table({nav: “Nav01”, Screen: scrAppScreen01}, {nav02, Screen: scrAppScreen02})

Created a global variable in App.OnStart: Set(varCurrentNav, Index(navMenu,1);

On the tablist:
Items: navMenu
DefaultSelectedItems: LookUp(navMenu, nav = varCurrentNav.nav)
OnSelect: Set(varCurrentNav, Self.Selected); Navigate(Self.Selected.Screen);

No the animation between the tablists on each screen works.

Marcin Wieczorek
Marcin Wieczorek
2 months ago

Thank you Per Inge Håland, from my experience this approach works the best so far.

Jala
Jala
2 months ago

Could you explain this syntax?

navMenu = Table({nav: “Nav01”, Screen: scrAppScreen01}, {nav02, Screen: scrAppScreen02})

Why is nav:”nav text” not repeated in the next bracket?

Last edited 2 months ago by Jala
Stefan
Stefan
2 months ago

Hi,
Is it possible to automatically scroll to the top when switching between tabs? If I’m at the bottom of my first tab and press the next tab, the scollbar stays at the bottom.
Thanks,
Stefan

Wayne Hunt
Wayne Hunt
1 month ago

Is there any way to create a table, say in App.OnVisible that would let us easily clone the tab list on each new page and inherit the name / onselect from the table RATHER THAN having to define it on each and every page?