PowerApps: Pagination Part-1

Hello Friends,

Welcome back with another post on PowerApps. Have you ever encountered a scenario where you have hundreds or thousands of records in PowerApps gallery. The most tedious job at that time is to view all records by scrolling. It would be great if we have a pagination kind of functionality similar to other technologies. Unfortunately, PowerApps doesn't provide any pagination concept in Gallery as well as in Data table. 😞

Can we try to make our own pagination functionality? Let's try- 😊

We will try to design 2 types of pagination-

1. First one will be having only Previous, Next, First, Last feature.
2. Second one will be having Previous 10, Next 10, 1 - 10

The complete post is divided into 5 parts-

1. Initial SetUp
2. Welcome Screen
1. 
   
   
   
3. Next / Previous pagination on Gallery
1. 
   
   
   
4. Next / Previous pagination on Data table
1. 
   
   
   
5. Next 10 / Previous 10 pagination on Gallery
1. 
   
   
   

Let's start-

1. For this, we will create 4 screens-
1. ScreenWelcome
2. ScreenGridView
3. ScreenTableView
4. ScreenGridViewNum
2. First we will create "ScreenWelcome". This screen will contain 3 buttons for next 3 screens.
3. But before that, let's take a look of the columns of list.
1. 
   
   
   
4. The column RecordID is used to hold the ItemID of the list item. Create a Power Automate for "When an item is created" and update the RecordID with ID column. The purpose of creating this column is Delegation issue in PowerApps.
5. One more list we are using here is "HundredChart"-
1. 
   
   
   
6. The purpose of this list is to get the sequential list of total iterations (starting from 1 onwards). This list contains items for each sequence starting from 1, 2, 3 and so on. You may write a Power Automate to update this list by adding more sequence as soon as item is added in "DailyTaskSheetForPowerApps". You may find its max ItemID and divide it by 500. Add 1 to the result and check HundredList. if the max Number is less than this result add more sequences to the list. We will talk about this later in this post.
7. Now we will write some code on App Start property.
1. 
   
   
   
8. Click on App. Choose "OnStart" property and write down below code

1. Set(
       FirstRecord,
       First(DailyTaskSheetForPowerApps)
   );
   Set(
       LastRecord,
       First(
           Sort(
               DailyTaskSheetForPowerApps,
               RecordID,
               Descending
           )
       )
   );
   Set(
       MaxIteration,
       RoundUp(
           (LastRecord.RecordID - FirstRecord.RecordID) / 500,
           0
       )
   );
   ClearCollect(
       TotalIterations,
       AddColumns(
           AddColumns(
               Filter(
                   HundredChart,
                   Number <= MaxIteration
               ),
               "min",
               (Number - 1) * 500
           ),
           "max",
           Number * 500
       )
   );
   Clear(DataSource_Temp);
   ForAll(
       TotalIterations,
       Collect(
           DataSource_Temp,
           Filter(
               DailyTaskSheetForPowerApps,
               RecordID >= FirstRecord.RecordID + Value(min) && RecordID < FirstRecord.RecordID + Value(max)
           )
       )
   );
   ClearCollect(
       PaginationGallery,
       [
           {ItemValue: "<"},
           {ItemValue: 1},
           {ItemValue: 2},
           {ItemValue: 3},
           {ItemValue: 4},
           {ItemValue: 5},
           {ItemValue: 6},
           {ItemValue: 7},
           {ItemValue: 8},
           {ItemValue: 9},
           {ItemValue: 10},
           {ItemValue: ">"}
       ]
   );
   

9. Let's discuss one by one-
1. FirstRecord- This variable will hold the first item of the list (order by ItemID ASC) so that we can get the first available ItemID.
2. LastRecord- This variable will hold the last item of the list (order by ItemID DESC) so that we can get the last available ItemID.
3. MaxIteration- This is the number of iterations / loops we have to perform the fetch items from SharePoint list. By default we are taking 500 records in one loop. The reason behind taking 500 is that the less number of items we fetch from SharePoint, the less are the chances to get the request failure. As by default PowerApps has the delegation limit of 500, hence we are taking it 500. Now, what we are doing is that we are getting difference of first and last item id. It will give us the max number of records that would be available in SharePoint list. Dividing this difference by 500, we will get the number of lops we have to run our fetch command to get all these records.
4. TotalIterations- Now we are creating a collection "TotalIterations". It will hold two columns "min" and "max" number of ItemID upon which we will apply filter. For this ,we are using HundredChart list to get the list of sequence numbers starting from 1 upto MaxIterations. We can skip the list HundredChart as the purpose can be solved using "Sequence" function of PowerApps. I have described it in one of my post PowerApps: Sequence Function.
5. DataSource_Temp- Now we are getting records from SharePoint list using ForAll and saving them in collection "DataSource_Temp".
6. PaginationGallery- This collection will be used when we create numeric pagination in later posts.
10. This completes the initial setup of Pagination process. In next post we will create Welcome Screen.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !