PowerApps: Pagination In Gallery (Implement Numeric Pagination)

 Hello Friends,

Welcome back with another post on PowerApps. Few days back, we have discussed upon the Pagination implemented in Gallery.

PowerApps: Pagination In Gallery

There, we have used Previous / Next / First / Last button to traverse the list. Apart from that, we have used Search By Page Number / Search Particular Record. Now, if you have a requirement where you have to give Numeric Pagination means Previous / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / Next. Clicking upon Next, the series converts into 11 - 20 and so on. Previous will show previous 10 page numbers. We can achieve this also very easily. Let's try now-

1. We will continue from our last post PowerApps: Pagination In Gallery.
2. Click on "ScreenGalleryPagination" and choose it's "OnVisible" property. You will find some code functions already written over there which we have written in previous post. At the end of this code, add below code also-

1. UpdateContext({TotalNoOfPages: 0});
   UpdateContext({PaginationStartNumber: 0});
   ClearCollect(
       PaginationGalleryCollection,
       []
   );
   ClearCollect(
       SortedDataSource,
       []
   );
   ClearCollect(
       SortedDataSource,
       SortByColumns(
           DataSourceForGalleryItems,
           "Title",
           Ascending
       )
   );
   UpdateContext(
       {
           TotalNoOfPages: RoundUp(
               CountRows(SortedDataSource) / intFilterRecordsFromGallerySource,
               0
           )
       }
   );
   UpdateContext({PaginationStartNumber: 1});
   ClearCollect(
       PaginationGalleryCollection,
       ForAll(
           Sequence(
               If(
                   TotalNoOfPages < 10,
                   TotalNoOfPages,
                   10
               ),
               PaginationStartNumber
           ),
           Text(Value)
       )
   );
   If(
       TotalNoOfPages > 10,
       Collect(
           PaginationGalleryCollection,
           {Value: ">"}
       ),
       false
   );
   

3. 
4. Now add another Blank Horizontal Gallery which will act as a pagination.
1. DataSource: PaginationGalleryCollection
2. Layout: Blank
3. Name: GalleryPaginationStrip
4. X: IconPrevious.X + IconPrevious.Width
5. Y: GalleryListData.Y + GalleryListData.Height
6. Width: IconRight.X - GalleryPaginationStrip.X
7. Height: 40
8. TemplateSize: Min(GalleryPaginationStrip.Width/CountRows(PaginationGalleryCollection),109.6)
9. ShowScrollbar: false
10. TemplatePadding: 0
5. 
6. Now, edit it's template and add a button-
1. Name: btnPageNumber
2. Text: ThisItem.Value
3. X: 5
4. Y: 0
5. Width: GalleryPaginationStrip.TemplateWidth-10
6. Height: 40
7. Color: RGBA(255, 255, 255, 1)
8. Fill: RGBA(50, 86, 160, 1)
9. OnSelect:

1. UpdateContext(
       {
           intFilterRecordsFromGallerySource: If(
               RoundDown(
                   (PageSize * Value(ThisItem.Value)) / CountRows(Coll_AllItems),
                   0
               ) = 0,
               PageSize * Value(ThisItem.Value),
               CountRows(Coll_AllItems)
           )
       }
   );
   If(
       GalleryPaginationStrip.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: ">"}
       );
       UpdateContext({intFilterRecordsFromGallerySource: PageSize * PaginationStartNumber});
       
   );
   If(
       GalleryPaginationStrip.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
       );
       UpdateContext({intFilterRecordsFromGallerySource: PageSize * PaginationStartNumber});
        

   ); 
10. 
7. Now, choose the "OnSelect" property of "btnLastPage" button and add below code function at the end of existing code.

1. ClearCollect(
       PaginationGalleryCollection,
       []
   );
   If(
       TotalNoOfPages > 10,
       Collect(
           PaginationGalleryCollection,
           {Value: "<"}
       )
   );
   If(
       Mod(
           TotalNoOfPages,
           10
       ) = 0,
       UpdateContext({PaginationStartNumber: TotalNoOfPages - 10}),
       UpdateContext(
           {
               PaginationStartNumber: TotalNoOfPages - Mod(
                   TotalNoOfPages,
                   10
               ) + 1
           }
       )
   );
   Collect(
       PaginationGalleryCollection,
       ForAll(
           Sequence(
               If(
                   (PaginationStartNumber + 9) < TotalNoOfPages,
                   10,
                   (TotalNoOfPages - PaginationStartNumber + 1)
               ),
               PaginationStartNumber
           ),
           Text(Value)
       )
   );
   If(
       (PaginationStartNumber + 9) < TotalNoOfPages,
       Collect(
           PaginationGalleryCollection,
           {Value: ">"}
       ),
       false
   );
   UpdateContext({intFilterRecordsFromGallerySource: CountRows(Coll_AllItems)});
   

