The gallery control in canvas apps is one of the most popular and powerful tools used for displaying data records. Power Apps studio automatically creates a default gallery layout which consists of labels and icons, which is a good starting point, but why stop there? This blog post outlines some very basic steps to transform your galleries to quickly enhance your interface and user experience.
For this example, I connected my gallery to collection which was collected (using the ClearCollect command) on the press of a button on the same screen. Here is the code I used for my table containing bridges with some of the highest decks in the world. Exciting stuff!
Make your gallery POP!
Once your gallery is connected to data, start by deleting the separator line that is included by default. I prefer to add separation between records using padding around the edges and contrasting colour between the gallery template and the fill colour.
Select the gallery and change the Fill, Template fill, Template padding and Transition properties as shown. The pop transition makes records expand when users hover over records in the gallery. Note that this property is less effective for apps run from mobile devices.
You could preview the app to check that your gallery rows pop out when hovered over. Note that the confetti in the image below is merely to illustrate a point...!
Next, rearrange the text labels within the gallery and adjust the font, font size and colour properties giving a clear and concise look.
The balance of labels is important here, depending on the content inside your gallery. Try not to overload the user with information, using colours and font sizes to prioritise importance of information.
Icons can help users identify what information is being displayed, especially when screen space is at a premium within galleries. Here, I added a globe icon next to the location label in the same colour.
In this example, I have concatenated text strings giving the item headings.
The default chevron icon can be deleted as we'll replace this with a button shortly.
I like to add tabs at the end of gallery rows, usually as a block of colour. Other than looking smart, they can also be conditionally formatted giving functional benefits too. For example, a Switch command can easily be used to set the colour based on the status of a record.
In this example, the tab is a rectangular icon inserted into the gallery and positioned on the left hand side.
The Display mode property is set to View, a theme colour is selected and the border is removed.
The width is set to 8 pixels and the height can be dynamically linked to the template height of the gallery. Therefore, if the gallery height changes then the tab shape resizes with it.
Why scroll when you can navigate?
There are some instances when scroll bars may be more applicable but I generally tend to prefer the navigation display. The Show scrollbar option can be turned off and Show navigation can be turned on.
The final touch
Feedback I have received from users in the past is that icons for buttons are sometimes unclear. Other than relying on tooltips readouts (for non-mobile apps), I have found that users often prefer a descriptive button telling them exactly what they are about to click or tap. A contrasting hover colour has been added in this example.
What about Custom Pages within Model Driven Apps?
The good news is that all the steps above can be replicated on Custom Pages within Model Driven Apps.
...and that's it
Hopefully you have found this an informative method to quickly and easily smarten up canvas app galleries and make them more user friendly.
Thank you for visiting and wishing you all the very best.