Power App Galleries: Tried & True Techniques

Canvas app galleries are incredibly useful for both displaying data and creating table-like input forms that would typically be found in Excel. Like everything else in Power Apps, it is easy to throw together a gallery and make it work, but it can then turn more into to an art to improve the UI and make it look as if it’s not a Power App at all!

Once you’ve mastered the gallery basics, you can take it to the next level by embedding galleries! This is a great way to replicate the ‘Group by’ functionality you might see in a SharePoint list or document library.

Here I’d? like to share some of my canvas app formatting best practices.

Template Padding

By default, each gallery has the TemplatePadding property set to 5. If you’re not familiar, this is the space that is forced on each row of the gallery. Below is a screenshot of a gallery with the default TemplatePadding and a text label that is set to take up the entire space of the row (X:0, Y:0, Width:Parent.TemplateWidth, Height: Parent.TemplateHeight).

Alternatively, setting the TemplatePadding to 0 results in this:

Personally, I prefer to always set the Template Padding to 0. This allows me to format the gallery components more easily and perfectly fit where I want them. This will become?????more apparent when I discuss gallery height.

Gallery.Size vs Self.Height vs Self.TemplateHeight

It can be very useful to format a component within a gallery to the row height. Unfortunately, this gets a little more complicated in a gallery.

First, the Height property of the gallery is the overall height of the gallery. Then, to set the row height of a vertical gallery or the width of a horizontal gallery, you must set the TemplateSize property. However, you cannot reference Template.Size within formulas! Instead:

• Vertical Gallery: TemplateSize -> TemplateHeight
• Horizontal Gallery: TemplateSize -> TemplateWidth

Therefore, get used to mastering .TemplateHeight and .TemplateWidth when setting dimensions of gallery components.

Dynamic Gallery Height

Sometimes it works great to set the gallery to the exact height it needs, therefore removing the pesky scroll bar. This comes down to simply setting the height of the gallery to product of the TemplateHeight and the number of items in the gallery!

Womp, womp…

The TemplatePadding got in the way! The quick and easy fix is to set the TemplatePadding to 0.

But, if you really want the automatic padding and also have the perfect height, you can adjust!

That’s right, with a little bit more math, you can have your cake and eat it too.

Height = CountRows(Self.AllItems) * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding

Remove the Scroll Bar

There comes a time when you just can’t remove the scroll bar by dynamically adjusting the height of the gallery.

Personally, I don’t like the look of the scroll bar because all of a sudden, your padding disappears, or your icon gets partially covered. Instead, I suggest ShowScrollbar = false and ShowNavigation = true.

Now your padding is still showing, and users can still be visually queued that there is more to see!

Embedded Gallery Basics

Here it is, the basics of embedding galleries:

That’s all it is. Start with a flexible height gallery. Then add a text label as the title or header of each repeating gallery. Finally, insert a regular vertical gallery to the flexible height gallery and use the instructions found in the above Dynamic Gallery Height section.

Here you can see the quick results of 10 minutes of formatting.

These are only a few best practices that we have found ourselves using regularly at RedCloud, but certainly will not be the last that we find! More to come soon.