cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AndyOSB
Level: Powered On

Gallery With in A Gallery - Question on Template Size

https://imgur.com/a/MVQtE

 

 

I am trying to create a gallery with in a gallery and I want to control the template size of the parent gallery based on the number of records in the child gallery.   See the above image.

 

I think this should be doable using a gallery size with a flexible template size.

 

I am having a hard time figuring out how to do this though.  In each of the parent gallery names, you will see a number above the name which shows how many records are in the child gallery. I did that using this:

 

CountRows (Filter (Filter (Col_PainterHours, Painter_Operator = Result), Date_Picker.SelectedDate = DateValue(Text(Painter_StartTime))))

 

However, if I try to create a template size based on this formula it does not work because "Result" is not a valid term in the parent gallery, only with in that gallery does it work.

 

I feel like I am coming up with more and more complicated ways to make this work and I bet there is a very simple way to do this.

 

Any ideas?

2 REPLIES 2
Highlighted
Super User
Super User

Re: Gallery With in A Gallery - Question on Template Size

@AndyOSB

 

You could use a flexible height gallery.

2018-02-27 19_59_08-PTS DCS test - Saved (Unpublished) - PowerApps.png

And then set the nested gallery item to auto-height.

 

Let me know how it works out.

 

 


Vivek Bavishi aka That API Guy
PowerApps and Flow MVP
Blog | Twitter | YouTube | Community Profile | GitHub



If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

PowerApps Staff CarlosFigueira
PowerApps Staff

Re: Gallery With in A Gallery - Question on Template Size

@ThatAPIGuy is on the right track: use a flexible-height (outer) gallery, and make the height of the inner gallery vary depending on the number of items. The gallery doesn't have an Auto-Height property, though, so we need to vary the height of the inner gallery ourselves.

 

Let's go over an example to see how this can be done (and you can then adapt it to your scenario). This will be the final look of the gallery:

ForumPost001.png

To build it, add a button to initialize the collection with a nested collection; I'll use the example in the GroupBy function to do that. Set the button's OnSelect property to the expression below:

 

ClearCollect(
    CityPopulations,
    { City:"London", Country:"United Kingdom", Population:8615000 },
    { City:"Berlin", Country:"Germany", Population:3562000 },
    { City:"Madrid", Country:"Spain", Population:3165000 },
    { City:"Rome", Country:"Italy", Population:2874000 },
    { City:"Paris", Country:"France", Population:2273000 },
    { City:"Hamburg", Country:"Germany", Population:1760000 },
    { City:"Barcelona", Country:"Spain", Population:1602000 },
    { City:"Munich", Country:"Germany", Population:1494000 },
    { City:"Milan", Country:"Italy", Population:1344000 });
ClearCollect(
    CitiesByCountry,
    GroupBy( CityPopulations, "Country", "Cities" ))

Now add a (blank) flexible height gallery ('Gallery1'), and set the Items property to CityPopulations. Inside that gallery, add a label ('Label1'), and set the Text property to ThisItem.Country.

 

 

Now, again inside the gallery, add a new blank vertical gallery ('Gallery2'), and inside of it add another label ('Label2'). The control tree should look like this:

ForumPost002.png

To make the nested gallery look good, set the following properties to the controls:

 

Gallery1.TemplateFill: RGBA(0, 0, 0, 0.1)
Label2.Text: ThisItem.City & " - " & ThisItem.Population Label2.X: 0 Label2.Y: 0 Label2.Width: 270 Label2.Height: 40 Gallery2.Items: ThisItems.Cities Gallery2.X: 260 Gallery2.Y: 0

Finally, we can make the the nested gallery "auto-height", by adjusting its Height property depending on the number of elements that it displays:

 

 

(Gallery2.TemplateHeight + Gallery2.TemplatePadding * 2) * CountRows(ThisItem.Cities) +
Gallery2.TemplatePadding

The height of each item in the gallery is given by the height of the template itself, plus the top/bottom padding. Feel free to experiment with the last term to get the best height that fits your app.

 

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 141 members 5,448 guests
Please welcome our newest community members: