Why?
The Gallery Control can be used in different ways but one of the first things I realized was a need for consistent navigation between different screens. Wanting the most efficient, effective and engaging way to realize this (simpler minds would call me lazy 🤫), I tried to combine a single source of truth for the navigation elements with the same look and feel without having to change multiple galleries whenever I needed to update something about it (like I would need to when I would choose something like buttons or grouped controls).
What?
An explanation of how to best configure not only the Gallery Control like a ribbon with buttons, but also some related (optional) settings to make it reusable and responsive!
This example uses the following business case: we want a PowerApp for registering Project Leads where different screens would be linked by using common navigation elements: My to do and All leads.
How?
The first challenge is a way to maintain the content of the navigation elements in such a way that when I want to add an element, I would not have to go to all galleries of different screens and update it with the new element. For example in a first design session the project team would discover the need for two elements My to do and All leads but in a later stage the team would also like to add a new (clickable) element: All members and in an even later stage everyone comes up with a Options for owners element that should only be visible to owners. (don’t you just love it when new requirements appear during the build or test or review phase 😒).
1) I chose the OnStart property of the App Object to create a collection! This way when someone opens up the PowerApp, it creates all navigation elements for the whole PowerApp in every screen and when we need some extra data there would be single place for maintaining the table (better yet: maintaining the collection):
This collection will be used as a table with different columns:
- RibbonItemOrder: this number will determine the order in which every element will appear (SortByColumn function in Gallery Control)
- RibbonItemVisibility: this description will determine the visibility depending on who is opening the PowerApp (more about this later)
- RibbonItemImage: this is an optional column where you can reference images of your PowerApp to be displayed (nice on the eyes)
- RibbonItemTitle: this is the text used as a title for the element
- RibbonItemDescription: this is the optional text used as a description for the element
- RibbonItemOnSelectScreen: this is the screen where the element will go to (yes! you can use screens as a direct reference)
- RibbonItemIcon: this is an optional column where you can reference one of the default icons of your PowerApp (same purpose as the image but now one of the default icons instead of custom images and yes icon names can also be used as a direct reference now!)
2) So now the single source of truth is easy to maintain, change and extend. Then it is time to create the navigation ribbon by using a Gallery Control (the Blank horizontal one) and link it to the items of the COLribbon collection created in the previous step. I choose the following controls in the gallery in order of appearance (from back to front):
- Rectangle_GalleryRibbon_Splash_Background: a Rectangle Control that determines the background fill color of the navigation element
- Image_GalleryRibbon_Splash: an Image Control that can show something nice to look at (link it to ThisItem.RibbonItemImage)
- Icon_GalleryRibbon_Splash: an Icon Control that can show something nice to look at (link it to ThisItem.RibbonItemIcon)
- Title_GalleryRibbon_Splash: a Label Control with the Title and a similar control can be used for the Description (link it to ThisItem.RibbonItemTitle)
- Rectangle_GalleryRibbon_Splash: a Rectange Control that makes the rest of the controls act as if it is a button (see how the screenshot above shows a lighter coloring when hovering over an element)
-Set its HoverFill property on RGBA(255, 255, 255, 50%) so it will “light up” when hovering over an element
-Set its OnSelect property on Navigate(ThisItem.RibbonItemOnSelectScreen,ScreenTransition.Fade) so the user will navigate to the determined screen when clicking on the element
3) Now we have a an easy to maintain control that acts like buttons in a navigation ribbon. When you always have a fixed number of elements in your navigation you just change the WrapCount, the TemplateSize and Height properties to a number that creates the best layout you like.
4) OPTIONAL = However as you can imagine when the number of navigation elements are dynamic, this is not very flexible nor easy to maintain. That is why I have come up with some mathematic formulas on different properties to make the gallery responsive with the number of elements in it 🧐. Some variables are important to explain but all need to be implemented because they depend on each other:
How many elements next to each other:
There is a variable needed that determines the maximum number of navigation elements that you want to have next to each other from left to right. This is a personal taste but I chose a maximum of 3 and set this variable in the BorderThickness property of the gallery because I’m not using it anyway and I maybe want it to be different in different screens (so that is why you will see the reference GalleryRibbon_Splash.BorderThickness in the formulas below).
Formula for the WrapCount of Gallery Control:
This determines the number of rows which should be dynamic with the number of items in the gallery otherwise a horizontal scroll bar would be needed to see all elements:
Formula for the TemplateSize of Gallery Control:
This determines the width of every element that should be dynamic with the number of items in the gallery otherwise a horizontal scroll bar would be needed to see more than the maximum number elements allowed next to each other or a white space would appear when below this maximum:
Formula for the Height of Gallery Control:
I like to link everything to each other #InternetOfThings so rtc_helloworldblack.Height is just a reference to another control in my PowerApp for determining a relative height but this could be a fixed value off course. This formula determines the height of every element that should be dynamic with the number of items in the gallery otherwise each element would be made to fit the fixed height:
5) OPTIONAL = Last but not least you can set a formula in the Items property of the gallery to make sure that all the options above also take into consideration who is looking at the PowerApp. This way different persons with different roles see different navigation elements:
This is very basic but you can create the most complex formula’s to make sure that depending someones function or department a person will see navigation elements or not (that is why I introduced the RibbonItemVisibility column in the COLribbon collection). The one business scenario to pursue is off course someones membership in certain Azure Active Directory Groups 😈
See https://knowhere365.space/powerapps-azure-active-directory-groups/ for more info on that scenario.
