How to create a gallery scrollable in both directions

The Power Apps gallery controls allow developers to easily display tabular data from a datasource or local collection. Currently we have 3 gallery types (1) Vertical gallery, (2) Horizontal gallery and (3) Flexible height gallery (vertical lay-out). The preferred gallery type will depend on how you would like to visualize the data.

While all galleries have native scroll functionality, the scroll direction is dependent on the chosen gallery type. The horizontal gallery for instance only permits scrolling on the horizontal axis, and vice versa for the vertical gallery.

Some time ago I answered an interesting question on the Power Apps Community forum, where a horizontal gallery had to be scrollable in both directions. In this blog post we will learn how to leverage the vertical container control to allow galleries to scroll in both directions regardless of gallery type.

VERTICAL GALLERY

To start, I have created a vertical gallery set-up where I unfortunately do not have sufficient horizontal space to show all table columns. Although I can scroll through all rows, I am unable to fully view the last column name and values.

Add a vertical container

As a first step, add a vertical container to your canvas screen by (1) selecting Insert in the top header, (2) navigating to the Layout section and (3) selecting Vertical container.

Set the vertical container X, Y, Width & Height properties according to your current gallery set-up, as the container should fill all space that is currently occupied by your gallery and header. Afterwards add your gallery headers to the vertical container and then add the gallery control. Note that your gallery headers should be grouped in a regular container control. Finally, your Tree View structure should look as follows:

Adjust vertical container properties

Select the vertical container, navigate to the property panel on the right side of your editor and adjust the vertical container properties:

1. Justify vertical & Align horizontal values should remain ‘Start’.
2. Set Horizontal Overflow to ‘Scroll’.
3. Wrap should remain off.

Select the Header container and adjust the right property panel as follows:

4. Align in container should remain ‘Start’ and adjust the Width to the expected max width of your header container needed to display all columns – in my case 625.
5. Turn off Flexible height and adjust the Height property to the required size.

Finally, select the Gallery control and adjust the properties as follows:

6. Align in container should remain ‘Start’ and adjust the Width to the expected max width of your gallery needed to display all column values – in my case 625. (or HeaderContainerName.Width)
7. Flexible height should remain on. This allows the gallery height to automatically scale depending on the vertical container height.

Final result vertical gallery

HORIZONTAL GALLERY

A similar approach can be taken in order to create a horizontal gallery that also allows for scrolling across the vertical axis. To start, I have created a horizontal gallery where the bottom values are not fully visible.

Add a vertical container

As a first step, add a vertical container to your canvas screen by (1) selecting Insert in the top header, (2) navigating to the Layout section and (3) selecting Vertical container.

Set the vertical container X, Y, Width & Height properties according to your current gallery set-up, as the container should fill all space that is currently occupied by your gallery. Add your gallery to the vertical container – this may result in some UI clean-up after copy-pasting. Your Tree View structure should look as follows:

Adjust vertical container properties

Select the vertical container, navigate to the property panel on the right side of your editor and adjust the vertical container properties:

1. Set Align horizontal to ‘Stretch’, Justify vertical should remain ‘Start’.
2. Set Vertical Overflow to ‘Scroll’.
3. Wrap should remain off.

Select the Gallery control and adjust the properties as follows:

4. Align in container should remain ‘Stretch’.
5. Flexible height should remain turned on. Adjust the Minimum height to the expected total height of your Horizontal gallery needed to display all data – in my case 175.

Final result horizontal gallery

HORIZONTAL GALLERY LIMITATION

Should the user want to scroll horizontally by manually dragging the scrollbar, then they will have to scroll down vertically first. That said, scrolling horizontally without scrolling down first can be done by scrolling via the mouse wheel press. The latter was shown in the Gif above. 

In the section below we will explore how to display both the horizontal and vertical scrollbar on the container axes by delegating both scroll options to the container.

Possible workaround

In addition to the vertical scroll, we can also delegate the horizontal scroll to the vertical container by calculating our gallery width dynamically. This workaround will result in both scrollbars displaying on the container axes without the need to scroll down to find the horizontal scrollbar.

However, this method will add additional complexity and decrease app performance due to client-side calculations. I would only recommend this workaround for smaller datasets.

Required property adjustments

Starting from our finished product of the ‘Horizontal Gallery’ section, we will need to make the following changes:

1. Set the container Horizontal overflow to ‘Scroll’
2. Set the gallery Show scrollbar toggle to off
3. Set the gallery Align in container to ‘Start’

The gallery Width property should be set to the code below

(Self.TemplateWidth + Self.TemplatePadding) * Self.AllItemsCount + Self.TemplatePadding

In case your gallery template padding property is set to and will remain 0, we can shorten the code to the following:

Self.TemplateWidth * Self.AllItemsCount

If you liked this blog post, feel free to give it a like. 👍 | For more tips and tricks check out my blog (LaurensM). 📘

This post was originally published on this site