Pagination In PowerApps Gallery

What is Paging

Paging is the concept in which we split a large amount of data which we can’t show in single view into powerapps due to the limitation into equally sized pages so that it is easy to load and well handled by the user to use. Paging is used in many areas like web development, application development, etc. to improve the page performance. In this blog we are going to see the pagination in the power apps gallery.

What is Power Apps

Power App is a group of apps, connectors, data platforms and many more services provided by Microsoft power platform to quickly develop custom apps for business needs.

It is easy to learn and users without having knowledge of coding can build the app quickly as per his requirements that’s why it is also known as no code solution.

It provides different app templates Canvas app, website, based on Data verse app, etc. User can select according to business requirements.

Power app has different controls for better user experience to collect the suitable data. Gallery is one of those controls which is used to handle data sources. A gallery is a layout container that holds a set of controls which represents the records from DataSource.

Technologies involved

1. Microsoft PowerApps
2. SharePoint

Components involved

1. SharePoint List
2. Power Apps Gallery Control

Pagination In Power Apps Gallery

Gallery control is one of the most commonly used grid-view controls to show SharePoint List or other types of data on power app screens.

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.

Implement Pagination in Power Apps Gallery

 

Pre-requisites

To simulate pagination functionality, we will need a data source with lots of records which we can’t fetch in single screen due to the limitations. We can use SharePoint list, Data verse Table, Excel sheet, and SQL database or any other supporting dataset/databases. Here we will use SharePoint list which is preloaded with records as it is easy to connect to SharePoint list and fetch records with powerapps gallery.

We will also need to create an blank power app canvas app.

Let start using this canvas app and fetching records into gallery and creating pagination by following below steps:

Step 1

Go to Power App studio and create 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

Step 3

Create a dropdown from input control from toolbar. Place it in 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 increment of 10, we can also assign different value according to business needs. So here for example we will be using below array.

Step 4

Connect SharePoint list Data source to Power App. Or if you are using any other dataset/database use that.

Step 5

Insert Gallery control and use simple field Layout or customize the field according to need and place the gallery in the center of the screen so that it will be in focus.

Step 6

To navigate between screens, insert Left and right icon, this will be used to change page number and load next or previous records placed both icon below the gallery so that users can easily understand that these buttons are for changing pages.

Step 7

On Left icon’s “OnSelect” Property update the variable using update context variable as shown below in the image

And on “DisplayMode” Property use if condition as shown below, which will disable Left icon when user is on first page.

Step 8

On Right icon “OnSelect” Property update variable using update context variable as shown below in the image

And on “DisplayMode” Property use if condition as “If(Dropdown1.SelectedText.Value*varPageNumber<CountRows(<<YourDataSource>>), DisplayMode.Edit,Disabled)”, which will disable right icon when user is on last page.

Step 9

Insert a label. Place it between the Left and Right icon.

On “Text” Property of Label write formula as shown in image below. Which will show the page number out of all pages.

Step 10

In “Item” property of Gallery, write following formula as shown in Image

Formulae’s behave as below:

1. When the page is 1, then we will display the first nth number of items based on the drop-down values.
2. When user navigates to other page and the page number is other than 1, we will display Last nth number of items from the first nth items. And so on.

Summary

Due to the limit users wont be able to see all the results. To overcome this, there is an solution of pagination. This blog helps you to understand the basic pagination in power apps gallery. we can add Search and filter feature and more complex functionality for better User experience. Pagination helps PowerApps to overcome the limit issue and helps to user also to get proper results with pages. Instead of showing all records in single view, pagination is always a better idea.