When using a grid-like control in PowerApps like DataGrid or Gallery control, one feature that is dearly missed is pagination. Paginations make it very easy to load only the required number of records from the DataSource and improve the page performance. Recently, we achieved the pagination on a Gallery control in PowerApps Canvas Apps. My colleague, Kainat Shaikh, played a vital part in helping me to achieve this functionality.
Pre-requisites
Since we will be using a Gallery control, we will need a datasource that will have a few hundred records to try this functionality. I have used a Dataverse Table for this article, you can try with any other datasource as well that is available with you.
Getting Started
Let’s get started with the steps to automate the flow creation process
Step 1
Navigate to PowerApps Studio here.
Step 2
Create a Blank Canvas App. In the “OnVisible” method of the screen, use “UpdateContext({varPageNumber:1})”.
Step 3
Add a dropdown control. Rename it to “ddPageSize”. Place it appropriately on the screen.
Step 4
In the “Items” property of the dropdown control. Define the values as [“10”,”20”, “30”, “40”, “50”]. I have chosen the values based on my data, if you want different values, then update them accordingly.
Step 5
Add a DataSource to your App. I have added my Dataverse Table.
Step 6
Add a Gallery control. Use a simple layout with Title, Subtitle & Body. Rename it to “galPaginated”. Place it in the center of the screen.
Step 7
Add a Previous Button/Icon. Rename it to “btnPrevious”. Place it below the Gallery control.
Step 8
In the “OnSelect” method of the button, use “UpdateContext({varPageNumber: varPageNumber - 1}).
Step 9
In the “DisplayMode” property of the button, use “If(varPageNumber = 1, Disabled, Edit)”.
Step 10
Add a label. Rename it to “lblPagination”. Place it next to the Previous button.
Step 11
Set the “Text” property of the label as, “varPageNumber & " of " & RoundUp(CountRows(<<YourDataSource>>)/ddPageSize.SelectedText.Value,0)”.
Step 12
Add a Next Button/Icon. Rename it to “btnNext”. Place it next to the Pagination label.
Step 13
In the “OnSelect” method of the button, use “UpdateContext({varPageNumber: varPageNumber + 1})
Step 14
In the “DisplayMode” property of the button, use “If(ddPageSize.SelectedText.Value*varPageNumber<CountRows(<<YourDataSource>>), DisplayMode.Edit,Disabled)”
Step 15
In the “Items” property of the Gallery control, use “If(varPageNumber=1, FirstN(<<YourDataSource>>,ddPageSize.SelectedText.Value*varPageNumber), LastN(FirstN(<<YourDataSource>>,ddPageSize.SelectedText.Value*varPageNumber), ddPageSize.SelectedText.Value*1))”
This formula above was the critical part of the pagination and it took some time to figure out the right values to load the pagination data correctly. The way it works is as follows:
- If the Page Number is 1, then it displays the FirstN records based on the page size selected in the dropdown
- If the Page Number is other than 1, then it displays the LastN records of the table from the FirstN records of the data
Note
I had faced challenges when using my custom Dataverse entity to implement pagination. For some odd reason, the “CountRows” function would always result in 0, even if the data was being returned and available in the Gallery control. To overcome this, I used “CountRows” function on a specific column in the Dataverse entity and it worked. I did not find any such issues with SharePoint List as Datasource.
Final outcome looks something like below,
Summary
In this article, I have described a simple way of implementing pagination in PowerApps Gallery control. There can be a bit more complex implementation with Search or Filter functionality. This article will help you to understand the pagination functionality and extend it as per your requirement. This was definitely something new that I learned and hope you also enjoyed reading the article. Happy Learning!!
Join the conversation! Your thoughts help the community grow.