Canvas Apps
How to create Nested Gallery in Power Apps

How to create Nested Gallery in Power Apps

Let’s try to build a PowerApps’s Nested gallery view using GroupBy function to achieve the Grouping functionality of SharePoint List

We have used below sample data in Collection as a data source for the galleries used in this Nested Gallery Application and we can also use any data source to feed the data to gallery.

ClearCollect(
    collCountry,
    {
        country: "India",
        city: "Chennai",
        address: "Address 1",
        pincode: "89889"
    },
    {
        country: "USA",
        city: "NY",
        address: "Address 1",
        pincode: "012"
    }
)

Create the above collection with additional data in the “OnStart’ property of the app and Use ‘GroupBy’ function to Group the collection by Country colum.

//Syntax

GroupBy( source, columnName, GroupColumnName)

Source is where the function will be applied, columnName is the column to group the records and GroupColumnName is the name of the column where grouped records kept. Grouped Records would not carry the column used to group the data.

Store the result of the GroupBy function in another collection ‘ColGroupedCountry’.

// Actual expression
ClearCollect(
    colGroupedCountry,
    GroupBy(
        collCountry,
        "country",
        "DATA"
    )
);

The GroupBy function returns a table with records grouped together based on the values in one or more columns. Records in the same group are placed into a single record, with a column added that holds a nested table of the remaining columns.

Result of the GroupBy

Add a new Gallery ‘ParentGallery’ to the screen and set ‘colGroupedcountry’ collection as Items property of the gallery. Add a new label to this ParentGallery and set the Text property of the label with below expression

Items = ThisItem.Country

As a next step, add a new gallery ‘ChildGallery’ inside the “ParentGallery’ and set ‘ThisItem.DATA’ as Items property of the Child gallery. Add labels to the child gallery and map them with ‘Address’, ‘City’ and ‘Pincode’.

Set below expression as Text property to show the number of records under each group.

Text = ThisItem.country & “(” & CountRows(ChildGallery.AllItems) & “)”

Use following expression to set the Height property of Child gallery dynamically based on number of grouped records.

Height = If(ThisItem.IsSelected, If(CountRows(ChildGallery.AllItems) > 0, CountRows(ChildGallery.AllItems)*55, 0), 0)

Add Right Icon and Down Icon to the Parent gallery and set the below expression to visible property of these icons.

//Down Icon
Visible = ThisItem.IsSelected

//Right Icon
Visible = !ThisItem.IsSelected

After implementation of above steps, we able to expand and collapse on each country to show & hide the child rows.

Click here to know more about GroupBy function in PowerApps.

Please post your queries in the comment section. Happy Building 🙂

0

Leave a Reply

Newsletter Signup

Subscribe to our weekly newsletter below and never miss out the latest updates

%d bloggers like this: