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:
- 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.
- 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.
- Product Sales List = This is a Label control that I used for the gallery heading purpose.
- 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.
- Next Page = Similarly, there is a Next icon where a user can navigate to the next page once he/she will click on it.
- 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.
- 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,
- varPage = Context variable name
- Gallery1 = Gallery control name
- 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,
- LastN = PowerApps LastN is a function that helps to return the last set of records of a table.
- 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
- Products = SharePoint List Data source name
- varPage = Context Variable name that you have created before
- 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.
I am Bijay a Microsoft MVP (8 times – My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com
Very good
Biijay, that’s amazing!!!! Thanks for sharing. Is this documented? How’d you learn this?
the above steps are working in large data set of about 10,000
getting an error in varPage variable that we used in the items property of the gallery!! how to resolve it??
why data not show
is myCode
LastN(
FirstN(
Users,
varPage
),
RoundDown(
Gallery3.Height / Gallery3.TemplateHeight,
0
)
)
Hi Bijay, Thank you for this article. I am new to PowerApps and I would like to know how I can combine this with a Search Bar and DropDown that is tied to the gallery. Looking forward to hearing from you
did you found any solution?
How to filter the gallery along with search and dropdowns .
Please help!!!!
Hi Mutafa,
You can refer to this article: https://www.spguides.com/powerapps-gallery-control-filter/