2022–05–13: check out my recent post about using components in Power Apps
Who’s got the button?
There’s nothing more awkward than staring at a UI trying to figure out where a certain button is, because:
- You expect there to be a button to do the action you intend to do; maybe it even existed at one point, but an update moved/hid it
- You hope there’s a button to do the action you intend to do because you’ve already done the prep work for the action
- The same button was in a different place on another screen
- Etc.
Keep it consistent. Everywhere.
Don’t do the things mentioned above to your users. Keep your UI consistent and have its actionable buttons in the same places; even more importantly, when you use an icon once to represent something, ensure that you only use that icon to represent that thing everywhere else.
Imagine your confusion if you selected a Save icon, only to have it navigate you to a new screen. Imagine having an icon that represents the amount of scrolls you received after completing a quest, only to use it nowhere else in the game (looking at you, WOTC — what did you do to Legends?!). It creates frustration for the end user, and you don’t want those tickets.
Navigational elements are most important
If your user has to guess where the Back button is, or how to move from screen to screen, it’s an awful time. Navigational elements need to be in the same spot, with the same icons, across screens. Go to your favorite app on your phone and look at their navigation buttons, most likely you haven’t noticed them because you take them for granted, and because they’re in predictable/easily accessible places. Good!
How do I do that in my app?
Power Apps affords you the ability to rapidly develop and deploy business solutions, and as I explored here, it’s important to do things right. Navigational elements are one of those to do correctly. Let’s explore one way to create a gallery that you can use to navigate from screen to screen within your app.
Remember there’s more than one way to create something; I just want to show as many options as I can, as succinctly as I can, so you can develop them further.
I have an app with 3 screens: Home, Details, and Contact. They’re blank but for a header, and they’re here to illustrate navigation. I also have a collection that contains the following:
I created a sample table that contains 3 columns: Title, Icon, and Screen. It also has 3 rows: Home, Details, and Contact.
We’ll reference the Title column in our navigation bar in a label; the Icon as an icon; the Screen will be used to navigate from screen to screen.
- Insert a gallery onto your canvas, and into the gallery, insert an icon and a label. Then set the Items property of the gallery to our collection, colNavigation:
2. Select the icon in the gallery and set its Icon property to:
ThisItem.Icon
ThisItem references that specific item in the collection colNavigation, and Icon references that item’s Icon property.
You’ll see the icons in the gallery change to reflect the different icons in the collection. Great!
3. Select the label and set its Text property to:
ThisItem.Title
Just like in the previous step, ThisItem references that specific item in the collection colNavigation, and Title references that item’s Title property. We’ve almost got a functioning navigation bar!
4. Select the gallery, and set its OnSelect property to:
This is a simple LookUp function that is used constantly, in different forms, throughout Power Apps. It’ll take you far! Let’s break it down. Read it just like you would an Excel formula, because that’s what we’re doing, we’re making a formula — read it from the inside-out:
LookUp(colNavigation, ThisItem.Title = Title, Screen)
- In the collection colNavigation, return the record that matches the formula of ThisItem.Title = Title. This formula checks the Title of the row in the gallery and finds the record that has a matching title, then returns its value in the Screen column. Think of this like a VLOOKUP. LookUp this value, in this range, return this value.
Now wrap the Navigate function around the above, and you get:
Navigate(LookUp(colNavigation, ThisItem.Title = Title, Screen), Fade)
- Navigate to the result of the LookUp, which is a screen, then do so by transitioning with a fade.
Not too complex!
Put it all together, and be consistent!
Copy that gallery across your screens, put them in the same place, and you’ve created consistent navigational elements in 5 minutes!
Now play around, select each of the items, and navigate from screen to screen. Intuitive, right?
Remember, this is just one way to make a gallery; there’s plenty of ways to make this better (use components!), and I promise you there’s many fun things to do with galleries. There’s also plenty of ways to make it look less garish, but I’ll leave that as an exercise for the reader.
Even if you don’t work with Power Apps, remember: your users need consistency, and you owe it to yourself and them to create something that facilitates that.
