.png)
Brand New Series Alert! We're thrilled to introduce a fresh, education-centric series on our blog. Leading the way in this exciting initiative are RedCloud experts Benny Swedberg and Yusuf Shariff, who are diving into their preferred techniques for embedded galleries in our inaugural installment.
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
Formatting a component within a gallery to the row height can be very useful. Unfortunately, this becomes 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 the 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 into the flexible-height gallery and use the instructions 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 I have found myself using regularly. Let us know what best practices or common techniques you find yourself using!