Power Apps Tabbed Form Using Tab List Modern Control

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 AppSetup The SharePoint ListInsert A Power Apps Tab List ControlAdd An Edit Form ControlShow/Hide Form Fields Using Conditional LogicTest The Power Apps Tabbed FormSubmit 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.

Matthew Devaney

Subscribe
Notify of
guest

3 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Lijun Chen
Lijun Chen
2 months ago

Thanks for the blog. This modern control is very useful.

Nhan
Nhan
2 months ago

i can not see tab list control in Studio

Joe
Joe
1 month ago
Reply to  Nhan

If you can’t see the tab control, check to make sure you have Modern Controls preview enabled as an upcoming feature.