PowerApps Index Collection Gallery

PowerApps: Read values at any Index of a Collection or Gallery

Premise

There’s a requirement to sequentially traverse a collection in PowerApps. The issue is that, unlike a normal array in any programming language, we cannot directly access a collection’s item via indexing, in PowerApps i.e., we can’t dynamically read values at any index of a collection.

Solution

The solution will be to add a new column, at runtime, to our collection to record the chronological order of the items in the collection. The column, say Index, will help us to filter the collection and traverse either in forward or backward directions or pick values from any random valid index value.

The solution will involve little bit of coding.

First we need to create our custom collection and current index.

ClearCollect(Top10ItemsWithIndices, 
    AddColumns(
        RenameColumns(
            FirstN([1,2,3,4,5,6,7,8,9,10], CountRows(Top10Items)),
            "Value", "Index"
        ),
        "Title", Last(FirstN(Top10Items, Index)).Title,
        "ID", Last(FirstN(Top10Items, Index)).ID
    )
);
Set(currentIndex, 1)

The above code can be described as the following: –

  • Top10Items is a collection which has already been initialized with 10 items from a SharePoint list.
  • Here, I am creating a new collection, Top10ItemsWithIndices, to store collection items with indexes.
  • In the collection, Top10ItemsWithIndices, first I’m creating my index column. I’ve created a fixed array with values 1-10. Based on the result of CountRows on line 4, I’m picking up items from my array and inserting the same to my new index column. For ex, if the CountRows method returns value 4, then array of 4 items will be selected. [1,2,3,4]
  • This new column will by default be created with the name, Value. I’m renaming the same to Index. This step is purely optional.
  • After adding the first Index column, we again need to add the remaining columns from our collection. In this case, I’ve loaded the Title as well as the ID property of each item in the collection as I only needed these 2 columns. Here, you’ll have to specify each column that you’ll require in your application.
  • Also, creating a new variable, currentIndex, to store the current selected item’s index from the collection.

The important thing is that the fixed array collection should always be greater or equal to the result of the CountRows function. Hence, always choose a large approximate value

Once our collection is loaded with the Index value, we can easily traverse in any direction of the collection i.e., we can access item at any index of the collection.

//to access next item in the collection
Set(currentIndex, currentIndex + 1)

//to access previous item in the collection
Set(currentIndex, currentIndex - 1)

//get the item at a specified index from a collection
Last(FirstN(Top10ItemsWithIndices, selectedIndex))

Key Takeaways

  • The major limitation of this approach is that it expects a fixed array beforehand. We need to ensure that our result from the CountRows function should always be less or equal to the length of this array.
  • Once we have our custom index column, we can directly read values at any specified index from the collection using the Last & FirstN method’s combination.
  • If the collection is used as items in a Gallery then, a custom button can be used to alter the selection automatically.
  • In your new collection, you’ll have to load all the columns that are required in your application. For ex, I’ve additionally loaded the “Title” as well as the “ID” properties.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.