Building Responsive Canvas Power Apps: Part 1
This is the first post of a series that I am writing on building responsive canvas power apps. In this post, I will show you how to customize nested galleries to show data in the app. The post will cover how you can show X number of rows at once and then the user can expand the nested gallery to view all items. This will enable Power Apps Developers to create highly customizable apps and improve the UI/UX. The same approach can be used to build responsive custom pages for Model Driven Power Apps as well.
How to create nested gallery in Canvas Power Apps? How to show grouped data in a gallery in Canvas Power Apps? How to customize the look and feel of nested galleries? How to expand collapse items in a gallery? How to implement "Show More" or "Show Less" logic in galleries in Canvas Power Apps?
To implement a nested gallery, you will need two galleries and the second gallery will be a child control of the first gallery control. In order to show X number of rows at once, and then expand all rows based on user's choice, the below solution can be followed:
For this post, I am using a scenario for an Expense App that allows admins to view the Expense request for all employees. The app will show 2 expenses by default for each employee and then the user can click on the "Show More" button to view the rest of the expense items.
Note: To show dynamic values in the gallery based on the data for each user, you should use "Flexible height gallery".
The setup includes following controls:
Parent Gallery (Control Name - Gallery1) - This is the parent gallery control that will display the employee's name. You can set it's properties however you want, it will not affect the child's gallery's properties. One thing, you need to ensure in case this is nested is you can either use the "GroupBy" function or direct reference to a related table. In my case, since I have one table, I am using the "GroupBy" function.
The parent gallery should have these two controls as its child:
Checkbox control (Control Name - Checkbox1) - This is the control that will toggle the number of items to show in the nested gallery control. The properties will be as follows:
//If the checkbox is checked, it will show value as Show Less, this means all the rows are expanded. If you are using classic controls, then replace Self.Value with Self.Text Text Property: If(Self.Value,"Show Less","Show More") //Hide the checkbox so it looks like a button. CheckboxSize: 0 //Set the visible property to only show the control if the total number of the rows matching the condition are more than 2. If you want to show 5 items by default, then this should be changed to "> 5". ThisItem.Grouped should be replaced with the initial items property of the nested gallery. Visible: CountRows(ThisItem.Grouped) > 2 //This will show the checkbox on the center of the gallery control. X: Parent.TemplateWidth/2 - Self.Width/2 //This will place the checkbox just after the nested gallery control. Y: Gallery2.Y + Gallery2.Height + 10
Nested Gallery (Control Name - Gallery2) - This control is the nested gallery. Update the properties as follows:
// Update the items property to this logic, where if the checkbox is checked then show all the records, otherwise show first 2. If you wish to show more rows by default, then change the value in FirstN expression. ThisItem.Grouped should be updated at all places with the expression that you have for filtering the nested gallery records. I am using GroupBy function so this one is used. Items: If(Checkbox1.Value,ThisItem.Grouped,FirstN(ThisItem.Grouped,2)) // 40 is the height of each row that I wanted to set in my use-case but you can change this to something else based on the height of your gallery items. This removes the scrollbar and makes the gallery dynamic. Due to this dynamic nature of data, blank flexible height gallery was suggested in the beginning of this blog. Height: Self.AllItemsCount * 40
Once the properties are set in this manner, the app will start to function as the demo below. In case, you are seeing any difficulties you can reach out to me on firstname.lastname@example.org.
In this post we saw how to use expressions to customize the look and feel of nested galleries. This will enable developers to enhance the user experience of canvas power apps.
I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika.