Power Apps Modern Tab List Control [Everything in Detail]

Do you know that Microsoft offers the Power Apps Modern Tab List Control, a new modern control? No need to worry!

This Power Apps tutorial will explain everything about Power Apps Modern Tab List Control, its essential properties, and how to work with it in a real scenario.

Additionally, we will learn how to make the Canvas app compatible with Power Apps Modern Controls.

Check out: Power Apps Modern Link Control [Detailed Tutorial]

Power Apps Modern Tab List Control

A tab is a navigation tool that enables users to change contexts within an app. In order for a list to appear in tabs, you can either put a list of items there or choose a field from a data table.

Simply, Power Apps Modern Tab list control makes it easier to choose a tab to switch between screens or interact with an app.

For your reference, the image below shows how the Modern tab list control appears in Power Apps.

This is the overview of Modern Tab List Control in Power Apps.

Power Apps Modern Tab List Control Properties

The Power Apps Modern Tab list Control’s key properties are shown in the table below:

Property	Description
Items(Items)	Items that will be displayed in the list of the tab. This could be an array (select value in the field) or a table’s data column. Example – [“Summary”, “Recent Transactions”, “Related Services”, “Chequebook”, “Account Overview”]
Accessibility Label	Label for screen readers.
Render size	Tabs can be displayed in Small, Medium, or Large.
Alignment	Tabs can be shown either vertically or horizontally. Vertical: Horizontal:
Position	X – Distance between the control’s left side and the screen’s left edge. Y – Distance between the top of the control and the top edge of the screen.
Size	Width – The gap between the control’s left and right sides. Height – Distance between the control’s top and bottom.
ContentLanguage	Indicates the audience’s language (for example, “en-US”).
DefaultSelectedItems	The control’s initial values are shown before the user interacts with it. For example, I want to set the default tab as Related Services. Then set its DefaultSelectedItems = [“Related Services”]
DisplayMode	There are three display modes: Edit – The user can enter the data View – Allows only to display data Disabled – The control is greyed out with disabled mode
OnChange	Actions that will be carried out when the Tab List’s Value property is modified.
OnSelect	The things that will happen when you press the tab group.
Visible	Specifies whether to display or hide the Modern Tab list control.

Check out: Power Apps Modern Badge Control [Complete Guide]

How to Add Power Apps Modern Tab list Control

Next, we’ll look at how to add a Modern Tab list control to Power Apps.

But first, we have to turn on the option to “Try out the modern controls” on the Power Apps Canvas app settings page.

You won’t be able to see the Modern controls in Power Apps if you don’t enable this option. To activate Power Apps Modern Controls, follow these steps:

• Sign in to Power Apps with your valid Microsoft credentials.
• Create a New Blank Canvas app (Apps -> + New App -> Canvas).

• Provide a unique name to the app (Power Apps Modern Tab list Control) -> Choose the Format as Tablet -> Click on Create.

• On the Power Apps Screen, Go to Settings (from the top) -> Select Upcoming features -> Click on the Preview tab -> Enable Try out the modern controls as shown below.
• Save and Publish the canvas app once.

• Then, Expand the + Insert tab (from the top) -> scroll down, and expand Modern controls -> Select Tab list as below.

• Once the Modern Tab list control is added to the screen, its default name will be TabList1. You can rename it as per your need.
• Next, we will add some values on the Modern Tab list control like Summary, Recent Transactions, Related Services, Chequebook, and Account Overview.
• To do so, select the Tab list control and add the above values on its Items property:

Items = ["Summary", "Recent Transactions", "Related Services", "Chequebook", "Account Overview"]

Make sure, you need to specify the choice values including the ” “ enclosed with a square bracket [].

• Save, Publish, and Preview the app. The values can be seen in the Modern Tab list control looking like tabs. Also, you can provide the Render size, Alignment as per your need.

This is how to add a Modern Tab list Control in Power Apps.

Have a look: Power Apps Modern Progress Bar [Detailed Guide]

How to Use Power Apps Modern Tab list Control

Let’s look at straightforward examples of how to use Power Apps Modern Tab list control. Here, we will see these below examples:

• How to display SharePoint Choices in Power Apps Modern Tab list Control
• How to display SharePoint Text Values in Power Apps Modern Tab list Control
• How to get current value from Power Apps Modern Tab list Control
• Power Apps Modern Tab list OnSelect

Display SharePoint Choices in Power Apps Modern Tab List Control

In this example, we will discuss how to display SharePoint Choices in Power Apps Modern Tab List Control.

• Let’s say I have a SharePoint list named IT Help Desk. This list has various columns (with different data types):
  • Title = Single line of text
  • Request ID = Number
  • Requested Date = Date
  • SR Type = Choice
  • Category = Choice
  • Priority = Choice
• Now I want to display all the Priority choices (Very High, Medium, Normal) in the Power Apps Modern Tab list control.

• To work around this, apply the code below on the Items property of the Power Apps Tab list control:

