How to Get Row Number in Power Apps Gallery?

Do you know how to get row number in the Power Apps gallery? This Power Apps tutorial will teach entire information about the get row number in Power Apps gallery control.

Here, we will discuss how to get a row number in the Power Apps gallery from the SharePoint list and how to get a row number in the Power Apps gallery using a collection.

Get Row Number in Power Apps Gallery [From SharePoint List]

Let’s see how to get row number in the Power Apps gallery from the SharePoint list with a real example.

Scenario:

I have a SharePoint Online list named “Project Tracker” and this list contains the below fields.

Column Name	Data Type
Product Name	Default single line of text
Price	Currency
Quantity	Number
Order Date	Date and time
Delivery Date	Date and time

Refer to the screenshot below:

In Power Apps, there is a gallery control that displays all SharePoint list records. Now, I would like to create an auto-generated number that will appear in the gallery, as in the screenshot below.

To do so, follow the below steps. Such as:

1. Open Power Apps -> Create a Blank Canvas app -> Connect your SharePoint Online list like below.

2. Next, select App object [From left navigation] and set its OnStart property as:

OnStart = Clear(colProductRowNumber);
ForAll(
    'Order Details',
    Collect(
        colProductRowNumber,
        Last(
            FirstN(
                AddColumns(
                    'Order Details',
                    "RowIndex",
                    CountRows(colProductRowNumber) + 1
                ),
                CountRows(colProductRowNumber) + 1
            )
        )
    )
)

Here,

• colProductRowNumber = Power Apps Collection
• ‘Order Details‘ = SharePoint Online list
• “RowIndex” = This is the new column that you have created to specify the autogenerated number

3. Now, click on the Apps’s Run OnStart property to get the collection.

4. Then, insert a Gallery control and set its Items property as:

Items = colProductRowNumber

5. Now, insert a Text label and set its Text property to the code below.

Text = ThisItem.RowIndex

Where,

• RowIndex = It is a unique column to create a row number in a gallery control

6. Once your app is ready, Save, Publish, and Preview the app. Once you reopen the app, you can see the auto-generated number has appeared in the gallery control.

This is how to get a row number in Power Apps gallery control.

Get Row Number in Power Apps Gallery [From Collection]

Next, we will see how to get a row number in the Power Apps gallery from a collection with a simple example.

Example:

I have a Power Apps collection, i.e., [colTravel] and this collection contains the below records.

Now, I would like to generate row numbers in a Power Apps gallery as shown below.

To do so, follow the below steps. Such as:

1. On the Power Apps Screen -> Set its OnVisible property to the code below.

Items = ClearCollect(
    colTravel,
    {
        TripTitle: "Company anniversary trip",
        Destination: "Indiana,UK",
        StartDate: "9/25/2023",
        EndDate: "9/31/2023",
        Airline: "Alaska Air",
        Requestor: "Lidia Holloway"
    },
    {
        TripTitle: "Research interviews",
        Destination: "Bengaluru,India",
        StartDate: "10/15/2023",
        EndDate: "10/20/2023",
        Airline: "SouthWest",
        Requestor: "Lynne Robbins"
    },
    {
        TripTitle: "Design sprint",
        Destination: "New York,UK",
        StartDate: "11/22/2023",
        EndDate: "11/28/2023",
        Airline: "British Airways",
        Requestor: "Joni Sherman"
    },
    {
        TripTitle: "Sales team conference",
        Destination: "Georgia,UK",
        StartDate: "12/20/2023",
        EndDate: "12/25/2023",
        Airline: "Emirates",
        Requestor: "Johanna Lorenz"
    },
    {
        TripTitle: "Event conference travel",
        Destination: "Indiana,UK",
        StartDate: "12/15/2023",
        EndDate: "12/18/2023",
        Airline: "Alaska Air",
        Requestor: "Lidia Holloway"
    },
    {
        TripTitle: "Internal meetings",
        Destination: "Georgia,UK",
        StartDate: "12/27/2023",
        EndDate: "12/30/2023",
        Airline: "Emirates",
        Requestor: "Johanna Lorenz"
    },
    {
        TripTitle: "Company retreats",
        Destination: "Bengaluru,India",
        StartDate: "1/5/2024",
        EndDate: "1/11/2024",
        Airline: "SouthWest",
        Requestor: "Lynne Robbins"
    },
    {
        TripTitle: "Client meetings",
        Destination: "Austria,UK",
        StartDate: "1/20/2024",
        EndDate: "1/27/2024",
        Airline: "Japan Airlines",
        Requestor: "Johanna Lorenz"
    },
    {
        TripTitle: "Transfers and offshore work",
        Destination: "New York,UK",
        StartDate: "1/31/2024",
        EndDate: "2/5/2024",
        Airline: "British Airways",
        Requestor: "Joni Sherman"
    },
    {
        TripTitle: "Bleisure travel",
        Destination: "Indiana,UK",
        StartDate: "2/15/2024",
        EndDate: "2/21/2024",
        Airline: "Alaska Air",
        Requestor: "Lidia Holloway"
    }
);
ClearCollect(
    colGetRowCount,
    ForAll(
        Sequence(CountRows(colTravel)),
        Patch(
            Last(
                FirstN(
                    colTravel,
                    Value
                )
            ),
            {RowNumber: Value}
        )
    )
)

Where,

• colTravel = Power Apps Source Collection
• colGetRowCount = Power Apps 2nd collection
• ForAll() = The ForAll function generates a table of values that includes the corresponding row numbers
• CountRows() = Use the CountRows function to ascertain the number of rows in the initial collection
• Sequence() = This function provides instructions for creating a sequence function to generate row numbers
• Patch() = This function adds row numbers to the original collection and displays them in a new column titled ‘RowNumber’

2. Next, insert a Gallery control and set its Items property as:

Items = colGetRowCount

3. Next, insert a Text label and set its Text property to the code below.

Text = ThisItem.RowNumber

4. Save, Publish, Reload, and Preview the app. The gallery will display the row count as in the screenshot below.

This is how to get a row number in the Power Apps gallery control.

Conclusion

PowerApps gallery gets a row number, which means, simply, we can say it is an auto-generated number that will appear in the Power Apps gallery. The number will come automatically depending on the number of gallery items

From this Power Apps tutorial, we covered how to get a row number in the Power Apps gallery from the SharePoint list and how to get a row number in the Power Apps gallery using a collection.

You may also like:

• Show Message If Gallery is Empty in Power Apps
• How to Sort Power Apps Gallery by Choice Column?
• Customize a Power Apps Gallery Layout
• How to Display SharePoint List Items in PowerApps Gallery?
• How to Increment Number in Power Apps Gallery?
• Set Up Power Apps Gallery Border Between Items