Power Apps Gallery Pagination

Do you know what is a PowerApps Gallery Pagination and how the PowerApps user can use it in a simple manner? Even if you are aware of this thing, let’s check out this PowerApps Tutorial that explains it in the easiest way.

Introduction to Power Apps Gallery Pagination

First of all, everyone should know that what is a Gallery Pagination in PowerApps and what its use.

• A Pagination is a type of thing that can be used to divide content from a large data source and that represents in a limited manner. As all these things happen by a PowerApps Gallery Control, that’s why it’s called Gallery Pagination.
• As we know in the PowerApps gallery control, contains only up and down scrollbar navigation. So by using this pagination trick, we can resize the gallery based upon our choice.
• Based upon our choice in sense, suppose we want to view the previous or next page records in the gallery, then we can make it by using the Previous or Next control navigation. When a user will click on the Previous or Next button, then he/she can able to see their desired records.
• Similarly, if a user wants to view the First or Last Page records in the gallery, then he/she can able to see them by using the First Page or Last Page button navigation control.

Steps to create Power Apps Gallery Pagination

At first, to create a PowerApps Gallery Pagination, We need a Data source like SharePoint List, OneDrive for Business, Excel Sheet etc. Here, for this example, I have used a SharePoint List named Products. This list has these many below columns:

• Title = By default, this is a single line of text data type column
• Vendor = This is a Choice column
• Customer Name = This is a Single line of text column
• Quantity = This is a Number Data type field
• Price = This is a Currency Data type field
• Sales Date = This is a Date Time data type column
• Status = This is a Choice column

You can refer to the below screenshot.

The below screenshot represents the whole structure of the PowerApps gallery pagination. The screen contains these many below controls:

1. FIRST PAGE = This specifies as a PowerApps Button control. When a user will press on it, then it will navigate to the first page of the gallery control.
2. LAST PAGE = This is also a Button control. When a user will press on it, then it will navigate to the last page of the gallery control.
3. Product Sales List = This is a Label control that I used for the gallery heading purpose.
4. Previous Page = On the gallery, there is a Previous icon where a user can navigate to the previous page once he/she will click on it.
5. Next Page = Similarly, there is a Next icon where a user can navigate to the next page once he/she will click on it.
6. Page No. / Total no. of Page = This is a Label control that shows the page number out of the total page in the gallery control.
7. Gallery = This is a vertical gallery control that displays all the items or records from the data source.

To create a PowerApps Gallery Pagination, We will use these below functions:

• If
• UpdateContext
• RoundUp & RoundDown
• CountRows
• FirstN & LastN

So overall the gallery will look like as shown below.

Let’s follow the below steps.

Step – 1:

• At first, apply the below code on Screen’s OnVisible property as:

OnVisible = UpdateContext({varPage: 0});
UpdateContext(
    {
        varPage: RoundDown(
            Gallery1.Height / Gallery1.TemplateHeight,
            0
        )
    }
);
FirstN(
    Products,
    varPage
)

Where,

1. varPage = Context variable name
2. Gallery1 = Gallery control name
3. Products = SharePoint List name

• The above code specifies when the screen is loaded, it will display Gallery with the Number of Rows as determined by “RoundDown(Gallery1.Height/Gallery1.TemplateHeight,0)” using FirstN(Products, varPage)“.

Step – 2:

• Connect the Data source to the app. Here I have taken a SharePoint List data source named Products.
• Next, Insert a Gallery control to the screen (if you are already added it, then skip) and set its Items property as:

Items = LastN(
    FirstN(
        Products,
        varPage
    ),
    RoundDown(
        Gallery1.Height / Gallery1.TemplateHeight,
        0
    )
)

Where,

1. LastN = PowerApps LastN is a function that helps to return the last set of records of a table.
2. FirstN = PowerApps FirstN is a function that helps to return the first set of records of a table. To learn more about the PowerApps First and Last function, go through this article: PowerApps First, FirstN, Last, and LastN function with examples
3. Products = SharePoint List Data source name
4. varPage = Context Variable name that you have created before
5. Gallery1 = Gallery control name

