Skip to main content

Notifications

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.

Rahman1005_0-1715861140400.png

 

 

Rahman1005_1-1715861140403.png

 

 

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)

 

Rahman1005_2-1715861140405.png

 

 

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.

 

Rahman1005_3-1715861140408.png

 

 

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

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

 

 

Rahman1005_4-1715861140409.png

 

 

Add An Edit Form Control:

 

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

 

Rahman1005_5-1715861140412.png

 

 

 

 

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

Rahman1005_6-1715861140415.png

 

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

 

Rahman1005_7-1715861140419.png

 

 

 

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

Rahman1005_8-1715861140421.png

 

 

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

Rahman1005_9-1715861140424.png

 

 

Save the canvas app and publish the apps.

Final screens.

Rahman1005_10-1715861140425.png

 

 

Rahman1005_11-1715861140426.png

 

 

Rahman1005_12-1715861140427.png

 

 

Rahman1005_13-1715861140428.png

 

 

Thank you..!

Comments

*This post is locked for comments