Pagination Concept
Pagination is the technique of splitting a large set of records into smaller parts, called “pages”. This allows the user to navigate through data a few items at a time, rather than loading everything at once (which is slow and inefficient).
This is especially useful when:
- You’re working with large datasets
- Your data source has delegation limits (e.g., SharePoint)
- You want to improve user experience by loading fewer records at once
How Pagination Works
- Page Size – The number of records shown per page (e.g., 5 articles).
- Current Page – Which page the user is currently viewing.
- Start Index / End Index – Helps determine which items to show from the dataset.
- Navigation – Buttons like “Previous” and “Next” let the user move between pages.
It is simple to use, can be directly connected to a data source and has many more features. But when there are a lot of items in the data source the page performance gets affected and which will also result in a bad user experience. To overcome this, we can use Pagination in Power App. Pagination helps in increasing page performance. Pagination function by default is not a feature of power App so to achieve this we need to develop it.
Prerequisite for Pagination
To demonstrate how pagination works, we need a data source that contains a large number of records, too many to display all at once on a single screen. There are several data sources we can use, such as a SharePoint list, Dataverse table, Excel file, SQL database, or any other compatible data source.
For this example, we’ll use a SharePoint list that already contains data, as it’s simple to connect with Power Apps and makes it easy to pull records into a gallery.
Steps for Pagination (with Syntax)
Step 1
Go to Power App studio and create a new blank canvas app.
Step 2
In Blank screen’s “onVisible” Property which we will find at the left top corner below tool bar, create new Context Variable as show below
OnVisible : UpdateContext ({varForPageNumber : 1})
Step 3
Create a dropdown from input control from toolbar. Place it in an appropriate place.
Search for the “Items” property of the dropdown control on left top corner and assign the values as shown below. This value will show records in increments of 10, we can also assign different values according to business needs. So here for example we will be using the array below.
Items : [“10”,”20”,”30”,”40”,”50”,”60”]
Step 4
Connect SharePoint list Data source to Power App. Or if you are using any other dataset/database use that.
Step 5
Add a Gallery control and choose the simple field layout, or customize the fields based on your requirements. Position the gallery at the center of the screen to ensure it remains visually prominent and easy to focus on.
Step 6
To enable navigation between screens, add left and right icons that will serve to update the page number and display the next or previous set of records. Place both icons beneath the gallery so users can clearly recognize them as page navigation controls.
Step 7
In the “OnSelect” property of the left icon, update the page-tracking variable using the UpdateContext function, as demonstrated in the image below.
OnSelect: UpdateContext ({ varForPageNumber : varForPageNumber – 1 })
And on “DisplayMode” Property use if condition as shown below, which will disable Left icon when user is on first page.
DisplayMode : If( varForPageNumber = 1, Disabled, Edit)
Step 8
In the “OnSelect” property of the right icon, modify the page-tracking variable using the UpdateContext function, as illustrated in the image below.
OnSelect: UpdateContext ({ varForPageNumber : varForPageNumber + 1 })
In the “DisplayMode” property, use an If condition like this:
If(Dropdown1.SelectedText.Value*varPageNumber< CountRows(<<SharePointListName>>), DisplayMode.Edit, DisplayMode.Disabled)
This ensures that the right icon becomes disabled when the user reaches the last page.
Step 9
Insert a label and position it between the left and right icons. In the label’s “Text” property, enter the formula shown in the image below. This will display the current page number along with the total number of pages.
VarForPageNumber & “ of ” &
RoundUp(Countrows(<<SharePointListName>>)/Dropdown1.SelectedText. Value,0)
Step 10
In “Item” property of Gallery, write following formula as shown in below
If (varForPageNumber=1,
FirstN(‘Student Details’, Dropdown 1. SelectedText.Value*varPageNumber),
LastN(FirstN(‘<<SharepointListName>>’, Dropdown1.Selected Text. Value*varForPageNumber),
Dropdown1.SelectedText. Value*1))