Power Apps Tabbed Form Using Tab List Modern Control

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-tabbed-form-using-tab-list-modern-control/. Author: Matthew Devaney.

Power Apps Tabbed Form Using Tab List Modern Control Posted by - Matthew Devaney on - February 18, 2024 13 Comments

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" ] Code language: JSON / JSON with Comments ( json ) 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" Code language: JavaScript ( javascript )

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" Code language: JavaScript ( javascript )

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" Code language: JavaScript ( javascript )

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" Code language: JavaScript ( javascript ) 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 Code language: CSS ( css ) Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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 M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps