\u00a0<\/p>\n
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.)<\/p>\n
Here are the three tabs shown separately, where all the\u00a0controls and formulas are consolidated on a single screen of a\u00a0tablet-format PowerApp.<\/p>\n
![\"\"](\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/GeneralTab.png\")
<\/p>\n
\u00a0<\/p>\n
![\"\"](\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/AddressTab.png\")
<\/p>\n
\u00a0<\/p>\n
![\"\"](\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/BillingAddressTab.png\")
<\/p>\n
Summary of What Carlos Did: <\/strong>We started with a tablet format. The tablet format is broken into 4 distinct parts:<\/p>\n 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)<\/strong><\/p>\n Let’s break down the 4 sections in a bit more detail below…<\/strong><\/p>\n Section <\/strong>1. <\/strong>The title and submit icon<\/b><\/p>\n \u200b<\/b>The first step in this process involves building a blank\u00a0app 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<\/strong>. This is very important for this tabbed UI design, and in fact the key tip that we can learn from:\u00a0As a result of selecting the layout,\u00a0we 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\u00a0with our mouse to\u00a0resize <\/strong>and copy <\/strong>the Canvas\u00a0control in order to create 3 (three) identical panels (stacked one on top of the other)\u00a0which will show up when the tabs are selected<\/strong>. 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.<\/p>\n Section 2. The top of the form repeating fields<\/b><\/p>\n 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\u00a0later.<\/p>\n 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’.)<\/p>\n Section 3. The tabbed panel area<\/b><\/p>\n The third section is where all the magic occurs. Two things happen here:<\/p>\n A.) We configure a new gallery <\/strong>for our tabbed navigation, and then\u00a0B.) <\/strong>we configure the Visible Property of each panel<\/strong>\u00a0to display only\u00a0when its’ tab is selected.<\/p>\n GalleryNav Gallery<\/strong>: We add a Horizontal Text Gallery <\/strong>above the panels we resized earlier, and configure it with only one (1)\u00a0data field\u00a0value for ‘Display Name’ (you’ll have to delete the extra fields that\u00a0are on the template\u00a0by default). Select the remaining template data field and set its’ Text <\/strong>property to ThisItem.Value.DisplayName<\/strong>\u200b.<\/p>\n Next, set the Items <\/strong>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:<\/p>\n [{ID:”General”, DisplayName:”General Info”}, {ID:”Address”, DisplayName:”Address”}, {ID:”Billing”, DisplayName:”Billing Address”},]<\/strong><\/p>\n \u200bNow you should see the gallery with General Info, Address, and Billing Address tabs. Feel free to use your mouse to drag\u00a0and resize the template area as well, if it looks to large or spaced out.<\/p>\n Setting \u200bPanel Visible Properties: <\/strong>Set each of the 3\u00a0panels’ Visible <\/strong>property as shown below:<\/strong><\/p>\n General Panel Visible Property: GalleryNav.Selected.Value.ID = “General\u201c<\/p>\n Address Panel Visible Property: GalleryNav.Selected.Value.ID = “Address\u201c<\/p>\n Billing Panel Visible Property: GalleryNav.Selected.Value.ID = “Billing\u201c<\/p>\n At this point you may add the input controls to each panel, as needed for\u00a0the\u00a0tabbed display names.<\/p>\n Section 4. The Orders Sub-Gallery (optional)<\/b><\/p>\n![\"\"](\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/tabbedareas4.png\")
<\/p>\n![\"\"](\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/resizedCanvas.png\")
<\/p>\n![\"\"](\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/gallery.png\"\/)
<\/p>\n