Skip to main content

Gallery Resetting Scroll Bar Workaround

By July 24, 2018PowerApps, Pro Tips

Recently, Microsoft has made some updates to PowerApps and changed how galleries operate. If you use checkboxes or textboxes inside galleries to update a collection, you’ll run into these changes and find one of them somewhat frustrating.

[divider line_type=”No Line” custom_height=”20″]

The Problem

[divider line_type=”No Line” custom_height=”20″]

Scroll down a gallery and click a checkbox or change a value in a text field.

[divider line_type=”No Line” custom_height=”20″][image_with_animation image_url=”398″ alignment=”center” animation=”Fade In” border_radius=”none” box_shadow=”none” max_width=”100%”][divider line_type=”No Line” custom_height=”20″]

Notice that the gallery automatically hops back up to the top of the list. You end up losing your spot and must scroll down again back to where you were.

[divider line_type=”No Line” custom_height=”20″][image_with_animation image_url=”399″ alignment=”center” animation=”Fade In” border_radius=”none” box_shadow=”none” max_width=”100%”][divider line_type=”No Line” custom_height=”20″]

This occurs because the collection that the gallery is based from is being updated. Here’s a way around that.

[divider line_type=”No Line” custom_height=”20″]

The Solution

[divider line_type=”No Line” custom_height=”20″]

1. Create 2 collections with the same information. Here I made the source for Equipment2 to be Equipment.

[divider line_type=”No Line” custom_height=”20″][image_with_animation image_url=”400″ alignment=”center” animation=”Fade In” border_radius=”none” box_shadow=”none” max_width=”100%”][divider line_type=”No Line” custom_height=”20″]

2. Have the gallery look at the first collection.

[divider line_type=”No Line” custom_height=”20″][image_with_animation image_url=”401″ alignment=”center” animation=”Fade In” border_radius=”none” box_shadow=”none” max_width=”100%”][divider line_type=”No Line” custom_height=”20″]

3. On the checkbox, let the checkbox patch the second collection instead of first.

[divider line_type=”No Line” custom_height=”20″][image_with_animation image_url=”402″ alignment=”center” animation=”Fade In” border_radius=”none” box_shadow=”none” max_width=”100%”][divider line_type=”No Line” custom_height=”20″]

4. When you scroll down and click the checkbox, the gallery won’t reset because you’re updating Equipment2 instead of Equipment.

[divider line_type=”No Line” custom_height=”20″][image_with_animation image_url=”403″ alignment=”center” animation=”Fade In” border_radius=”none” box_shadow=”none” max_width=”100%”][divider line_type=”No Line” custom_height=”20″]

What you can do next is recollect the changes back to Equipment or just leave it as it is depending on what your workflow is in your app.