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

11 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Steve Hanzelman
Steve Hanzelman
1 month 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 1 month ago by Steve Hanzelman
Robert
Robert
1 month 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
1 month 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.

Ciprian Popovici
Ciprian Popovici
1 month 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
13 days 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.
1 month 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
15 days ago

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