Power Apps Tabbed Form Using Tab List Modern Control

A Power Apps Tabbed form organizes data into groupings. Users can quickly navigate between tabs to find what they need. To create form tabs we place a tab list control above a form and show/hide its input fields based upon the current selection. In this article I will show you how to make a tabbed form.

Table of Contents
• Introduction: The Business Contacts App
• Setup The SharePoint List
• Insert A Power Apps Tab List Control
• Add An Edit Form Control
• Show/Hide Form Fields Using Conditional Logic
• Test The Power Apps Tabbed Form
• Submit The Power Apps Tabbed Form

Introduction: The Business Contacts App

Salespeople at a manufacturing company use Power Apps to manage their business contacts. They navigate through a tabbed form to see details about their contacts.

Setup The SharePoint List

Create a new SharePoint list called Contacts with the following columns:

Name (single-line text)
Company (single-line text)
JobTitle (single-line text)
Department (single-line text)
OfficePhone (single-line text)
MobilePhone (single-line text)
EmailAddress (single-line text)
StreetAddress1 (single-line text)
StreetAddress2 (single-line text)
City (single-line text)
StateProvince (single-line text)
AdditionalNotes (multiple-line text)

Once the SharePoint list setup is completed it should look like this:

Insert A Power Apps Tab List Control

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.

Use this code in the Items property of the tab list control to create the tab names.

["General", "Contact Info", "Location", "Notes"]

Add An Edit Form Control

Place a new form control directly below the tab list to display the Contacts data.

Add the Contacts datasource to the app then use this code in the Items property of the form.

Contacts

After doing this the fields in the Contacts SharePoint list appear in the form.

Show/Hide Form Fields Using Conditional Logic

When the “General” tab is selected we want to show the following cards and hide the rest.

Card
Company
JobTitle
Department

Select the cards and use code in their Visible property.

tab_ContactsForm.Selected.Value="General"

When the tab list control has “Contact Info” selected show only these fields:

Office Phone
Mobile Phone
Email Address

Write this code in the Visible property of their cards.

tab_ContactsForm.Selected.Value="Contact Info"

Then display these fields when the “Location” tab is selected with the tab list control

Street Address 1
Street Address 2
City
State Province

Use this code in the Visible property of the cards.

tab_ContactsForm.Selected.Value="Location"

Finally, show the Additional Notes field when the Notes tab in selected.

Write this code in the Visible property of the Additional Notes card

.

tab_ContactsForm.Selected.Value="Notes"

Test The Power Apps Tabbed Form

Go to preview mode and select each test one-by-one to test the form. When a tab is selected only specific input fields appear.

Submit The Power Apps Tabbed Form

Users of the tabbed form will want to save the data after they have navigated through each tab and input data. To do this, add a button at the bottom of the screen.

Use this code in the OnSelect property of the button to submit the form.

SubmitForm(frm_Contacts)

And write this additional code in the DefaultMode property of the form to indicate a new record should be created.

FormMode.New

Questions?

If you have any questions or feedback about Power Apps Tabbed Form Using Tab List Modern Control please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.