PowerApps: Pagination Part-5

Hello Friends,

Welcome back with another post on PowerApps. In last post we had created screens and implement pagination (Previous/Next) on Gallery as well as on DataTable. You may visit my last post by clicking on below link-

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

Now this is the last and final post of this series. In this post, we will try to implement pagination in numerical format. Lets start-

1. Before we start designing and coding, let's have a look of the screens-
1. 
   
   
   
   
2. 
   
   
   
   
3. 
   
   
   
   
2. Below is the screen design-
1. 
   
   
   
3. Let's start functional coding-
4. Write below code on "OnVisible" property of Screen "ScreenGridViewNum"-

1. UpdateContext({RecordsPerPage: 0});
   UpdateContext({TotalNoOfPages: 0});
   UpdateContext({PaginationStartNumber: 0});
   ClearCollect(
       PaginationGalleryCollection,
       []
   );
   ClearCollect(
       SortedDataSource,
       []
   );
   UpdateContext(
       {
           RecordsPerPage: RoundDown(
               GalleryDailyTasksGrid_1.Height / GalleryDailyTasksGrid_1.TemplateHeight,
               0
           )
       }
   );
   Set(
       FirstRecord,
       First(DailyTaskSheetForPowerApps)
   );
   Set(
       LastRecord,
       First(
           Sort(
               DailyTaskSheetForPowerApps,
               RecordID,
               Descending
           )
       )
   );
   Set(
       MaxIteration,
       RoundUp(
           (LastRecord.RecordID - FirstRecord.RecordID) / 500,
           0
       )
   );
   ClearCollect(
       TotalIterations,
       AddColumns(
           AddColumns(
               Sequence(MaxIteration),
               "min",
               (FirstRecord.RecordID - 1 + (Value - 1) * 500)
           ),
           "max",
           (FirstRecord.RecordID + Value * 500)
       )
   );
   Clear(DataSource_Temp);
   ForAll(
       TotalIterations,
       Collect(
           DataSource_Temp,
           Filter(
               DailyTaskSheetForPowerApps,
               RecordID > min && RecordID < max
           )
       )
   );
   SortByColumns(
       DataSource_Temp,
       "FormattedInDate",
       Ascending
   );
   ClearCollect(
       SortedDataSource,
       SortByColumns(
           DataSource_Temp,
           "FormattedInDate",
           Descending,
           "Title",
           Ascending
       )
   );
   ClearCollect(
       GalleryDataSource,
       FirstN(
           SortedDataSource,
           RecordsPerPage
       )
   );
   UpdateContext(
       {
           TotalNoOfPages: RoundUp(
               CountRows(SortedDataSource) / RecordsPerPage,
               0
           )
       }
   );
   UpdateContext({PaginationStartNumber: 1});
   ClearCollect(
       PaginationGalleryCollection,
       ForAll(
           Sequence(
               If(
                   TotalNoOfPages < 10,
                   TotalNoOfPages,
                   10
               ),
               PaginationStartNumber
           ),
           Text(Value)
       )
   );
   If(
       TotalNoOfPages > 10,
       Collect(
           PaginationGalleryCollection,
           {Value: ">"}
       ),
       false
   );
   

5. We have defined here 3 local variable-
1. RecordsPerPage- It is as usual to hold the total number of records up to that page so that we can apply FirstN, LastN to get the desired records to display in grid.
2. TotalNoOfPages- As the name suggests, it holds total number of pages, which will be used to design pagination.
3. PaginationStartNumber- It will be used to design the pagination control at the botton.
4. Then we had defined a collection "PaginationGalleryCollection" to create pagination collection.
5. Another collection "SortedDataSource" created to store Sorted data.
6. Then we had initialized the RecordsPerPage.
7. Then, we had fetched FirstReord, LastRecord, MaxIteration, created TotalIterations, all records in DataSource_Temp.
8. Now, we had sorted this data on the basis of FormattedInDate and copied this data in SortedDataSource by sorting again on FormattedInDate DESC and then Title ASC.
9. Copied this data in another collection "GalleryDataSource".
10. Then updated the TotalNoOfPages.
11. Reset PaginationStartNumber to 1.
12. Created collection for pagination by checking the TotalNoOfPages.
13. As this is the first set of records, and if TotalNoOfPages is greater than 10, we will be adding Next icon ">". 
6. Set Items property of GalleryPagination with "PaginationGalleryCollection".
7. Same code will be added on "OnSelect" property of "IconReload" icon.
8. Now we will add the functionality of buttons created in GalleryPagination.
9. Set "Text" property of btnPageNumber as "ThisItem.Value".
10. Now add below code on "OnSelect" property of "btnPageNumber"-

