Part 2 of Tabbed User Interface – Mobile Version
Last week Carlos gave us an excellent example of a tabbed format within a tablet format PowerApp. Check it out here. This is another example of a tabbed format for mobile phones. The design is by Mehdi Slaoui Andaloussi who is ingenious when it comes to PowerApps patterns. I've enjoyed using this format as well because it's quick, easy to configure, and data driven. We've purposely left the actual screens blank to focus on the tabs, but you can just about do anything you want with that space. (See the last section of this blog where I share screen shots of a Bug Progress Reporting PowerApp that I created using Mehdi's pattern.)
Full Screen View
Close up of gallery navigation area on the bottom.
Here are the steps to build Mehdi's app in 5 simple steps:
Preparation: Gather your media in preparation for this app build. You'll need 4 icons for the navigation using blue outline color: name them
- home_selected
- favs_selected
- discover_selected
- more_selected
and 4 icons just like those but with grey outline color, named as follows:
- home
- favs
- discover
- more
Once you have saved your icons to your desktop, open a brand new blank PowerApp in Phone Layout and upload the 8 icons into the media storage.
(Content Tab>>Media>>Browse (top right)>>>Browse to and select the icons you've prepared.
Screen shot below showing 3 of the sets of icons in the media of the app.
Ok….now we're ready to do this!
STEP 1: Since this tabbed format is really a simple method of screen navigation, we start by adding 4 screens to a blank phone format app (You can delete the default Screen1). Here are the names of the 4 screens, please rename each one to match these:
- HomeScreen
- FavsScreen
- DiscoverScreen
- MoreScreen
STEP 2: Now set the OnVisible property of the first screen (HomeScreen) to the following (this creates a new collection called MenuItems every time the app opens with 4 data fields):
UpdateContext({selectedScreen:HomeScreen});
ClearCollect(MenuItems, {
Name: "Feed",
Screen:HomeScreen,
Icon: home,
SelectedIcon: home_selected
}, {
Name: "Profile",
Screen:FavsScreen,
Icon: fav,
SelectedIcon: fav_selected
}, {
Name: "Discover",
Screen:DiscoverScreen,
Icon: discover,
SelectedIcon: discover_selected}
, {
Name: "More",
Screen:MoreScreen,
Icon: more,
SelectedIcon: more_selected
})
STEP 3: Next, we insert a Horizontal Text Gallery Control (Insert>>>Gallery>>>Horizontal Text)
Configure the Items property of the gallery to our new collection MenuItems
Select the template of the new gallery (left most section), removing all but 1 data field. Set the remaining data field Text property to ThisItem.Name
Lastly, set the Color property of Name to (adjust colors to match your own icons):
If(ThisItem.Screen = selectedScreen, RGBA(74, 144, 226, 1),RGBA(40, 40, 40, 1))
(This might be a good time to save your app for safe keeping.)
STEP 4: Now we are going to complete the configuration of the Trigger Region where our app users will tap to change screens. Reselect the template region, and insert an Image control (use your mouse to resize things as needed). Set the Image property of the Image Control to:
If(ThisItem.Screen = selectedScreen, ThisItem.SelectedIcon, ThisItem.Icon)
The template region itself should be renamed triggerRegion.
Reselect the entire gallery: set the Height property to 75, and the Width property to 640.
See screen shots below:
STEP 5: Copy and Paste the Gallery onto the bottom of each screen. Also add a label near the top of each screen with the screen name for now, as this will help you validate that you are on the right screen for testing.
Run and test your new app, you'll see that it just works!
(Save and share your app as needed.)
Here is an app I designed using the approach I learned from Mehdi:
I have uploaded Mehdi's app to my OneDrive here so that you may download it to see how it works!
I hope this helps you to extend your tabbed formats onto your phone apps as well.
Happy PowerApping,
Audrie
(Twitter: ArtsyPowerApper)