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.ValueDid You Enjoy This Article? 😺
Subscribe to get new Power Apps articles sent to your inbox each week for FREE
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.
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
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?
Robert,
The tab list control will do this until you select a field using the Edit Fields menu. I believe it’s a bug. But it’s an easy fix.
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.
Sammy,
I prefer using the tab list only as a way to change filters in a gallery or show/hide controls on the same screen. My reason is the tab swtiching animation won’t fully complete before you change screens.
But if you still want to do it here’s how. Plcae this code in the OnSelect property of all Tab lists across all screens:
Set(
gblSelectedTab,
TabList1.Selected.Value
);
Switch(
gblSelectedTab,
“Tab 1”,
Navigate(Screen1),
“Tab 2”,
Navigate(Screen2)
)
Then use this code in the Default property of each tab list:
gblSelectedTab
Make sure to reset the Tab List in the screen’s OnHidden property so it continues to be updated.
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
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.
Looking forward to this component getting some more modifiable fields (Fill, Font, Font Size) so that it becomes worth using.
Eric,
Me too. I hope theming will be on the way soon!
Is it possible to set a selected tab via a buttons onselect property?
Corie,
Yes. Set a variable in the OnSelect property of the button. Then use that variable in the default property of the tab.
hi
how do you create next button to change on each tabs
How to beautify these TABS i.e. Color, Background etc
Kashif,
There’s not any way to do this yet.
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
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
Thank you! I have been trying this for a while 🙂
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.