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.

Problem Statement

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?

Solution

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 ritika.agarwal@bythedevs.com.

DEMO

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.

About the Author

Ritika Agarwal is a Power Platform Consultant at By the Devs, where she brings her expertise to the field of Microsoft technologies. Holding the prestigious titles of Microsoft MVP and MCT for Business Applications, she is recognized for her outstanding contributions to the industry.

Ritika is an active member of the Hyderabad Power Apps and Power Automate User Group, where she serves as one of the UG Leaders. Her extensive experience encompasses a wide range of Microsoft tools and platforms, including Microsoft PowerApps, Power Automate, PowerBI, Power Virtual Agents, Dynamics 365, Microsoft Azure, Powershell, and various others. Through her passion and knowledge, Ritika continues to make significant strides in the realm of business applications within the Microsoft ecosystem.

Reference

Agarwal, R., 2023, Building Responsive Canvas Power Apps: Part 1, Agarwalritika.com, Available at: https://www.agarwalritika.com/post/building-responsive-canvas-power-apps-part-1 [Accessed on 7 September 2023]

STAY UP TO DATE

Catch up on the latest blogs, eBooks, webinars, and how-to videos.
Not a member? Sign up today to unlock all content.
Subscribe to our YouTube channel for the latest community updates