Items = Distinct(
    'IT Help Desk',
    Priority.Value
)

Where,

1. ‘IT Help Desk’ = SharePoint List Name
2. Priority = SharePoint Choice Column Name

• However, even after applying the code above, the tab list control will always be empty. You have to remove every field from the Data pane in order to display the SharePoint Choice values.
• Click on Edit (from the Properties pane) -> Select a field (Request ID) -> Click on ellipses (…) -> Remove. Like this, remove all the fields that are present inside the Data pane.

• Then, click on the + Add field -> Choose Value -> Add as shown below. Now you can see all the SharePoint choices in the Power Apps Modern Tab list control.

This is how to display SharePoint Choices in Power Apps Modern Tab List Control.

Display SharePoint Text Values in Power Apps Modern Tab List Control

Next, we will see how to display SharePoint Text Values in Power Apps Modern Tab List Control.

• In this case, I’ve used the Title column (Single line of text) from the same SharePoint List (IT Help Desk) as above. In the Power Apps Modern Tab list control, I now want to show every value in the SharePoint Title column.
• To achieve this, select the modern tab list control and set its Items property to the code below:

Items = Distinct(
    'IT Help Desk',
    Title
)

Where,

1. ‘IT Help Desk’ = SharePoint List Name
2. Title = SharePoint Single line of text column name

• You will see all of the title values as seen in the following screenshot once the code has been applied to the tab list control.

This is how to display SharePoint Text Values in Power Apps Modern Tab List Control.

Also, Check: Power Apps Modern Dropdown Control [Complete Tutorial]

Get Current Value from Power Apps Modern Tab List Control

Let’s say you want to retrieve the current tab value from Power Apps Modern Tab list control, then follow the code below.

• In the screenshot below, there is a Power Apps Modern Tab list control and a Text label control. I want to get the currently selected tab value in the label control.
• For example, the label control will display Power Automate because that is the current value in the tab list control.
• To do so, select the Text label control and set its Text property as:

Text = technologytablist.Selected.Value

Where,

technologytablist = Modern Tab list control name

This is how to get current value from Power Apps Modern Tab List Control.

Power Apps Modern Tab list OnSelect

Now we will explore how to work with Power Apps Modern Tab list control OnSelect. This means that when we click on a particular tab, it will open a new tab and redirect to some other pages.

• Suppose, in Power Apps, there is a Modern Tab list control with all these values: Home, Job Seekers, Employers, Expertise, Premium Courses.
• If I will click on the Job Seekers tab, then it will navigate to that particular web page with a new window or new tab as shown in the image below.

• To achieve this, select the Modern tab list control and set its OnSelect property to the code below:

OnSelect = If(
    TLPrimeJobs.Selected.Value = "Home",
    Launch("https://theprimejobs.com/")
);
If(
    TLPrimeJobs.Selected.Value = "Job Seekers",
    Launch("https://theprimejobs.com/job-seekers/")
);
If(
    TLPrimeJobs.Selected.Value = "Employers",
    Launch("https://theprimejobs.com/employers/")
);
If(
    TLPrimeJobs.Selected.Value = "Expertise",
    Launch("https://theprimejobs.com/areas-of-expertise/")
);
If(
    TLPrimeJobs.Selected.Value = "Premium Courses",
    Launch("https://theprimejobs.com/premium-courses/")
);

Where,

1. TLPrimeJobs = Modern tab list control name
2. Home, Job Seekers, Employers, Expertise, Premium Courses = Tabs that created in the tab list’s Items property
3. Launch = Launches a webpage or a canvas app.

The above code states that it will navigate to the specific Home website if the modern tab list control selected value is Home. Similar to this, it will redirect to the specific Job Seekers site if the modern tab list control’s selected value is Job Seekers, and so forth.

This is how to work with Power Apps Modern Tab list control onselect.

Furthermore, you may like some more Power Apps and Dataverse tutorials:

• Create Multiple Tabs in Power Apps Form [Lead Management Apps Example]
• How to Delete Power Apps Customize Form from SharePoint List
• Power Apps Modern Button Control [Complete Guide]
• How to Visualize Model Driven Data in Power BI
• Power Apps Modern Checkbox Control [How to Use]
• Power Apps Patch Error: The type of this argument ‘Attributes’ does not match the expected type ‘Record’.
• Power Apps Modern Information Button Control [Complete Guide]
• Power Apps Modern Text input Control [All in Detail]

This Power Apps tutorial explained everything about Power Apps Modern Tab List Control, its essential properties, and how to work with it in a real scenario like:

• How to display SharePoint Choices in Power Apps Modern Tab list Control
• How to display SharePoint Text Values in Power Apps Modern Tab list Control
• How to get current value from Power Apps Modern Tab list Control
• Working with Power Apps Modern Tab list OnSelect

Additionally, we learned how to make the Canvas app compatible with Power Apps Modern Controls.