cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
LaurensM
Super User
‎11-19-2023 10:42 AM

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.

 

LaurensM_0-1700418126763.png

 

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.

 

LaurensM_1-1700418126782.png

 

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.

 

LaurensM_2-1700418126750.png

 

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:

 

LaurensM_3-1700418126705.png

 

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.

 

LaurensM_4-1700418126742.png

 

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

 

  1. 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.
  2. Turn off Flexible height and adjust the Height property to the required size.

 

LaurensM_5-1700418126730.png

 

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

 

  1. 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)
  2. Flexible height should remain on. This allows the gallery height to automatically scale depending on the vertical container height.

 

LaurensM_6-1700418126655.png

 

Final result vertical gallery

 

LaurensM_7-1700418127081.gif

 

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.

 

LaurensM_8-1700418126735.png

 

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.

 

LaurensM_9-1700418126662.png

 

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:

 

LaurensM_10-1700418126762.png

 

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.

 

LaurensM_11-1700418126761.png

 

Select the Gallery control and adjust the properties as follows:

 

  1. Align in container should remain ‘Stretch’.
  2. 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.

 

LaurensM_12-1700418126757.png

 

Final result horizontal gallery

 

LaurensM_13-1700418128563.gif

 

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.

 

LaurensM_14-1700418126748.png

 

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). 📘

Comments
Advocate II
‎01-03-2024 09:21 AM

One note for the vertical gallery, is your vertical scroll bar will be at the very far right of your parent container.

You can use a smaller gallery width to show the scrollbar on the direct right in the container by making a separate container for your header row and setting the width beyond that of the parent container.  Doing so will allow you to scroll horizontally and maintain a scroll bar on the screen instead at the end of the horizontal scroll.

You will also need to "sync" the controls inside the gallery to the X position of your header rows columns so that they align when scrolling horizontally.  There is a slight delay when scrolling as they "sync" when the horizontal scroll happens.

We had a requirement to do this because the user wanted both vertical and horizontal scroll bars visible at all times.

0 Kudos