Power Apps is the incredible tool by Microsoft in which citizen developers can quickly build their own custom business application. If you’re just starting out with Power Apps, I’d like to share some knowledge about adding Power Apps navigation menus in order to help you make the best use of available real estate on the screen when developing a Power App.
In my video included at the end of this post, I’ll demo using the on-demand navigation drop down menu, be sure to watch this for more a more detailed view.
- I’ve created an app to showcase my child’s artwork and I want to separate the art by medium (clay, paint, pencil), so I’ll have multiple screens.
- On each screen, I want to add a menu. There are 4 components on this screen that make up these menus:
- The Hamburger Icon controls the visual properties of the other items.
- Arrow icons act as links to the other screens.
- Labels to indicate what the links are for.
- The right dangle icon acts as a background and ties it all together.
- You access these components in the Icons tab/dropdown menu at the top. I’ll begin by adding a Hamburger Icon by clicking on Hamburger Icon from the dropdown menu.
- Once we add it and see it on our screen, we can change the properties of our Hamburger, like position and size, in the Icon menu on the right side of the screen. We can also change the color and the hover fill, so we get the highlight when we hover over the icon.
- We can also add a rectangle icon which acts as our menu on the page and can be used to hold the links to the other pages. We may not always want this icon/menu to show and we can control that with a variable. Check out my demo for more detail on this.
- To add the links to the other screens, we first want to click on the Label tab to add a label. The first label I want is a link to the main screen. Use the Label menu on the right side to set your properties such as text (I put main for my demo to tell this link will go back to the main page) and change the position and size. For the link for this label, I want enough room next to my text to show my arrow icon on the left. I do this with the Padding Property, I set this to the left of the text, which moves my text to the center and I now have room to add an arrow icon.
- We need to have the text and the icon as the label will not change your mouse when you hover over it, but the icon does. The text only tells the user where they are going with the arrow.
- We want the mouse not only to change into a pointing finger when we hover, but we want it to be highlighted, so when we’re going through our links on the menu each one will be highlighted. We do this with by using the hover fill for the arrow icon.
- To make this link go to the main screen, we change the On Select for that arrow icon; we’ll need to change the code to navigate to the main screen. Also, when we leave that rectangle icon screen (or pencil menu), we want to tidy up by hiding that menu. We do this by updating the context of our pencil menu and changing our visible properties. (See code in my demo.)
I hope this post was helpful in learning how to add menus to multiple screens on our app, as well as how to hide and show them to maximize your real estate on your screen.
Need further help? Our expert team and solution offerings can help your business with any Azure product or service, including Managed Services offerings. Contact us at 888-8AZURE or [email protected].