Part 1: Expand-Collapse rows in PowerApps Canvas App Gallery Part 1: Expand-Collapse rows in PowerApps Canvas App Gallery
Part-1-Expand-Collapse-rows-in-PowerApps-Canvas-App-Gallery
Share:

Summary

In this blog post, I share the steps for creating an expand-collapse gallery control in the PowerApps Canvas App. 

gif-01

Now, let’s start building the Gallery, for which we would have to create our list first and have the same loaded in a PowerApps App as a data source.  

Step-1

Create “Expand-Collapse Control” list with the following columns and their types 

img-01

Step-2

Add few entries in “Expand-Collapse Control” list 

img-02

Step-3

Create a Canvas App and name it “Expand-Collapse App” 

  1. Add a new Blank screen 
  2. From the Controls section on the top in Insert tab, add a “Blank flexible height” gallery – which would be our Parent Gallery
  3. And add a “Blank vertical” gallery in “Blank flexible height” gallery  which would be our Child Gallery 
  • Parent Gallery 

gif-02

  • Child Gallery 

gif-3

Step-4

Adding the data source to Gallery 

In the Parent Gallery add “Expand – Collapse Control” list data 

For Child Gallery in “Items” property add code – ThisItem 

img-03

Step-5

Add labels according to the list’s columns and add show data 

img-04

Step-6

Add code on all label’s “visible” property which are added in “Child Gallery”Also, to have the Child Gallery show when button is clicked, we have to add code in Child Gallery’s on “Visible” property  

“Visible” property – Switch(varShowId,0,false,ThisItem.ID,true)

img-05

Step-7

Add down arrow icon and up arrow icon. 

Then first write code for the down arrow icon(Down arrow icon) on its “OnSelect” property –

If(varShowId=ThisItem.ID,Set(varShowId,0),Set(varShowId,ThisItem.ID)) 

img-06

And add code on visible property – If(Up arrow icon.Visible=true,false,true) 

img-01

Step-8

On  the down arrow icon and write code on it’s “OnSelect” property –

If(varShowId=ThisItem.ID,Set(varShowId,0),Set(varShowId,ThisItem.ID)) 

img-07

And write code on its “Visible” property –

Switch(varShowId,0,false,ThisItem.ID,true)

img-07

Please post your question, if you will find while implementing this process. Thank you.

In this tutorial, we explored how to create an Expand-Collapse feature in a Microsoft PowerApps Canvas App Gallery.

By following the step-by-step guide, you can enhance the user experience of your PowerApps solutions by allowing users to efficiently navigate and interact with data.

Implementing features like Expand-Collapse rows can greatly improve the usability and functionality of your Canvas Apps, providing a more intuitive interface for users to work with.

We hope this tutorial has been helpful in expanding your understanding of building dynamic interfaces in PowerApps.

Stay tuned for more insights and tutorials on optimizing your Microsoft PowerApps solutions for enhanced productivity and user satisfaction.

Reach out to Reality Tech for getting help in optimizing the Microsoft PowerApps solutions

2 thoughts on “Part 1: Expand-Collapse rows in PowerApps Canvas App Gallery

  1. Great tutorial

    How would you handle Multiple Records for each employee

    Example

    Employee 1
    Subrecord 1
    Subrecord 2

    Where in the data table you show “Expand-Collapse Control” list you would have two records for Employee 1 but different items under that employee

    I would want to see both items when i expand the employee

    1. Where to declare VarShowID? you didn’t mention in the tutorial. Its a half video.

      Can you please tell me how to create Items and sub items in the sharepoint so that i can use in powerapps?

      I need to build one app for project management where there are list of projects and sub projects. Will you help me

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to talk?

Drop us a line. We are here to answer your questions 24*7.