Power Apps Tabbed Form With An Awesome-Looking Design

When a Power Apps form is very long a tabbed form can make it more organized and easier to use.  A tabbed form is simple to build – create one button for each tab at the top of the form, when the user clicks on a tab store it’s name in a variable and then show only fields that should appear on that tab.  Your users will love having all similar fields grouped together one one screen without having to scroll.

In this article I will show you how to make a good-looking design for a Power Apps form with tabs connected to a SharePoint list.

Table Of Contents:
•  Introduction: The Sales Contacts App
•  Setup The SharePoint List
•  Insert Buttons To Use As Power Apps Form Tabs
•  Change The Button Fill For Current Form Tab Selection
•  Track The Current Tab Name In A Variable 
•  Underline The Current Power Apps Form Tab To Improve Usability
•  Insert A Single Column Edit Form
•  Show Form Fields Only For The Current Tab
•  Saving Data In A Tabbed Form

Introduction: The Sales Contacts App

The Sales Contacts App is used by salespeople at a paper supply firm to view information about the people they sell products to. The salesperson can move to another section by clicking the tabs at the top of the form.

Setup The SharePoint List

Create a new SharePoint list called Contacts with the following columns. All columns are type single-line text with the exception of AdditionalNotes which is type multiple-line text.

• Name
• Company
• JobTitle
• Department
• OfficePhone
• MobilePhone
• EmailAddress
• StreetAddress1
• StreetAddress2
• City
• StateProvince
• AdditionalNotes

Insert Buttons To Use As Power Apps Form Tabs

Open Power Apps Studio and create a new tablet app from blank. Set the app theme to Office Blue.

Insert a new label with the text “Sales Contacts” at the top of the screen to serve as a title bar.

Use this code in the following property of the label.

Fill: RGBA(0, 60, 106, 1)
Font: "Helvetica"
Height: 160
PaddingLeft: 5
PaddingRight: 5
PaddingTop 5
PaddingBottom: 60
Width: App.Width
X: 0
Y: 0

Then create 4 new buttons which will become the form tabs. Position them side-by-side at the bottom-center of the titlebar label. Each button’s text should reflect the name our form tabs: GENERAL, CONTACT INFO, LOCATION and NOTES.

To match the size and font in the image above use this code in the following properties of the tab buttons.

Font: "Helvetica"
Height: 60
Width: 180

Change The Button Fill For Current Form Tab Selection

When a tab becomes selected it should change color to show which section of the form the user is viewing. For the current tab we will make the button fill a brighter blue than the titlebar. Then we will leave the other tabs transparent so they blend into the titlebar.

Use this code in the properties of all 4 button tabs to achieve the desired styling.

Fill: Transparent
HoverFill: RGBA(17, 77, 133, 0.70)
PressedFill: RGBA(17, 77, 133, 0.70)

Track The Current Tab Name In A Variable

Next we will write the logic to track which form tab the user is currently viewing.

Write this code in the OnSelect property of each button to set the current tab to match the button’s text.

Set(varCurrentTab, Self.Text)

We should also make sure to set the current tab to GENERAL when the screen becomes Visible. Otherwise, no tab will initially be selected and nothing will show in our form once we build it.

Our tabbed form now has tabs that are highlighted for the current section and a hover effect when the user moves the cursor over them.

Underline The Current Power Apps Form Tab To Improve Usability

The form tabs have the same color whether the user has selected a tab or is hovering over a tab. To improve usability we will also indicate the current tab another way – a white underline. Insert a new label directly below the the GENERAL tab.

Make the label as wide as each button and 5 pixels tall.

Height: 5
Width: 180

Now we will write some code to update the label’s position based on which tab is selected.

Write this code in the X property of the white label.

Switch(
    varCurrentTab,
    "GENERAL",
    btn_General.X,
    "CONTACT INFO",
    btn_ContactInfo.X,
    "LOCATION",
    btn_Location.X,
    "NOTES",
    btn_Notes.X
)

When a form tab is selected the white label moves to a new position directly below the button text.

Insert A Single Column Edit Form

We are finished building the tabs system for our form so the next task is to add the form itself. Start by adding a connection to the Contacts SharePoint list to the app.

Then insert a new Edit Form and use the Contacts SharePoint list as a datasource. Delete the Title and Attachments fields. We do not require them for this app.

Change the form to a 1 column form with the layout vertical using the right-pane. The form fields will now be stacked in a single column.

Show Form Fields Only For The Current Tab

When a user selects a form tab only fields in the current section should appear and the remaining tabs should be hidden. We can make this happen with some simple logic.

Select the following 4 DataCards: Name, Company, JobTitle and Department. Then use the following code in the Visible property of the cards. Now they will only show when the current tab is GENERAL.

varCurrentTab="GENERAL"

Do the same for OfficePhone, MobilePhone and EmailAddress:

varCurrentTab="CONTACT INFO"

StreetAddress1, StreetAddress2, City and StateProvince:

varCurrentTab="LOCATION"

And finally for AdditionalNotes:

varCurrentTab="NOTES"

One more thing: the additional notes field only has a enough space for a single line of text. However, we defined it as a multiple-line text field in SharePoint. Increase the height to 340 pixels and change the mode to multiline to fix this problem.

Now the Power Apps tabbed form we built only shows the fields for the current selection when clicked. Make sure the FormMode is set to FormMode.New otherwise, you will get an error that says form isn’t connected to any data yet.

Saving Data In A Power Apps Tabbed Form

Saving the data in a Power Apps tabbed form is easy. It can be done exactly the same way as a normal non-tabbed form. Insert a green button onto the screen directly below the form.

Change the DefaultMode property of the form to this code to create a new record when the form is submitted.

FormMode.New

Then write this code in the OnSelect property of the button submit form data to the SharePoint list.

SubmitForm(frm_Contacts)

Questions?

If you have any questions about Power Apps Tabbed Forms With An Awesome-Looking Design 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.