1. If(
       IsNumeric(GalleryPagination.Selected.Value),
       ClearCollect(
           GalleryDataSource,
           LastN(
               FirstN(
                   SortedDataSource,
                   RecordsPerPage * Value(ThisItem.Value)
               ),
               RecordsPerPage
           )
       )
   );
   If(
       GalleryPagination.Selected.Value = "<",
       ClearCollect(
           PaginationGalleryCollection,
           []
       );
       UpdateContext(
           {
               PaginationStartNumber: If(
                   (PaginationStartNumber - 10) > 0,
                   PaginationStartNumber - 10,
                   1
               )
           }
       );
       If(
           PaginationStartNumber > 1,
           Collect(
               PaginationGalleryCollection,
               {Value: "<"}
           ),
           false
       );
       Collect(
           PaginationGalleryCollection,
           ForAll(
               Sequence(
                   If(
                       (PaginationStartNumber + 9) < TotalNoOfPages,
                       10,
                       (TotalNoOfPages - PaginationStartNumber + 1)
                   ),
                   PaginationStartNumber
               ),
               Text(Value)
           )
       );
       Collect(
           PaginationGalleryCollection,
           {Value: ">"}
       );
       
   );
   If(
       GalleryPagination.Selected.Value = ">",
       ClearCollect(
           PaginationGalleryCollection,
           []
       );
       Collect(
           PaginationGalleryCollection,
           {Value: "<"}
       );
       UpdateContext({PaginationStartNumber: PaginationStartNumber + 10});
       Collect(
           PaginationGalleryCollection,
           ForAll(
               Sequence(
                   If(
                       (PaginationStartNumber + 9) < TotalNoOfPages,
                       10,
                       (TotalNoOfPages - PaginationStartNumber + 1)
                   ),
                   PaginationStartNumber
               ),
               Text(Value)
           )
       );
       If(
           (PaginationStartNumber + 9) < TotalNoOfPages,
           Collect(
               PaginationGalleryCollection,
               {Value: ">"}
           ),
           false
       );
       
   );
   

11. Upon click of any number, the GalleryDataSource is getting updated with the records as per the page number.
12. If clicked on Previous icon "<", then-
1. Clear the PaginationGalleryCollection.
2. Reset PaginationStartNumber.
3. If PaginationStartNumber is greater than 1, add Previous Icon "<" to PaginationGalleryCollection.
4. Now add pagination numbers.
5. Lastly add Next Icon ">".
13. Similarly, if the click is done for Next icon ">" then-
1. Clear the PaginationGalleryCollection.
2. Add Previous icon "<".
3. Increment the PaginationStartNumber by 10.
4. Add pagination numbers to PaginationGalleryColletion basis on the updated value of PaginationStartNumber.
5. Lastly, if the TotalNoOfPages are still greater than PaginationStartNumber +9, then add Next icon ">". 
14. Now update the Items property of "GalleryDailyTasksGrid_1" and set it to "GalleryDataSource".
15. Set the Text property of "lblTotalRecords_3" with below code-

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

16. Set the Text property of "lblTotalPages_3" with "TotalNoOfPages".
17. Set the Text property of "lblCurrentPageNo_3" with below code-

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

18. Set the "OnSelect" property of "IconHome_2" with "Navigate(ScreenWelcome,None);".
19. Set the "OnSelect" property of "IconExit_2" with "Exit(false)".
20. This way the functional coding gets completed.
21. Save, Publish and execute the App.
22. With this, the Pagination series gets completed.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !