PowerApps tutorial: Vertical and Horizontal scroll Gallery with Headers

Scenario

I was working with a client to build an application to allow them to better manage sales from inventory. As part of their invoice process, they export data from the application to a CSV. However, the client wanted to display a preview of this data before exporting.

First I set up a blank vertical gallery. I set the Items property was set to the Dataverse table containing the items to be exported to the CSV. The client wanted to display about a dozen columns within the gallery. I quickly realized we would have space issues and they would be unable to fully read and therefore understand the field values. Fortunately I found a great tutorial by Reza Dorani about how to create a gallery with both horizontal and vertical scroll.

Horizontal & Vertical Gallery Summary

Currently, there is no way to modify a gallery control directly to allow either to scroll both vertically and horizontally. Following Reza’s tutorial, the approach he recommends is to add a gallery to a container. The vertical gallery handles the vertical scroll. The container will be narrower than the gallery, so we can scroll to show the overflow.

• Add a vertical container to the screen. Set the desired height and width and set Horizontal Overflow to Scroll.
• Place a vertical gallery inside the container. Adjust the template size and padding if you’d like.
• Add the labels to the gallery in a row and style them. For each label, update the text property to point to ThisItem’s field. Adjust the width of each label.
• Set the X property of the left-most label to 0. For each proceeding label, set its X property to the preceding label’s X property + the preceding label’s width. In the screenshot below, I modify the Item label, which is the second column after Category. You will not be able to drag labels outside the width of the gallery, so this step is tedious but necessary.

• Set the gallery’s width property to the sum of all labels. You can manually calculate this or reference the labels directly, which will be more flexible if your styling changes. I also set the LayoutMinWidth property to Self.Width after I updated the gallery’s width to prevent any browser resizing.

Adding Headers

I found this tutorial very helpful but I felt like with so many columns (especially with similar types like currency and dates) we could improve the user experience by adding headers. I considered creating a collection for the data in the gallery and then adding a row that would represent a header. However, I knew the client wanted to be able to sort the columns so this wouldn’t work. Therefore I decided to add a horizontal container to my parent container before the gallery and align the headings with each label in my gallery.

1. Add a horizontal container to the original container and move it before the gallery (right click container from Tree view > Reorder > Move to top
2. Set the width and minimum width of the horizontal container to the width of the gallery
3. Set wrap to On. This will not have an immediate impact on your development of this solution but prevents a styling inconsistency I noticed on the published version of the app, which hid some of the right-most column headers.
4. Add the same number of labels to the horizontal container as there are in the gallery. Style the labels and update the text properties and then move them so they are all in a row. There are several options for how to do this, but as a next step I prefer to set both the X property and width of each header label to the same X property/width as the label within the gallery it represents. Again this is tedious but will make your life easier for long term maintenance.

At this point you will have a gallery with a horizontal and vertical scroll and headers. As you scroll vertically, the headers will stick to the top of the screen which will help your users better understand the data. I exported the canvas app referenced in the screenshots in my GitHub so feel free to use that as a starting point.