Galleries are one of the core components of Power Apps canvas apps, and there are many ways in which you can use them. Most often, they are used to show a list of information and give the user the option to click through to get even more information about the record or to take action.
In these cases, I’ve found it’s often difficult to decide what information to put in the gallery, and which to put in the detail screen. You need to balance the need for information with the screen estate and not having information overload. Therefore, it can be useful to show some basic information at first and giving the option to show some additional information by expanding the item before clicking through to the detail screen.
The result will look like this:
How can you create this? Let’s take a look…
Setting up the gallery
A gallery in which one item is expanded while the others are collapsed is in essence a gallery where different rows can have a different height. Therefore, you need to use a “flexible height gallery”. In other types of galleries, you cannot get to the same behaviour as you have in the example above.
Therefore, let’s start by adding a “Blank flexible height” gallery to the screen.
You can resize it so it fits your application. In my case it’s taking up the entire screen. Add the data source for the gallery and the controls that you need to show the information, including that which you only want to show when the item is expanded. You’ll notice that apart from the first row (which is the template cell), the height of all rows will adjust automatically when adding an extra control and moving it below ones that are already there. This is the main function of the flexible height gallery, and what we will use to create the expand/collapse effect: the height of each row adjusts to what is present in that row.
After adding the data, let’s add a down and up arrow icon to the gallery. They should be at the same X and Y coordinates, so they replace each other when collapsing/expanding. In my gallery, I’ve added a “more info” label and navigation icon as well so it’s clear when a user selects it, that they will go to another screen with more information. Also, I’ve added a line at the bottom of the gallery (which is a rectangle with tiny height) to indicate the different rows in the gallery.
Adding the collapse/expand functionality
What we want to achieve is that when a row is collapsed (which is default for the entire gallery), a user only sees the down arrow and can press it to show some additional information for this row (in my case the phone number and birthday).
When a row is expanded, the down arrow is replaced by the upwards arrow. This can be clicked by the user to collapse the row again and hide the additional information.
To make this functionality work, there are three things that need to be done:
- When selecting the “down” arrow, update a local variable “locInfoExpanded” to “true” and when selecting the “up” arrow, update a local variable “locInfoExpanded” to “false”.
- Set the “Visible” properties of the additional information, up and down arrow so they are visible at the right time
- (only when you have a separator between gallery rows) Change the Y position of the separator so it moves down when the row is expanded and up when it is collapsed
Arrow configuration
In the “OnSelect” property of the down arrow icon, add the following code:
Select(Parent); UpdateContext({locInfoExpanded:true})In the “OnSelect” property of the up arrow icon, add the following code:
Select(Parent); UpdateContext({locInfoExpanded:false})Visible properties
The “Visible” property of the additional information and the up arrow should be adapted to the following:
ThisItem.IsSelected && locInfoExpandedAlternatively, that of the down arrow should be the opposite:
! (ThisItem.IsSelected && locInfoExpanded)This ensures that the down arrow is shown for all rows that are not selected and for the selected one only if it is not expanded. If the arrows are placed at the same X and Y coordinates (and have the same height and width), it will seem as if they replace each other.
💡 Note: you can use just one icon control and dynamically change the displayed icon and executed functions as well by using if-clauses in the “Icon” and “OnSelect” property of the icon control.
Position of the separator
The position of the separator should change with the visibility of the additional information. More specifically: when the additional information is not visible, it should be placed right underneath the last visible item (in my case the address). When the row is expanded, the separator should be at the bottom (in my case right underneath the birthday.
To make it simple, I’m using the visibility of the birthday value label to determine where the separator should be placed instead of using the “Visible” formula.
The Y position of the separator should be set as follows:
If(
nameOfLastLabelInExpandedSection.Visible,
nameOfLastLabelInExpandedSection.Y + nameOfLastLabelInExpandedSection.Height + 2,
nameOfLastLabelInCollapsedSection.Y + nameOfLastLabelInCollapsedSection.Height + 2
)Which translates to the following in my case:
If(
lblBirthdayKey.Visible,
lblBirthdayKey.Y + lblBirthdayKey.Height + 2,
lblAddressKey.Y + lblAddressKey.Height + 2
)The result
That’s it, you’ve built a gallery in which individual rows can be expanded to show additional information! This is what is should look like:
DigiPersonal 