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 upon 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 fellow below screen shots.
Setup The SharePoint List:
Create a new SharePoint list called Employee information with the following columns:
Employee Name (single-line text)
Employee Id (single-line text)
Department (single-line text)
Mobile Phone (single-line text)
Email Address (single-line text)
Address (single-line text)
Additional Information (multiple-line text)
Navigate to https://make.powerapps.com/ and 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 item property of the tab list control write below code.
["General", "Contact Info", "Location", "Additional Information"]
Add An Edit Form Control:
Add 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 select of "General" tab we want to show the following cards and hide the rest, select the cards and write code on visible property, prefer below screen short.
TabList1.Selected.Value="General"
- Employee Name
- Employee Id
- Department
On select of "Contact Info" tab we want to show the following cards and hide the rest, select the cards and write code on visible property, prefer below screen short.
- Mobile Phone
- Email Address
On select of "Location" tab we want to show the following cards and hide the rest, select the cards and write code on visible property, prefer below screen short.
- Address
Save the canvas app and publish the apps.
Final screens.
Thank you..!
*This post is locked for comments