Summary
In this blog post, I share the steps for creating an expand-collapse gallery control in the PowerApps Canvas App.
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
Step-2
Add a few entries in “Expand-Collapse Control” list
Step-3
Create a Canvas App and name it “Expand-Collapse App”
- Add a new Blank screen
- From the Controls section on the top in Insert tab, add a “Blank flexible height” gallery – which would be our Parent Gallery
- And add a “Blank vertical” gallery in “Blank flexible height” gallery – which would be our Child Gallery
- Parent Gallery
- Child Gallery
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
Step-5
Add labels according to the list’s columns and add show data
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)
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))
And add code on visible property – If(Up arrow icon.Visible=true,false,true)
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))
And write code on its “Visible” property –
Switch(varShowId,0,false,ThisItem.ID,true)
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
3 Responses
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
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
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