Power Apps Gallery Row Number [3 Various Ways]

While working on a Power Apps gallery to show a list of items, I wanted to add a row number to each record. This helps make the list look more organized and makes it easier to find and refer to specific items.

In this tutorial, I will explain how to add a Power Apps gallery row number dynamically and add a Power Apps gallery row number using a SharePoint list.

Additionally, we will explore how to generate row numbers for a Power Apps collection, providing examples.

So let’s get started!

Add Row Number to Gallery Dynamically in Power Apps

A Power Apps gallery can display a row number, which is simply a sequential number that increments for each item in the list. This number is automatically generated based on the number of items in the gallery.

As you can see in the GIF below, the Row Number has been generated dynamically in the Power Apps gallery. By default, all products will display a specific auto-incrementing number (1, 2, 3, and so on).

Additionally, whenever a user searches for a product, the specific filter list will appear with a dynamically generated number in the gallery.

1. To achieve this, set up a SharePoint list, such as Sales Data, that contains various columns like:

Column	Data type
Product Name	Single line of text
Product Category	Single line of text
Sales Amount	Currency
Date	Date time

2. Next, select the gallery and set its Items property to the code below:

With(
    {
        prodCountRow: Filter(
            'Sales Data',
            StartsWith(
                'Product Name',
                txtSearchProduct.Value
            )
        )
    },
    ForAll(
        Sequence(CountRows(prodCountRow)),
        Patch(
            Last(
                FirstN(
                    prodCountRow,
                    ThisRecord.Value
                )
            ),
            {ProdRowNumber: Value}
        )
    )
)

Where,

• prodCountRow = Scope variable name
• ‘Sales Data’ = SharePoint list name
• ‘Product Name’ = Specify the column name that you want to search in the search box
• txtSearchProduct = Text input name

3. Insert a Label inside the gallery and set its Text property as:

ThisItem.ProdRowNumber

4. Save and preview the app. Try to enter any first letter of the product (either upper/lower case) inside the search box. You can see the gallery will filter according to the search product, including the individual row number as shown below.

Add Power Apps Gallery Row Number Using a SharePoint List

Here, we will add the Power Apps gallery row number from a SharePoint list. I will use the same list above for this example.

Refer to the image below:

1. First, go to the App’s OnStart property and apply the formula below:

Clear(colProductRowNumber);
ForAll(
    'Sales Data',
    Collect(
        colProductRowNumber,
        Last(
            FirstN(
                AddColumns(
                    'Sales Data',
                    'RowIndex',
                    CountRows(colProductRowNumber) + 1
                ),
                CountRows(colProductRowNumber) + 1
            )
        )
    )
)

Where,

• colProductRowNumber = Power Apps Collection Name
• ‘Sales Data’ = SharePoint list
• ‘RowIndex’ = Add a new column to specify the autogenerated number

2. Select the gallery and set the Items property as:

Items = colProductRowNumber

3. Insert a Label inside the gallery and set its Text property as:

ThisItem.RowIndex

4. Finally, run the App’s OnStart property and play the app. You can see the autoincrement number has been generated in the gallery.

Generate Row Numbers in a Power Apps Collection

Similarly, to generate the row numbers for a Power Apps Collection, follow the instructions below:

The image below represents a Power Apps button and a gallery. When a user clicks on the button, a collection is created, and the row number is also generated in the gallery.

1. Select the Button control and set its OnSelect property to the code below: (Here we will create a Power Apps collection and then generate the row number for each record present inside the gallery).

ClearCollect(
    colTickets,
    {
        Name: "John",
        Department: "IT",
        Status: "Open"
    },
    {
        Name: "Jack",
        Department: "HR",
        Status: "Open"
    },
    {
        Name: "Marry",
        Department: "FINANCE",
        Status: "Submitted"
    },
    {
        Name: "Glen",
        Department: "HR",
        Status: "Resolved"
    },
    {
        Name: "Harry",
        Department: "SALES",
        Status: "In Progress"
    },
    {
        Name: "Alex",
        Department: "MARKETING",
        Status: "Rejected"
    },
    {
        Name: "Andrino",
        Department: "SALES",
        Status: "Open"
    }
);

// Add row number code

ClearCollect(
    colTicketRowNumber,
    ForAll(
        Sequence(CountRows(colTickets)),
        Patch(
            Last(
                FirstN(
                    colTickets,
                    Value
                )
            ),
            {RowNumber: Value}
        )
    )
)

Where,

• colTickets, colTicketRowNumber = Collection name
• Name, Department, Status = Collection columns
• RowNumber = Provide a name where the row number will be stored for each item

2. Select the gallery and set the collection name to its Items property:

colTicketRowNumber

3. To display the row number, add a label inside the gallery and set its Text property as:

Text = ThisItem.RowNumber

4. Finally, save and publish the app. Preview it and click on the button (Click Me!). You can see that the gallery will display the collection data, including the incrementing number.

I hope this article has helped you learn how to generate a Power Apps gallery row number dynamically. Additionally, we covered how to add a Power Apps gallery row number using both the SharePoint list and a collection.

Also, you may like some more Power Apps tutorials:

• Filter Power Apps Gallery Based On Search Box
• Build a Calculator in Power Apps
• Create Power Apps Weather App
• Import CSV Data to Microsoft Dataverse
• Power Apps RSS Feed
• Create Dataverse View