Sunday, September 26, 2021

PowerApps: Nested Gallery - Expand All / Collapse All

Hello Friends,

Welcome back with another post on PowerApps. In our last post, we have studied on how to create nested Gallery and then we have applied the Expand / Collapse feature on that gallery.

  1. PowerApps: Nested Gallery
  2. PowerApps: Nested Gallery - Expand / Collapse

If you have not read these posts, please go through it.

Now, we will try to implement Expand All / Collapse All feature. Let's start-

  1. I am assuming that you have read my last 2 posts mentioned above and created the PowerApps as described. We will continue from there.
  2. Let's add 2 buttons-
  3. Button1:
    1. Name: btnCollapseAll
    2. Text: Collapse All
    3. OnSelect: ClearCollect(SelectedOrderIDCollection,{SelectedOrderID:0})
  4. Button2:
    1. Name: btnExpandAll
    2. Text: Expand All
    3. OnSelect: 
    4. ClearCollect(
          SelectedOrderIDCollection,
          {SelectedOrderID: 0}
      );
      ForAll(
          OrdersList,
          If(
              CountRows(
                  Filter(
                      SelectedOrderIDCollection,
                      SelectedOrderID = OrdersList[@OrderID]
                  )
              ) = 0,
              Collect(
                  SelectedOrderIDCollection,
                  {SelectedOrderID: OrdersList[@OrderID]}
              )
          )
      );
      
  5. For Collapse All, we have cleared the collection which was storing the OrderID. As the collection becomes clear, no Order is there therefore, all galleries height will become ZERO (0).
  6. For Expand All, first we have cleared the collection, then, we have added all OrderIDs in that collection. Therefore, all galleries will be now having height based on their items count.
  7. That's all. It was so simple to implement.
  8. This way you can apply Expand All & Collapse All feature in nested gallery.
With this, I am concluding this post.
Happy Coding !!!
Will see you again with some new topics.

Stay Safe !
Stay Healthy !

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.