SharePoint MVP Blog - Part 1: Handling Tab Control Scenarios in PowerApps for Full Screen Formats
Inspired by our SharePoint MVPs, PowerApps Engineering Manager Carlos Aguilar Mares offers this really practical design for PowerApp business form designers looking for a "Tabbed User Interface" to save space on a wide format application. I enjoyed learning from Carlos and documenting the steps he took to make this happen. Later this week I will post a Part 2 on this topic, which will demonstrate my own tabbed UI design option that would work best for mobile phones which have less space to work with.
Important: See the P.S. at the bottom of this blog where I share my PowerApp File, and a PowerPoint Presentation that goes into much more detail (for those that want to try this out exactly as shown below).
Carlos created a single page app, where users could click through the tabs, and enter data for each tab independently. When the checkmark at the top right is clicked, the data is submit to the parent list on SharePoint. (FYI: We only show the Orders gallery here, but we did not configure how one would add a new order so that we could focus on the tabbed UI.)
Here are the three tabs shown separately, where all the controls and formulas are consolidated on a single screen of a tablet-format PowerApp.
Summary of What Carlos Did: We started with a tablet format. The tablet format is broken into 4 distinct parts:
1. The title and submit icon, 2. The top of the form repeating fields, 3. The tabbed panel area, and 4. The Orders Sub-Gallery (optional)
Let's break down the 4 sections in a bit more detail below...
Section 1. The title and submit icon
The first step in this process involves building a blank app from scratch using the Tablet Format. Once the blank app opens, you'll need to select the first layout in the list of template layouts. This is very important for this tabbed UI design, and in fact the key tip that we can learn from: As a result of selecting the layout, we are presented with a "Canvas" control. The only way to get a "Canvas" control on the screen is to select from the layouts panel. After which we will drag with our mouse to resize and copy the Canvas control in order to create 3 (three) identical panels (stacked one on top of the other) which will show up when the tabs are selected. We also add an icon at the top right that we will configure later with a Patch formula so as to submit all the input fields to our SharePont List.
Section 2. The top of the form repeating fields
Using typical PowerApp controls, we'll add the labels and the Text Input controls at the top of the form. It's a good idea to name your controls so that you'll find them again easily later.
There are two labels (TextBox controls), and two Text Input controls at the top of the form. (These are typically assumed to apply to everything on the screen, so some people call these 'repeating fields'.)
Section 3. The tabbed panel area
The third section is where all the magic occurs. Two things happen here:
A.) We configure a new gallery for our tabbed navigation, and then B.) we configure the Visible Property of each panel to display only when its' tab is selected.
GalleryNav Gallery: We add a Horizontal Text Gallery above the panels we resized earlier, and configure it with only one (1) data field value for 'Display Name' (you'll have to delete the extra fields that are on the template by default). Select the remaining template data field and set its' Text property to ThisItem.Value.DisplayName .
Next, set the Items Property of this new horizontal gallery to hard code the tabbed items (which also provides a way to reference them by their Display Name) as shown below:
[{ID:"General", DisplayName:"General Info"}, {ID:"Address", DisplayName:"Address"}, {ID:"Billing", DisplayName:"Billing Address"},]
Now you should see the gallery with General Info, Address, and Billing Address tabs. Feel free to use your mouse to drag and resize the template area as well, if it looks to large or spaced out.
Setting Panel Visible Properties: Set each of the 3 panels' Visible property as shown below:
General Panel Visible Property: GalleryNav.Selected.Value.ID = "General“
Address Panel Visible Property: GalleryNav.Selected.Value.ID = "Address“
Billing Panel Visible Property: GalleryNav.Selected.Value.ID = "Billing“
At this point you may add the input controls to each panel, as needed for the tabbed display names.
Section 4. The Orders Sub-Gallery (optional)
The Orders gallery shows the Orders made by the Customer in this profile (being driven from a separate SharePoint List). To do this we add a Vertical Text Gallery, and bind that with the "Items" property below. This filters the column "Title" in Orders with the column "Owner" in the target SharePoint List. (We do not cover new entries into the Order's list in this blog due to topic complexity.)
Set the Items Property of the Orders Gallery to: Filter(Orders,Title=TextInputOwner.Text)
Note: Using a Lookup column will not work in this scenario due to current SharePoint column constraints. Therefore, I used the Order and Title columns as my relationsihp instead (see the PowerPoint referenced in the P.S. below for more detail on the SharePoint lists).
The Patch Function for the Check (submit) Icon (in case you want to see this submit to the SharePoint List):
Patch(GeneralCustomerDetails,Defaults(GeneralCustomerDetails),
{Title:TextInputProductID.Text,
Owner: TextInputOwner.Text,
FirstName:TxtFirstName.Text,
LastName:TxtLastName.Text,
MailStreetAddress: TxtMailStreetAddress.Text,
MailCityAddress: TxtMailCityAddress.Text,
BillingStreetAddress: TxtBillingStreetAddress.Text,
BillingCityAddress: TxtBillingCityAddress.Text,
MailStateAbbrev: TxtMailStateAddress.Selected.Value,
BillingStateAbbrev: TxtBillingStateAddress.Selected.Value})
Closing Thoughts
I totally love what Carlos did here, and I would recommend it any day! I'm sure this will help you to optimize your PowerApps experience! Please give Carlos some love below in the comments for being so deeply inspired! ;)
FYI for Part 2: Later this week I will also share my own modern mobile design for a tabbed UI that optimizes the space available on mobile phones.
P.S. The PowerApp and PowerPoint explaining steps to do this are on my OneDrive here. The PowerPoint explains each and every step in greater detail than this blog. Suggestion: Before opening the *.MSAPP file, I recommend that you create the 2 sample SharePoint Lists using the exact same list names (if you want the app to work without having to change the formulas). Since your SharePoint lists will be on a different URL path, after opening the *.MSAPP file, just remove and then add-back the Connections with the same name from your SharePoint Online Lists. If you use the same list schema/field names, the warning icons will go away as soon as you add-back the connections.
Enjoy!
Audrie (@ArtsyPowerApper)