Power Apps Tabbed Form Using Tab List Modern Control

In this article, I will show you how to make a tabbed form. We will create form tabs we place a tab list control above a form and show/hide its input fields based on the current selection.

We need to enable modern controls in your app. Click on Settings > General and search for "modern". Enable the Modern controls and themes feature.

Please follow the below screenshots.

Setup The SharePoint List

Create a new SharePoint list called Employee Information with the following columns.

1. Employee Name (single-line text)
2. Employee ID (single-line text)
3. Department (single-line text)
4. Mobile Phone (single-line text)
5. Email Address (single-line text)
6. Address (single-line text)
7. Additional Information (multiple-line text)

Navigate to https://make.powerapps.com/ Open Power Apps Studio and create a new app from blank. Add a text control onto the screen to show the title “Contacts.” Then insert a tab list control.

On the item property of the tab, list control write the below code.

[
    "General",
    "Contact Info",
    "Location",
    "Additional Information"
]

Add An Edit Form Control

Add a new form control directly below the tab list to display the Employee data.

Add the employee information data source to the app then use this code in the Items property of the form.

We need to write logic on fields to Show/Hide Fields on the Form.

On selecting the "General" tab, we want to show the following cards and hide the rest, select the cards, and write code on the visible property, preferring the below screenshot.

TabList 1. Selected.Value="General"

• Employee Name
• Employee Id
• Department

On selecting of "Contact Info" tab we want to show the following cards and hide the rest, select the cards, and write code on the visible property, prefer the below screen short.

• Mobile Phone
• Email Address

On selecting the "Location" tab we want to show the following cards and hide the rest, select the cards, and write code on the visible property, prefer the below screenshot.

Address

Save the canvas app and publish the apps.

Final screens

Thank you!