Power Apps – How to set up a nested gallery

Introduction:

We will build a simple nested gallery set up. We will use an example data with 3 meals and in each meal have different foods. The gallery will automatically adjust its size based on how many food in each meal.

Step 1:

Let’s set up our sample data. In the Formulas property of App, add this code:

varTable = Table(
    {Meal: "Breakfast",Foods: ["Egg","Hotdogs","Bread"]},
    {Meal: "Lunch",Foods: ["Spaghetti","Carbonara","Hamburger","Garlic Bread","Pizza"]},
    {Meal: "Dinner",Foods: ["Pork","Rice"]}
    );

Step 2:

Insert a blank flexible height gallery named Gallery1. Make the Items property into:

varTable

Step 3:

Insert a text label named Label1 inside Gallery1. Make the following changes to its properties:

Text property

ThisItem.Meal

Fill property

Color.LightBlue

Step 4:

Insert a blank vertical gallery named Gallery2 inside Gallery1. Make the following changes to its properties:

TemplateSize property

50

Height property

Self.AllItemsCount * (Self.TemplateHeight * 1.2)

Items property

ThisItem.Foods

Y property

Label1.Height

Step 5:

Insert a label inside Gallery2 named Label1. Make the Text property into:

ThisItem.Value

Review:

Make sure that your Tree View looks something like this.

Optional:

You may set Gallery1‘s TemplateSize property into 0 to make sure there are no gaps for small rows. It may look distorted in the studio, but onced played, it will adjust correctly.

Conclusion:

You now have a basic nested gallery that houses 3 meal types and the sizes adjust automatically based on the number of foods in each meal.