We will to implement and build a pagination in gallery of canvas app. Before we start make sure to subscribe to CRM Crate so that you can stay up to date in the field of Power Apps.

Why do we need pagination in Gallery control of Canvas App?

The out of the box gallery control doesn’t provide pagination, whereas it populates table’s row in an infinite scroll fashion. There can be requirement where we need to implement a paging system which can allow the user to select the number of rows available in the grid at a time and navigate to the remaining rows using next and previous buttons. This requirement can be achieved using the below given implementation.

Implementing Pagination in Gallery control

Follow the below given steps for creating a Pagination logic in Gallery control of Canvas application.

Step 1 – Creation of a context variable

• Open the Power Apps Studio (https://make.powerapps.com/).
• Create a new Canvas App or edit an existing Canvas App.
• Add a new screen to your Canvas App.
• Use the below given formula in the “OnVisible” property of the screen control.

UpdateContext({varPageNumber:1})

Step 2 – Creation of a dropdown component

• The dropdown will contain the information for displaying the number of rows in the gallery control in a single time.
• Add the dropdown input named “PageSize_Dropdown” and place it on the screen as per your requirements.
• Navigate to the “Items” property and define the values as [“5”,”10”, “15”, “20”, “25”]. The Gallery control will display the records as per the value set in this dropdown.

Step 3 – Creation of icon components (Previous)

• Create a new button or an icon called “Previous_Icon” representing a previous button.
• Use the below given formula in the “OnSelect” property of the previous icon. This will be used to decrement the current page number.

UpdateContext({varPageNumber: varPageNumber - 1})

• Use the below given formula in the “DisplayMode” property of the previous icon. This will be used to disable the icon if the current page number is 0.

If(varPageNumber = 1, Disabled, Edit)

Step 4 – Creation of icon components (Next)

• Create a new button or an icon called “Next_Icon” representing a next button.
• Use the below given formula in the “OnSelect” property of the previous icon. This will be used to increment the current page number.

UpdateContext({varPageNumber: varPageNumber + 1})

• Use the below given formula in the “DisplayMode” property of the previous icon. This will be used to disable the icon if there is no page further.

If(PageSize_Dropdown.SelectedText.Value*varPageNumber<CountRows(Subscribers), DisplayMode.Edit,Disabled)

Step 5 – Creation of Gallery

• Create a new Gallery component and add a data source to it.
• In our scenario, we have used the table called “Subscribers” as our data source.

Step 6 – Creation of label component

• We will use the label component to display the current page number and total number of records / rows.
• Create a new label component called “Sequence_Label” and use the below given formula in the “Text” property of the label.

varPageNumber & " of " & RoundUp(CountRows(Subscribers)/PageSize_Dropdown.SelectedText.Value,0)

Step 7 – Filtering the Gallery component

• Now, we have to filter the gallery component in-order to display the rows / records according to the pagination logic.
• Use the below given formula in the “Items” property of the Gallery component.

If(varPageNumber=1, FirstN(Subscribers,PageSize_Dropdown.SelectedText.Value*varPageNumber), LastN(FirstN(Subscribers,PageSize_Dropdown.SelectedText.Value*varPageNumber), PageSize_Dropdown.SelectedText.Value*1))

Step 8 – Save & publish the application to verify the changes

• Save & publish the Canvas App.
• Play the app and verify the new pagination system as shown below.

Thus, we learned to build a pagination in gallery of canvas app.

• LinkedIn
• Facebook
• Telegram