PowerApps: Pagination Part-3

Hello Friends,

Welcome back with another post on PowerApps. In last post we were discussing about creating pagination in PowerApps. Till now, we have fetched First Record, Last Record, All Records from SharePoint list. We have also created a Welcome screen from where we can navigate to other screens. We have also created blanks screens for Grid View and Table View. You may visit my last post by clicking on below link-

1. PowerApps: Pagination Part-1
   
2. PowerApps: Pagination Part-2
   

Now we will create Pagination On Gallery. For this we will use the screen "ScreenGridView". Let's start-

1. Below is the look of screen-
1. 
   
   
   
2. Below are the controls used on this screen-
1. 
   
   
   
3. The controls list is-
1. 
   
   
   
4. Now click on ScreenGridView and choose "OnVisible". Add below code-

1. UpdateContext({RecordsPerPage: 0});
   UpdateContext(
       {
           RecordsPerPage: RoundDown(
               GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
               0
           )
       }
   );
   ClearCollect(
       GalleryDataSource,
       FirstN(
           DataSource_Temp,
           RecordsPerPage
       )
   );
   

5. Here we are defining a local variable "RecordsPerPage" and set its value dynamically by dividing the gallery height with gallery's individual template height. The purpose of this is to automatically change the RecordsPerPage value in case, you adjust the gallery height or template height.
6. Later on this variable will hold the value of total number of items to fetch from datasource, depending upon page number. For example, for first page if its value is 12 then for page 2 its value will be 12*2 = 24, for page 3 its value will be 12*3 = 36.
7. Now get the first these number of records from DataSource_Temp. You remember, we had initialized this collection on AppStart (PowerApps: Pagination Part-1).
8. Highlighted code can be skipped.
9. Now click on GalleryDailyTasksGrid >> Items property. Add below code-

1. LastN(
       FirstN(
           DataSource_Temp,
           RecordsPerPage
       ),
       RoundDown(
           GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
           0
       )
   )
   

10. Here, the code is fetch first "RecordsPerPage" number of items then getting only last those number of records which can be displayed in grid.
11. This way you had set up the adjustment of items to be displayed in grid. Now our aim is to just change the value of "RecordsPerPage". By changing the its value, the code written on Items property of GalleryDailyTasksGrid will reset the items to be displayed in grid.
12. Now we will write code for next icon "IconNextPage". Choose "OnSelect" property and write below code-

1. If(
       RecordsPerPage < CountRows(DataSource_Temp),
       UpdateContext(
           {
               RecordsPerPage: If(
                   RecordsPerPage < CountRows(DataSource_Temp),
                   RecordsPerPage + RoundDown(
                       GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
                       0
                   )
               )
           }
       )
   )
   

13. Here, we are first checking if we have already fetched all records or not, if not, then increment the RecordsPerPage with the number of items to be displayed in grid. The moment, value of RecordsPerPage gets change, items in grid also gets change.
14. Similar code has to be written on "OnSelect" property of "IconPreviousPage". The code is-

1. If(
       RecordsPerPage < 2 * RoundDown(
           GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
           0
       ),
       UpdateContext(
           {
               RecordsPerPage: RoundDown(
                   GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
                   0
               )
           }
       );
       FirstN(
           DataSource_Temp,
           RecordsPerPage
       ),
       UpdateContext(
           {
               RecordsPerPage: RecordsPerPage - RoundDown(
                   GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
                   0
               )
           }
       )
   )
   

15. Here we are first checking if the value of RecordsPerPage is less than the twice on number of records that can be displayed in grid, If Yes, then reset the RecordsPerPage to number of items that can be displayed in grid, otherwise, subtract the same value from RecordsPerPage to get the previous records.
16. Highlighted code can be skipped.
17. Now we will write code to get the first page records. For this write below code on "OnSelect" property of button "btnFirstPage_2"-

1. UpdateContext(
       {
           RecordsPerPage: RoundDown(
               GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
               0
           )
       }
   );
   FirstN(
       DataSource_Temp,
       RecordsPerPage
   );
   

18. Reset the RecordsPerPage to number of items that can be displayed in grid.
19. Highlighted code can be skipped.
20. Now we will write code to get the last page records. For this write below code on "OnSelect" property of button "btnLastPage_2"-

1. UpdateContext({RecordsPerPage: CountRows(DataSource_Temp)});
   LastN(
       DataSource_Temp,
       RecordsPerPage
   );
   

21. Reset the RecordsPerPage to total number of items in collection.
22. Highlighted code can be skipped.
23. Now, we have to write code to show the current number of page. For this write below code on "Text" property of "lblCurrentPageNo_2"-

1. RoundUp(
       RecordsPerPage / RoundDown(
           GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
           0
       ),
       0
   )
   

24. Now write below code on "Text" property of "lblTotalPages_2" to display total number of pages-

1. RoundUp(
       CountRows(DataSource_Temp) / RoundDown(
           GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
           0
       ),
       0
   )
   

25. For displaying total number of records, write below code on "Text" property of "lblTotalRecords_2"-

1. Concatenate("Total Records:- ", Text(CountRows(DataSource_Temp)))
   

26. Now, if we want to show records of specific number of page, we will use "Search Page" button. Write below code on "OnSelect" property of "btnSearchPage_1"-

1. If(
       Value(txtSearch_1.Text) <= RoundUp(
           CountRows(DataSource_Temp) / RoundDown(
               GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
               0
           ),
           0
       ),
       UpdateContext(
           {
               RecordsPerPage: Value(txtSearch_1.Text) * RoundDown(
                   GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
                   0
               )
           }
       )
   )
   

27. Here, first we are checking that the page number entered in text box is valid or not. If valid, then we are resetting the RecordsPerPage.
28. Now we will search the items by Title. For this, we had "Search Record". Here, we had implemented filter on Title column. add below code on "OnSelect" property of button "btnSearchRecord_1"-

1. ClearCollect(
       DataSourceFiltered,
       Search(
           DataSource_Temp,
           txtSearch_1.Text,
           "Title"
       )
   );
   ClearCollect(
       DataSource_Temp,
       DataSourceFiltered
   );
   UpdateContext(
       {
           RecordsPerPage: RoundDown(
               GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
               0
           )
       }
   );
   

29. Here, first we are filtering the records, then assigning these records to the collection, we had used to display records in grid. Then applying pagination on it.
30. This way, we can implement pagination on Gallery control in PowerApps.
31. The only issue you may find here is that, if we clicked on "Search Record", our original datasource gets overwritten with the filtered records. For this, we had given Reload button on top of screen.
32. Write below code on "OnSelect" property of "IconReload"-

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",
               (FirstRecord.RecordID - 1 + (Number - 1) * 500)
           ),
           "max",
           (FirstRecord.RecordID + Number * 500)
       )
   );
   Clear(DataSource_Temp);
   ForAll(
       TotalIterations,
       Collect(
           DataSource_Temp,
           Filter(
               DailyTaskSheetForPowerApps,
               RecordID > min && RecordID < max
           )
       )
   );
   UpdateContext({RecordsPerPage: 0});
   UpdateContext(
       {
           RecordsPerPage: RoundDown(
               GalleryDailyTasksGrid.Height / GalleryDailyTasksGrid.TemplateHeight,
               0
           )
       }
   );
   ClearCollect(
       GalleryDataSource,
       FirstN(
           DataSource_Temp,
           RecordsPerPage
       )
   );
   

33. Highlight code can be skipped.
34. In next post, we will create the first major screen where we will implement pagination (Previous/Next) on Data Table.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !