Power Apps galleries – how to auto scroll!

Scenario

Galleries are one of the most useful controls in Power Apps. Most times they are used to display a list of records. However, they can also be used to edit and add records.

Let's suppose there is a gallery of accounts which is populated with a collection of all existing accounts. Its Items property is set to:

colAccounts

The collection is populated as follows:

ForAll(Accounts, Collect(colAccounts, {Name: 'Account Name'}))

The OnSelect of the + icon is:

Collect(colAccounts, {Name: ""});

Problem

As you can see, when the user clicks on the + icon to add a new account, the user doesn't get any visual indication that a new record has been added. The user, in turn, might end up clicking on the + icon multiple times only to later realize that every click resulted in a new account being created.

Solution

The desired behavior is for the gallery to scroll automatically to the bottom of the list when the user clicks on the + icon. This gives a clear indication to the user that a new record has been added and is ready to be populated with details. Here is a quick demo:

The way to achieve this is by using the Reset function and the Default property of the gallery. Here are the changes to achieve this behavior:

1. Default property

   Last(colAccounts)

2. OnSelect of the icon

   Collect(colAccounts, {Name: ""}); Reset(galAccounts)

Summary

To summarize, you can achieve auto scroll with a combination of the Default property of a gallery and the Reset function. Use the Default property to specify the record to which the gallery should scroll to. In the above example, to allow more flexibility to scroll to any record not necessarily the last one, store the specific record that the gallery should scroll to in a variable. Then set the default property to that variable.

Pro tip

Simply setting the Default property to a variable that stores a record sometimes isn't good enough for the auto scroll to work. If that is the case, do a lookup using the variable. Suppose there is a variable gblSelectedAccount that stores an account record which we want an accounts gallery to scroll to. Set the Default property to:

LookUp(Accounts, Account = gblSelectedAccount.Account

where Account is the GUID (unique ID) of an account. In the above example which uses a collection, you would need some form of unique identifier for the accounts in the collection. For example, you could change the collection creation expression to:

ForAll(Accounts, Collect(colAccounts, {Name: 'Account Name', Order: CountRows(colAccounts)+1}))

With this, you can now set the Default property to

LookUp(colAccounts, Order = gblSelectedAccount.Order)

To learn more about galleries, click here.

Related articles

1. Resetting a gallery in Power Apps
2. Flexible Height Galleries – A quick intro
3. Checking all items in a gallery for a specific value