Power Community

Power Community

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.

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..!

This post was originally published on this site

- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Create Brand Profiles in Customer Insights – Journeys to Create Cohesive Brand Experiences

In this blog, we will learn about one of the new features introduced by Microsoft in Dynamics 365 in...

More Articles Like This

- Advertisement -spot_img