8. 
9. Similarly, we will add code upon "OnSelect" property of "btnFirstPage" button.

1. UpdateContext({PaginationStartNumber: 1});
   ClearCollect(
       PaginationGalleryCollection,
       ForAll(
           Sequence(
               If(
                   TotalNoOfPages < 10,
                   TotalNoOfPages,
                   10
               ),
               PaginationStartNumber
           ),
           Text(Value)
       )
   );
   If(
       TotalNoOfPages > 10,
       Collect(
           PaginationGalleryCollection,
           {Value: ">"}
       ),
       false
   );
   

10. 
11. This way we can implement the numeric pagination as well.
12. If you wish to show the selected page number with different color, then add choose "Fill" property of btnPageNumber and change as follows-
1. Fill: If(ThisItem.Value= varCurrentSelectedPageNumber,RGBA(250, 186, 160, 1),RGBA(50, 86, 160, 1))
13. Now select its "OnSelect" property and add below code at the top-
1. UpdateContext({varCurrentSelectedPageNumber: Text(ThisItem.Value)});
14. Now search for below line in this code:
1. UpdateContext({intFilterRecordsFromGallerySource: PageSize * PaginationStartNumber});
15. Add below code just after the above searched content. It will be at 2 places. You need to add at both places (basically,for Previous & Next button ,we are going to highlight the next start page number of the strip)-
1. UpdateContext({varCurrentSelectedPageNumber: Text(PaginationStartNumber)});
16. It's done-
1. 
17. Now remaining is to apply same on First & Last button. You need not to worry much.
18. For First Page button, just add below piece of code at the end of existing code upon "OnSelect" property-
1. UpdateContext({varCurrentSelectedPageNumber:Text(PaginationStartNumber)}); 
19. For Last Page button, add below piece of code at the end of existing code upon "OnSelect" property-
1. UpdateContext({varCurrentSelectedPageNumber:Text(TotalNoOfPages)});
20. HomeWork For You:-
1. Apply the Pagination Update & Color Scheme upon Search Page button to show the searched page as selected and let me know.
21. OK. Let me give you that solution also. 😊
22. Right now, you will be getting below code on btnSearchPage >> OnSelect property.
1. 
   
   
23. Replace the entire code by below one-

1. If(
       Value(txtSearchBox.Text) <= RoundUp(
           CountRows(DataSourceForGalleryItems) / PageSize,
           0
       ),
       UpdateContext({intFilterRecordsFromGallerySource: Value(txtSearchBox.Text) * PageSize});
       UpdateContext(
           {
               PaginationStartNumber: If(
                   Mod(
                       Value(txtSearchBox.Text),
                       10
                   ) = 0,
                   Value(txtSearchBox.Text) - 9,
                   Value(txtSearchBox.Text) - Mod(
                       Value(txtSearchBox.Text),
                       10
                   ) + 1
               )
           }
       );
       ClearCollect(
           PaginationGalleryCollection,
           []
       );
       If(
           PaginationStartNumber > 1,
           Collect(
               PaginationGalleryCollection,
               {Value: "<"}
           ),
           false
       );
       Collect(
           PaginationGalleryCollection,
           ForAll(
               Sequence(
                   If(
                       (PaginationStartNumber + 9) < TotalNoOfPages,
                       10,
                       (TotalNoOfPages - PaginationStartNumber + 1)
                   ),
                   PaginationStartNumber
               ),
               Text(Value)
           )
       );
       If(
           (PaginationStartNumber + 9) < TotalNoOfPages,
           Collect(
               PaginationGalleryCollection,
               {Value: ">"}
           ),
           false
       );
       UpdateContext(
           {
               intFilterRecordsFromGallerySource: If(
                   Value(txtSearchBox.Text) = TotalNoOfPages,
                   CountRows(Coll_AllItems),
                   PageSize * Value(txtSearchBox.Text)
               )
           }
       );
       UpdateContext({varCurrentSelectedPageNumber: txtSearchBox.Text});
       
   )
   

24. 
    
    
25. The last point, On First time screen loading, Page 1 button should be highlighted as first page records are getting displayed, therefore, add below code at the end of "OnVisible" property code function of ScreenGalleryPagination-
1. UpdateContext({varCurrentSelectedPageNumber:Text(PaginationStartNumber)});
26. 
    
    
27. I think, I have covered all the features. Please let me know, if any feature is missing. 

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !