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
Want to talk?
Drop us a line. We are here to answer your questions 24*7.