Power Apps Tabbed Form With An Awesome-Looking Design

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 AppSetup The SharePoint ListInsert Buttons To Use As Power Apps Form TabsChange The Button Fill For Current Form Tab SelectionTrack The Current Tab Name In A Variable Underline The Current Power Apps Form Tab To Improve UsabilityInsert A Single Column Edit FormShow Form Fields Only For The Current TabSaving 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.



Then write this code in the OnSelect property of the button. When the button is clicked a new record will be submitted 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.

Matthew Devaney

Subscribe
Notify of
guest
17 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Daniel
Daniel
10 months ago

Hi Matt,

I thought that I would let you know that I done this to one of my apps but instead of sending to one SharePoint list, I can send data to 4 different lists.

Last year I found that people in some cases had to fill out several forms after an incident and it was costing time to go to several lists.

So for others reading this article, this is a good starting point for more advanced form designs and multi reporting in one place

Cheryl Shah
Cheryl Shah
10 months ago

Hi Matt, I recently discovered your blog and it’s fantastic! This is a really nice looking design for a tabbed form, and efficient way of coding it. I just noticed one thing – in the section subtitled “Track The Current Tab Name In A Variable” you may have meant to write “Set” not “Self” in “Self(varCurrentTab, Self.Text)”

Patrick
Patrick
9 months ago

Hi Matt,

I do not know why, just trying to figure it out. The Pressfill RGBA(17, 77, 133, 0.70) is not working for me. It would seem the transparent is playing tricks on the button. Button hoverfill works but once the button is present color of the back label is seen and not the lighter shade of blue.

Matthew Contri
Matthew Contri
6 months ago
Reply to  Patrick

Same here, I have tried multiple things and cannot get it to stay the correct color. I am following hoping Matt has a response.

Matthew Contri
Matthew Contri
6 months ago
Reply to  Patrick

Patrick,

I fixed this issue just now with the following in the Fill property:

Switch(
    varCurrentTab,
    NameOfCurrentTab,
    RGBA(17, 77, 133, 0.70),
    Transparent
)
Chris
Chris
4 months ago

Hi Matt,

I have applied this to a vertical tabbed gallery however I am finding that the menu items are repeating themselves. See my screenshot.

Is there a way to stop this happening? I still need to add in another couple of items but currently the repeating issue is causing problems with space.

vertTabs.png
Chris
Chris
4 months ago

Hi Matt,

This is the code used:

[{Tab: "Harm to children"},{Tab: "Misuse of Drugs/Alcohol"},{Tab: "Non-use of prescribed medication"},{Tab: "Other offences"},{Tab: "Physical Health/Disability"},{Tab: "Risk from others (partner, family, friends)"},{Tab: "Risk to others due to Drug/Alcohol use"},{Tab: "Risk to others from living conditions"},{Tab: "Risk to others from partner"},{Tab: "Risk to others from pets"},{Tab: "Risks relating to mental health issues"},{Tab: "Self neglect"},{Tab: "Sexual exploitation or Sexual Offences"},{Tab: "Suicide/Suicidal thoughts or threats of"},{Tab: "Victim of harassment"},{Tab: "Violence to property"},{Tab: "Other"}]
jimbo
jimbo
4 months ago

Hi Matt:
I have used a horizontal gallery of Buttons quite successfully to provide a tabbed PowerApp screen.

The Gallery is set up with a table of values like this
[ { ID: 1, ButtonText: “General”, Tag=”GENERAL”}, … ].

The Gallery Buttons’ Text Properties are set from ThisItem.ButtonText. The color scheme for the Active buttons is generally a dark background and a light text; the Inactive (selected) button has a pale background and a dark text.

My approach may be useful in reducing the amount of button-management code in the OnSelect of the button(s). Adapting your example, varCurrentTab would be set in the onSelect action formula as below:-

UpdateContext({ varCurrentTab: ThisItem.Tag} )

After all Microsoft did bill this as a “low code” solution, didn’t they?

Chinda
Chinda
3 months ago

Hello Matt,

I currently have a form very similar to this. I wanted to ask, is there a way to have a ‘Next’ button to navigate users through the form instead of the tabs?

Per your example, inserting a next button to guide the user from ‘General’ to ‘Contact Info’

Please let me know, thanks!

A Different Matt
2 months ago

Hey there – this is amazing, thanks for putting it together. One question though, once I’ve set the fields to be Visible in specific tabs, am I kind of stuck when it comes to editing the form? It seems like I have to go back and set them all back to True, design the form (names, tooltips, etc) the way I want it, THEN set the fields to be visible for the specific tabs – am I missing something obvious?

Brian
Brian
2 months ago

Matt,
Thanks for sharing this. Love the look and functionality. Unfortunately, Text is not available for me to select when using Self. I am using PowerApps through MS Teams, so I’m not sure if that has anything to do with it or not. If Self.Text is not available, the whole thing results in a huge set of errors for me. Any ideas?