Create Nested Collapsible Gallery Experience in Canvas PowerApps

Introduction

Let's dive into the benefits of the nested collapsible gallery control in Canvas PowerApps.

In this blog, we'll look at its benefits, features, and implementation, allowing you to create dynamic interfaces that engage users by enhancing the user experience with streamlined information navigation.

Employ these nested collapsible galleries to elevate your Canvas PowerApps applications.

Use-Case

In this blog, we'll explore how nested galleries can enhance the shopping experience at a fashion store.
By using nested galleries, users can easily navigate, manage their selections, and view related products, all while tracking the total cost in each fashion wear category.
Additionally, users have the flexibility to add or remove items from their respective categories.

Some key operations and features in this blog include:

1. Perform updates and deletions on each product (nested gallery).

2. Design a responsive layout with simple click-based interactions for expanding and collapsing sections in categories.

Implementation Steps

For this blog, we will be utilizing collections as a substitute for database sources, enabling us to demonstrate the capabilities of the nested collapsible gallery control.

Step 1: Let's start by creating a few collections of records:

1. Users [ColUsers]

2. Products [ColProducts]

3. UserProducts (relation between Users and Products) [ColUserProducts]

Concurrent(
    ClearCollect(
        ColUsers,
        {
          Name: "John doe",
          ID: 1
        },
        {
          Name: "Alex Smith",
          ID: 2
        },
        {
          Name: "Robert Cook",
          ID: 3
        }
    ),
    ClearCollect(
      ColProducts,
      {
        PID: "001",
        Name: "Urban Hat",
        Type: "Head Wear",
        Amount: 45
      },
      {
        PID: "002",
        Name: "Classic T-Shirt",
        Type: "Top Wear",
        Amount: 25
      },
      {
        PID: "003",
        Name: "Denim Jeans",
        Type: "Bottom Wear",
        Amount: 60
      },
      {
        PID: "004",
        Name: "Sneakers",
        Type: "Foot Wear",
        Amount: 80
      },
      {
        PID: "005",
        Name: "Beanie",
        Type: "Head Wear",
        Amount: 35
      },
      {
        PID: "006",
        Name: "Hoodie",
        Type: "Top Wear",
        Amount: 50
      },
      {
        PID: "007",
        Name: "Cargo Pants",
        Type: "Bottom Wear",
        Amount: 70
      },
      {
        PID: "008",
        Name: "Sandals",
        Type: "Foot Wear",
        Amount: 40
      },
      {
        PID: "009",
        Name: "Bucket Hat",
        Type: "Head Wear",
        Amount: 30
      },
      {
        PID: "010",
        Name: "Polo Shirt",
        Type: "Top Wear",
        Amount: 45
      }
    )
);

Step 2: Let's add the necessary controls on the screen.

1. 1st Flexible Height Gallery control - [Gal_Users]

   1. Property "Items" - ColUsers
      This is our list of Customers/Users

   2. Property "OnSelect" - UpdateContext({varSelectedID: ThisItem.ID})
      This is used to store selected record ID which can be a great use.

      Tip: Use variable instead of Gallery.Selected in this scenario

      When you want to expand and collapse while still selecting the same record then the use of a variable will benefit in such a scenario.

   3. Property "TemplateSize" - 310
      You can justify it however you want, but having a higher number allows you to add content to the gallery space while in edit mode. While playing the app in either Preview or Published mode, it will always shrink from the bottom until it finds a control that restricts the height of the Template Item.

      Tip: Focus on what's necessary and avoid height restrictions in the Gallery control

      If you are using Container or another control that you want to be displayed when only the current specific record is selected in Gallery. To show/hide content in the gallery's lower section, utilize Visible property because when elements are removed from the bottom, the Flexible height will shrink to any visible control that will stop the shrinking further.

   4. Property "TemplatePadding" - 15
      Template Padding for giving it a card aesthetic

   5. Add a Label Control, "Text" property.
      This is used to show the Total Value of the cart for each User/Customer.

       With(
           {
               TotalCardItems: Filter(ColUserProducts, RelatedUser = ThisItem.ID)
           },
           If(
               CountRows(TotalCardItems) = 0,
               "Cart is Empty",
               "Total Amount: $" &Sum(TotalCardItems,RelatedProduct.Amount)
           )
       )
      

1. 2nd Gallery control inside 1st Gallery(flexible height is optional) - [Gal_RelatedProducts]

   1. Property "Wrap count" - 2
      This creates a 2 column list.

   2. Property "Items" -

       With(
           {
               TotalCardItems: Filter(ColUserProducts, RelatedUser = ThisItem.ID)
           },
           Table(
               {
                   Name: "Head Wear",
                   Data: Filter(TotalCardItems, RelatedProduct.Type = "Head Wear")
               },
               {
                   Name: "Top Wear",
                   Data: Filter(TotalCardItems, RelatedProduct.Type = "Top Wear")
               },
               {
                   Name: "Bottom Wear",
                   Data: Filter(TotalCardItems, RelatedProduct.Type = "Bottom Wear")
               },
               {
                   Name: "Foot Wear",
                   Data: Filter(TotalCardItems, RelatedProduct.Type = "Foot Wear")
               }
           )
       )
      

      Tip: Use the 'With' function

      In certain scenarios, you can use the With function to reduce code repetition or get to a final result by using temporary variables. In the above code: I saved four filter calls on my data source by using the 'With' function, which holds my filtered record, and then processing on the filtered set of records instead of all records again and again.
   3. Property "Visible" - ThisItem.IsSelected
      Very important step because this will ensure other instances of the 2nd gallery will be shown only to the currently selected record.

1. 3rd Gallery control outside (optional - just to show related products) - Filter(ColUserProducts, RelatedUser = varSelectedID)

2. Added a dropdown control [DropdownCanvas3] - "Items" property : ColProducts
   I have used to select Product items that will be added for specific Users/Customer

3. Added a button - "OnSelect" property

    With(
        {
            User: Gal_Users.Selected.ID,
            ProductToAdd: DropdownCanvas3.Selected
        },
        Collect(
            ColUserProducts,
            {
                RelatedUser: User,
                RelatedProduct: ProductToAdd
            }
        );
    );
   

Output

Summary

That's it! I hope you found this article useful, and I encourage you to experiment with customizing the galleries to meet your specific needs. You can also get help from the PowerApps documentation and community resources. I invite you to share your thoughts, observations, and questions in the comments section below.

Reference Material

1. With function - Microsoft Documentation

2. Gallery control - Microsoft Documentation

3. Collections - Microsoft Documentation + Formulas

4. PowerApps Community