Expand/Collapse within Single Gallery in PowerApps

About three years ago, I post a solution in PowerApps forum that helps OP resolve Expand/Collapse gallery issue by using Flexible Height Gallery and Nested Gallery.

Recently, I got a new requirement that is Calendar View for Materials processing with expand/collapse function. I followed my intuition and instinct to build the component using above method – Flexible Height Gallery and Nested Gallery.

I just go to the app, nest gallery, configure calendar function, optimize UI/UX, everything looks well during development since there’re only few records for dev use.

Nested gallery with poor performance

However, when test data grows, the performance becomes much poor that you can’t believe! The nested gallery’s visibility is controlled through IsExpand column, resulting in the need to re-render the nested gallery each time it’s expanded, that takes too long and the experience is not satisfactory!

Implement Expand/Collapse within single gallery

After serveral days’ brainstorm and test, I came up with a more robust and simple solution that implement Expand/Collapse function within single gallery.

Let’s say ‘Bye’ to Nested Gallery!!!

Let’s walk through it!

IDEA: Since we have known that PowerApps performs poorly with complex embedded galleries. Let’s avoid nesting control structure and instead do nesting at the data level!

1. Shape Data

Below left is generally the orginal format of data, and the requirment is to expand/collapse MaterialId by Program.

Try below code to generate colOriginalData collection.

ClearCollect(
    colOriginalData,
    Table(
        {MaterialId:"M001",Program:"Power Apps"},
        {MaterialId:"M002",Program:"Power Apps"},
        {MaterialId:"M003",Program:"Power Apps"},
        {MaterialId:"M004",Program:"Power Automate"},
        {MaterialId:"M005",Program:"Power Automate"}
    )
)

To achieve idea of single gallery, we will shape the original data to right-side structure shown above, to add a new row and new column(Title) with Program value above the group of material Ids with same program. At the same time, add a new column ‘IsExpand’ to control Expand/Collapse behavior. Try below code to shape the data:

Clear(colShapedData); 
ForAll(
    Distinct(colOriginalData,Program) As item,
    Collect(
        colShapedData,
        {Title:item.Result,Program:item.Result,IsExpand:true},
        AddColumns(Filter(colOriginalData,Program=item.Result),"IsExpand",true)
    )
);

2. Configure Gallery

Add a gallery into screen, insert two labels (lblTitle, lblMaterialId) and a ChevronDown icon (icoArrow) into gallery, and set their properties as bellow:

lblTitle.Text: ThisItem.Title
lblMaterialId.Text: ThisItem.MaterialId
icoArrow.Icon: !IsBlank(ThisItem.Title)

Then the gallery may look like below.

3. Implement Expand/Collapse function

So far, basic gallery structure has been established, we still need to apply some formuals to control expand and collapse behavior. Since we already have added a new columns ‘IsExpand’, we only need update the IsExpand value of MaterialId Group to opposite value, and modify Gallery Items property as below to filter out all MaterialId with IsExpand = false, but leave the Program Title Row.

lblTitle.OnSelect: UpdateIf(colShapedData,Program=Self.Text,{IsExpand:!ThisItem.IsExpand})
icoArrow.OnSelect: Select(lblTitle)
icoArrow.Icon: If(ThisItem.IsExpand,Icon.ChevronUp,Icon.ChevronDown)
Gallery.Items: Filter(colShapedData,IsExpand || Title<>Blank())

4. You’re done!

Now, the gallery should perform the same functionality as nested gallery within single gallery, but with more fluent and performant experience.