Unanswered

Gallery With in A Gallery - Question on Template Size

(0) Share

Report

Posted on by AndyOSB

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?

Categories:

Building Power Apps

I have the same question (0)

All responses (2)

Answers (0)

ThatAPIGuy 925 on at

Like (1)

Report

@AndyOSB

You could use a flexible height gallery.
And then set the nested gallery item to auto-height.

Let me know how it works out.

Was this reply helpful? Yes No
CarlosFigueira on at

Like (1)

Report
@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:
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:
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.

Was this reply helpful? Yes No