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





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

19 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Steve Hanzelman
Steve Hanzelman
5 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 5 months ago by Steve Hanzelman
Robert
Robert
5 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
5 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
4 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.

Ciprian Popovici
Ciprian Popovici
5 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
4 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.
5 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
4 months ago

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

kol
kol
3 months ago

hi

how do you create next button to change on each tabs

Kashif
Kashif
3 months ago

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

Ameya
Ameya
3 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
2 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
1 month ago
Reply to  Jeferson

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

Per Inge Håland
Per Inge Håland
24 days 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.