• Gallery1.Height/Gallery1.TemplateHeight is used to calculate the “Viewable Number of Rows”.
• This is a dynamic formula. Whenever you will manually adjust the Gallery1 Height using the mouse, then the formula will calculate automatically.
• Here, I can use the same formula for calculating the number of pages.

Step – 3:

• Next comes to count the page number out of the total number of pages. Insert a Label control under the gallery and set the below code on its Text property as:

Text = RoundUp(
    varPage / RoundDown(
        Gallery1.Height / Gallery1.TemplateHeight,
        0
    ),
    0
) & " / " & RoundUp(
    CountRows(Products) / RoundDown(
        Gallery1.Height / Gallery1.TemplateHeight,
        0
    ),
    0
)

Refer to the below screenshot.

Step – 4:

• Now its time to work with the FIRST PAGE Button control. So that when a user will click on the button, then it will navigate to the first page of the gallery.
• Select the FIRST PAGE button and apply the below code on its OnSelect property as:

OnSelect = UpdateContext(
    {
        varPage: RoundDown(
            Gallery1.Height / Gallery1.TemplateHeight,
            0
        )
    }
);
FirstN(
    Products,
    varPage
)

You can refer to the below screenshot.

Step – 5:

• Similarly, When a user will click on the LAST PAGE, then it will navigate to the last page of the gallery control.
• To do this, select the LAST PAGE button and set its OnSelect property to the below code:

OnSelect = UpdateContext({varPage: CountRows(Products)});
LastN(
    Products,
    varPage
)

Where,

CountRows = PowerApps CountRows function helps to count the total number of items or records of the gallery control. To know more details about the CountRows function, refer this detailed tutorial: PowerApps CountRows function

Step – 6:

• Add a Previous icon (<) on the gallery control and apply the below formula on its OnSelect property as:

OnSelect = If(
    varPage < 2 * RoundDown(
        Gallery1.Height / Gallery1.TemplateHeight,
        0
    ),
    UpdateContext(
        {
            varPage: RoundDown(
                Gallery1.Height / Gallery1.TemplateHeight,
                0
            )
        }
    );
    FirstN(
        Products,
        varPage
    ),
    UpdateContext(
        {
            varPage: varPage - RoundDown(
                Gallery1.Height / Gallery1.TemplateHeight,
                0
            )
        }
    )
)

• The above code specifies if the record has “Come to the First Record” based on varPage < 2*RoundDown(Gallery1.Height/Gallery1.TemplateHeight,0)

Step – 7:

• Add a Next icon (>) on the gallery control and apply the below formula on its OnSelect property as:

OnSelect = If(
    varPage < CountRows(Products),
    UpdateContext(
        {
            varPage: If(
                varPage < CountRows(Products),
                varPage + RoundDown(
                    Gallery1.Height / Gallery1.TemplateHeight,
                    0
                )
            )
        }
    )
)

• The above code specifies if the record has “Come to the End of Records” based on varPage < CountRows(Products).

That’s it to do on the PowerApps screen.

Step – 8:

• Once everything is completed, just save and publish the app. Now again reopen the app and do the operation as per your need. Below represents a GIF of the app that you can refer though.

Also, you may like these below PowerApps Tutorials:

• Power Apps Data Table – Complete tutorial
• Migrate PowerApps from one tenant to another
• Power Apps Export Import Control – How to use
• Power Apps PDF Viewer – Complete tutorial
• How to use date time picker in PowerApps
• Power Apps Display SharePoint List Items – 5 Ways
• Power Apps Dropdown Control – How to use
• PowerApps Dropdown Gallery + Examples
• PowerApps Filter SharePoint List (21 Examples)
• Power Apps List Box Control – Complete tutorial
• PowerApps Container Control – Complete tutorial
• Power Apps Image Control – How to use
• Power Apps Audio and Video Control [Detailed tutorial]
• Power Apps GroupBy Function example
• Power Apps Choices Function with Examples

This tutorial explains how we can create a Gallery Pagination in PowerApps and what is the use of it.