PowerApps: Re-order Items In Gallery

Hello Friends,

Welcome back with another post on PowerApps. Today, we will learn about re-ordering feature in gallery. Surprised, as there is no such built-in feature in gallery. right, therefore, we will build the logic here.

We will apply re-ordering in 2 ways-

1. Swap the position with Previous / Next item. Example: Swap 2nd position item with 3rd position item or vice-versa.
2. Position the item at a particular number. Example: Bring the 10th position item to 2nd position.

Let's start.

1. Open the PowerApps maker portal and create a new app and give a suitable name.
1. 
2. Now click on App and choose the OnStart property and add logic for creating a collection.

1. ClearCollect(collSampleData,
   {SeqNo:1,Title:"Mr",FirstName:"Aaron",LastName:"Finch"},
   {SeqNo:2,Title:"Mr",FirstName:"Sanjiv",LastName:"Verma"},
   {SeqNo:3,Title:"Mr",FirstName:"Robert",LastName:"Rosch"},
   {SeqNo:4,Title:"Ms",FirstName:"Aakriti",LastName:"Singh"},
   {SeqNo:5,Title:"Ms",FirstName:"Reshma",LastName:"Sharma"},
   {SeqNo:6,Title:"Mr",FirstName:"Kundan",LastName:"Gupta"},
   {SeqNo:7,Title:"Ms",FirstName:"Rajni",LastName:"Chugh"},
   {SeqNo:8,Title:"Ms",FirstName:"Ketty",LastName:"Woods"},
   {SeqNo:9,Title:"Mr",FirstName:"Bob",LastName:"Hamilton"},
   {SeqNo:10,Title:"Ms",FirstName:"Mary",LastName:"Christina"}
   );

2. 
3. Now click on elipses (...) of App and select Run OnStart. It will initialize the collection.
1. 
4. Now click on Insert and search for blank flexible height gallery.
1. 
5. Select this control to add on screen. It will ask you the Data source. Select the collection collSampleData we have created above.
1. 
6. Now resize the app to cover the entire screen or resize as per your application requirements. (optional).
7. Rename the ggallery as Gallery_ReOrder.
8. Choose the TemplateSize property and set it's value as 50. Then set the TemplatePadding to 0.
9. It's time to add controls in this template. Click on Edit Template icon.
1. 
10. Start adding control and set properties-
11. Icon - Arrow up
1. Name: IconUp
2. X: 0
3. Y: 0
4. Width: 20
5. Height: Parent.TemplateHeight
6. Padding: Top / Bottom / Left / Right: 0
7. Visible: ThisItem.SeqNo <> First(Sort(collSampleData,SeqNo,Ascending)).SeqNo
8. OnSelect: 

1. Select(Parent);
   Set(vrCurrentSeq,Value(ThisItem.SeqNo));
   Patch(collSampleData,ThisItem,{SeqNo:0});
   Patch(collSampleData,First(Filter(collSampleData,SeqNo=vrCurrentSeq-1)),{SeqNo:vrCurrentSeq});
   Patch(collSampleData,First(Filter(collSampleData,SeqNo=0)),{SeqNo:vrCurrentSeq-1});

9. 
10. The concept used here is capture the current item sequence. The get the previous item and set it's seq equal to current one. Then set the current selected item sequence to 1 less than that of current sequence.
12. Icon - Arrow down
1. Name: IconDown
2. X: IconUp.X+IconUp.Width
3. Y: IconUp.Y
4. Width: IconUp.Width
5. Height: IconUp.Height
6. Padding: Top / Bottom / Left / Right: 0
7. Visible: ThisItem.SeqNo <> First(Sort(collSampleData,SeqNo,Descending)).SeqNo
8. OnSelect: 

1. Select(Parent);
   Set(vrCurrentSeq,Value(ThisItem.SeqNo));
   Patch(collSampleData,ThisItem,{SeqNo:0});
   Patch(collSampleData,First(Filter(collSampleData,SeqNo=vrCurrentSeq+1)),{SeqNo:vrCurrentSeq});
   Patch(collSampleData,First(Filter(collSampleData,SeqNo=0)),{SeqNo:vrCurrentSeq+1});

9. 
10. The concept used here is capture the current item sequence. The get the next item and set it's seq equal to current one. Then set the current selected item sequence to 1 plus than that of current sequence.
13. Text label
1. Name: LblSeqNo
2. X: IconDown.X+IconDown.Width
3. Y: IconDown.Y
4. Width: 50
5. Height: IconDown.Height
6. Text: ThisItem.SeqNo
7. Align: Align.Right
8. 
14. Text label
1. Name: LblTitle
2. X: LblSeqNo.X+LblSeqNo.Width
3. Y: LblSeqNo.Y
4. Width: 70
5. Height: LblSeqNo.Height
6. Text: ThisItem.Title
7. 
15. Text label
1. Name: LblFirstName
2. X: LblTitle.X+LblTitle.Width
3. Y: LblTitle.Y
4. Width: 150
5. Height: LblTitle.Height
6. Text: ThisItem.FirstName
7. 
16. Text label
1. Name: LblLastName
2. X: LblFirstName.X+LblFirstName.Width
3. Y: LblFirstName.Y
4. Width: 150
5. Height: ILblFirstName.Height
6. Text: ThisItem.LastName
7. 
17. Drop down
1. Name: ddSortOrder
2. X: LblLastName.X+LblLastName.Width
3. Y: LblLastName.Y
4. Width: 150
5. Height: LblLastName.Height
6. Default: ThisItem.SeqNo
18. For Items property, first we will add below code in App >> OnStart (after the collSampleData collection creation)

1. Set(vrCurrentSeq,First(Sort(collSampleData,SeqNo,Ascending)).SeqNo);
   ClearCollect(collSequence,Sequence(CountRows(collSampleData),vrCurrentSeq));

2. 
3. Now click on elipses (...) of App and select Run OnStart. It will initialize the collection collSequence. 
19. Now set the Items property of ddSortOrder as collSequence.
1. 
20. Save the app.
21. The remaining part is to write the login for OnChange property of ddSortOrder. It iis little bit complex. Here we need to check if the new position of item is greater than the current position or less. Based upon that, we need to reposition the items. For example, see the below screenshot.
1. 
22. If we are changing order from 4 to 8 then Yellow highlighted items order also need to be updated. Similarly, if we are changing order from 4 to 2, then Yellow highlighted items order also need to be updated.
23. Let's write the logic for ddSortOrder >> OnChange property.

1. Select(Parent);
   Set(vrCurrentSeq,Value(ThisItem.SeqNo));
   Set(vrDesiredSeq,Value(ddSortOrder.Selected.Value));
   Patch(collSampleData,ThisItem,{SeqNo:0});
   If(vrDesiredSeq>vrCurrentSeq,
       ClearCollect(collNewSequence,Sequence(vrDesiredSeq-vrCurrentSeq,vrCurrentSeq+1));
       ForAll(collNewSequence,Patch(collSampleData,First(Filter(collSampleData,SeqNo=Value)),{SeqNo:Value-1}));,
       ClearCollect(collNewSequence,Sequence(vrCurrentSeq-vrDesiredSeq,vrDesiredSeq));
       ForAll(collNewSequence,Patch(collSampleData,First(Filter(collSampleData,SeqNo=Value)),{SeqNo:Value+1})););
   Patch(collSampleData,First(Filter(collSampleData,SeqNo=0)),{SeqNo:vrDesiredSeq});

24. 
25. Last, to give a beautiful appearance to the grid, we will fill a background color to the alternate rows. For this, update the TemplateFill property of GalleryReOrder as below.
1. If(Mod(ThisItem.SeqNo,2)=0,RGBA(222,222,222,1),RGBA(0,0,0,0))
2. 
26. Save the app, publish and Run/Play.
27. If you play this app and try to change the order, you will find that the order gets changed but the grid is not showing data properly. The reason is that, we had not applied the Sorting on grid datasource.. Edit the app and choose the gallery GalleryReOrder >> Items property. Here you will find that the datasource collSampleData is directly associated. Change it to -
1. Sort(collSampleData,Value(SeqNo),Ascending)
2. 
28. Now, save/publish and Run/Play.
29. I swapped order 3 to 2 by clicking Up icon and the results are-
1. Before
2. 
3. After
4. 
30. Now, I am swapping order 9 to 10 by clicking Down icon and the results are-
1. Before
2. 
3. After
4. 
31. Now, I will reorder the item of position 7 to position 3 using drop down and the results are-
1. Before
2. 
3. After
4. 

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !

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 !

PowerApps: Pagination In Gallery

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. Let's try to do with Gallery.

1. Here, we will first fetch all records from SharePoint List. For this will take help of my earlier article PowerApps: Getting More Than 2000 Items (Using Sequence).
2. Then we will try to create pagination upon gallery with search feature as well.I had created a list having 4 column with around 25000 items.
3. 
   
   
4. Now open the PowerApps maker portal by clicking here.
5. You may also go to PowerApps maker portal by clicking on Integrate >> PowerApps >> See all apps.
6. 
7. Create a new PowerApps app by clicking "+ Create" >> "Canvas app from blank".
8. 
9. Give in the name. Choose format as Tablet. Click on Create. It will take couple of minutes to create a blank canvas app. The moment, it creates and shows you the blank canvas screen to design, the first most important task you need to do is to Save the app. Click on File >> Save to save the app. The benefit of doing so is that until you save it, your app will remain in browser memory and if anyhow, browser gets closed, your hard work will get vanished. But, if you have saved the app at very beginning, then it gets saved on cloud and PowerApps maker portal start saving the changes every 1-2 minutes automatically.
10. Let's move on. You will get Screen1 by default. Let's rename it ScreenGalleryPagination by clicking on 3 dots just next to the Screen1 name.
11. Now we will add a SharePoint connection. For this click on cylinder icon (baiscally it is a database icon). Click on "+ Add data". Search for SharePoint and then click on SharePoint connection.
12. 
13. It will show you the connection with your login. Click on same. Then it will show you the possible sites at right side. Select your SharePoint site. Then it will show you the SharePoint lists. Choose the list and click on Connect.
14. 
15. Now we will fetch the items from this SharePoint list to PowerApps collection. For this click on Apps and then choose "OnStart" property.
16. 
17. Now click on function box and input below code-

18. ClearCollect(
        Coll_AllItems,
        []
    );
    ClearCollect(
        DataSourceFiltered,
        []
    );
    Set(
        FirstRecord,
        First(TestListSJ)
    );
    Set(
        LastRecord,
        First(
            Sort(
                TestListSJ,
                ID,
                Descending
            )
        )
    );
    Set(
        BatchSize,
        500
    );
    Set(
        MaxIteration,
        RoundUp(
            (LastRecord.ID - FirstRecord.ID) / BatchSize,
            0
        )
    );
    ClearCollect(
        TotalIterations,
        AddColumns(
            AddColumns(
                ForAll(
                    Sequence(MaxIteration),
                    Value
                ),
                "min",
                (FirstRecord.ID + (Value - 1) * BatchSize)
            ),
            "max",
            (FirstRecord.ID + Value * BatchSize)
        )
    );
    ForAll(
        TotalIterations,
        Collect(
            Coll_AllItems,
            Filter(
                TestListSJ,
                ItemID >= min && ItemID < max
            )
        )
    );
    ClearCollect(DataSourceForGalleryItems,Coll_AllItems);
    

19. Let's explain one by one. Please match with color-
1. Coll_AllItems: It is a collection to hold all items fetched from SharePoint list.
2. DataSourceFiltered: It is a collection to hold the result obtained when we click on "Search Record" button.
3. FirstRecord / LastRecord: These are variables to hold the First item and the Last item of SharePoint list (Sort By ID). 
4. BatchSize: It is the number of records we will fetch in each call to SharePoint.
5. MaxIteration: It is the number of total calls we need to made to SharePoint in order to fetch all records.
6. TotalIterations: It is a collection which is holding the starting ID and the ending ID which will be passed in Filter call to SharePoint. (i.e. 0-500, 501-1000, 1001-1500, ...)
7. ForAll: It is a function call using which we will fetch all records from SharePoint
8. ClearCollect: This command we are using to make clone of Coll_AllItems collection. This clone will be used to assign back if we had made a call of Search Record and then we are making call of Search Page / Reload.
20. With this, we have fetched all records from data source.
21. Now, click on screen "ScreenGalleryPagination" and add a Gallery (Vertical). Name this gallery as "GalleryListData". Set-
1. Layout: Title, Subtitle, and body
2. TemplateSize: 50
3. Height: Parent.Height-GalleryListData.Y-100
4. Width: Parent.Width
22. Title1 label-
1. Rename it to lblID
2. X: 0
3. Y: 0
4. Width: 100
5. Height: GalleryListData.TemplateHeight
23. Subtitle1 label-
1. Rename it to lblTitle
2. X: lblID.X+lblID.Width
3. Y: 0
4. Width: 400
5. Height: GalleryListData.TemplateHeight
24. Body1 label-
1. Rename it to lblGUID
2. X: lblTitle.X+lblTitle.Width
3. Y: 0
4. Width: 600
5. Height: GalleryListData.TemplateHeight
25. I have renamed according to my list columns. You may rename according to your requirements. Other cosmetic surgeries is up to you. 😊
26. Set GalleryListData >> DataSource to DataSourceForGalleryItems
27. 
    
    
28. Now click on Edit link just ahead of Fields property and set the which field is to be displayed in which label.
29. 
30. Now, click on ScreenGalleryPagination and set it's "OnVisible" property. Here we will set 2 variables-
1. PageSize: It the number of items to be displayed in gallery at a time.
2. intFilterRecordsFromGallerySource: It is a number which will be used to filter the number of such items from entire collection using FirstN so that we can then use LastN with PageSize to get the actual items to be displayed on screen when user will click on Next/Previous icon.
31. The code is-

32. UpdateContext({PageSize: 0});
    UpdateContext({intFilterRecordsFromGallerySource: 0});
    UpdateContext(
        {
            PageSize: RoundDown(
                GalleryListData.Height / GalleryListData.TemplateHeight,
                0
            )
        }
    );
    UpdateContext({intFilterRecordsFromGallerySource: PageSize});
    
    

33. Now, click on GalleryListData gallery and choose Items property and assign the below code.

34. LastN(
        FirstN(
            DataSourceForGalleryItems,
            intFilterRecordsFromGallerySource
        ),
        If(
            Mod(
                intFilterRecordsFromGallerySource,
                PageSize
            ) = 0,
            PageSize,
            Mod(
                intFilterRecordsFromGallerySource,
                PageSize
            )
        )
    )

35. This code is what we were talking about in above step. The moment you add this code, you may find that the gallery becomes blank. This is due to non initialization of variable. So, save the app and play it once.
36. 
37. With this, we have completed the basic display part. Now the actual work starts where we will implement the pagination and will see, how it works.
38. Let's add a reload button at top. For this, add a Reload icon at top and update it's "OnSelect" property as-

1. ClearCollect(DataSourceForGalleryItems,Coll_AllItems);
   

39. The other changes are-
1. Rename it to IconReload
2. Height: 40
3. Width: 40
4. Padding Left/Right/Top/Bottom: 5
5. Color: RGBA(255, 255, 255, 1)
6. Fill: RGBA(50, 86, 160, 1)
7. Y: 0
8. X: 1326 (or set it accordingly to make it extreme right)
40. 
41. Now, we will add Previous / Next button. For this, add Left icon and update it's "OnSelect" property as-

1. If(
       intFilterRecordsFromGallerySource < 2 * PageSize,
       UpdateContext({intFilterRecordsFromGallerySource: PageSize}),
       UpdateContext(
           {
               intFilterRecordsFromGallerySource: intFilterRecordsFromGallerySource - If(
                   intFilterRecordsFromGallerySource = CountRows(Coll_AllItems),
                   If(
                       Mod(
                           CountRows(Coll_AllItems),
                           PageSize
                       ) = 0,
                       PageSize,
                       Mod(
                           CountRows(Coll_AllItems),
                           PageSize
                       )
                   ),
                   PageSize
               )
           }
       )
   

   ); 

42. The other changes are-
1. Rename it to IconPrevious
2. Height: 40
3. Width: 80
4. Padding Left/Right/Top/Bottom: 5
5. Color: RGBA(255, 255, 255, 1)
6. Fill: RGBA(50, 86, 160, 1)
7. Y: GalleryListData.Y+GalleryListData.Height
8. X: 0
43. 
44. Now, add right icon and update it's "OnSelect" property as-

1. UpdateContext(
       {
           intFilterRecordsFromGallerySource: intFilterRecordsFromGallerySource + If(
               intFilterRecordsFromGallerySource + PageSize <= CountRows(Coll_AllItems),
               PageSize,
               If(
                   intFilterRecordsFromGallerySource = CountRows(Coll_AllItems),
                   0,
                   Mod(
                       CountRows(Coll_AllItems),
                       PageSize
                   )
               )
           )
       }
   

   ) 

45. The other changes are-
1. Rename it to IconRight
2. Height: 40
3. Width: 80
4. Padding Left/Right/Top/Bottom: 5
5. Color: RGBA(255, 255, 255, 1)
6. Fill: RGBA(50, 86, 160, 1)
7. Y: GalleryListData.Y+GalleryListData.Height
8. X: Parent.Width-IconRight.Width
46. Another section has been completed. Now save the app and play it. Click on Next / Previous buttons. The gallery is getting loaded accordingly.
47. Now, we will try to show the 
1. Page Number / Total Pages
2. Total Records
3. First Page
4. Last Page
5. Search By Page Number
6. Search By Record Title
48. Let's add Page Number / Total Pages. For this, add a label.
1. Rename it to lblCurrentPage
2. Width: 75
3. Height: 40
4. X: 0
5. Y: Parent.Height-lblCurrentPage.Height
6. BorderThickness: 1
7. Text: RoundUp(intFilterRecordsFromGallerySource/PageSize,0)
8. Align: Center
49. 
50. Add another label.
1. Rename it to lblSeparatorSignLabel
2. Width: 30
3. Height: 40
4. X: lblCurrentPage.X+lblCurrentPage.Width
5. Y: Parent.Height-lblSeparatorSignLabel.Height
6. BorderThickness: 1
7. Text: /
8. Align: Center
51. 
    
    
52. Add another label.
1. Rename it to lblTotalPages
2. Width: 80
3. Height: 40
4. X: lblSeparatorSignLabel.X+lblSeparatorSignLabel.Width
5. Y: Parent.Height-lblTotalPages.Height
6. BorderThickness: 1
7. Text: RoundUp(CountRows(DataSourceForGalleryItems)/PageSize,0)
8. Align: Center
53. 
    
    
54. This way Page Number / Total Pages is done.
55. Now we will Total Number of Records.
56. Add a label.
1. Rename it to lblTotalRecordsText
2. Width: 130
3. Height: 40
4. X: lblTotalPages.X+lblTotalPages.Width+20
5. Y: Parent.Height-lblTotalRecordsText.Height
6. Italic: true
7. Text: Total Records:
57. 
    
    
58. Add another label.
1. Rename it to lblTotalRecordsValue
2. Width: 75
3. Height: 40
4. X: lblTotalRecordsText.X+lblTotalRecordsText.Width
5. Y: Parent.Height-lblTotalRecordsValue.Height
6. Text: CountRows(DataSourceForGalleryItems)
59. 
    
    
60. This way, Total Records display gets done.
61. Now we will work upon First Page & Last Page. Let's Add Last Page button.
62. Add a button-
1. Rename it to btnLastPage
2. Width: 125
3. Height: 40
4. X: Parent.Width-btnLastPage.Width
5. Y: Parent.Height-btnLastPage.Height
6. Text: Last Page
7. OnSelect: UpdateContext({intFilterRecordsFromGallerySource:CountRows(DataSourceForGalleryItems)});
63. 
    
    
64. Add another button-
1. Rename it to btnFirstPage
2. Width: 125
3. Height: 40
4. X: Parent.Width-btnLastPage.Width-btnFirstPage.Width-20
5. Y: Parent.Height-btnLFirstPage.Height
6. Text: First Page
7. OnSelect: UpdateContext({intFilterRecordsFromGallerySource:PageSize});
65. This way First Page & Last Page also done.
66. Now, we will implement Search Page / Search Record functionality. For this-
67. Add a button-
1. Rename it to btnSearchPage
2. Width: 150
3. Height: 40
4. X: lblTotalRecordsValue.X+lblTotalRecordsValue.Width+20
5. Y: Parent.Height-btnSearchPage.Height
6. Text: Search Page
7. OnSelect: 

1. If(
       Value(txtSearchBox.Text) <= RoundUp(
           CountRows(DataSourceForGalleryItems) / PageSize,
           0
       ),
       UpdateContext({intFilterRecordsFromGallerySource: Value(txtSearchBox.Text) * PageSize})
   )
   

68. The moment, you add the OnSelect code, it will error because, till now, we haven't added textbox, from which it will pick the data. So don't worry,, we are going to add it next.
69. 
70. Add a textbox (Text input).
1. Rename it to txtSearchBox
2. Default: "" (Blank)
3. Width: 250
4. Height: 40
5. X: btnSearchPage.X+btnSearchPage.Width+20
6. Y: Parent.Height-txtSearchBox.Height
71. 
72. Add another button
1. Rename it to btnSearchRecord
2. Width: 150
3. Height: 40
4. X: txtSearchBox.X+txtSearchBox.Width+20
5. Y: Parent.Height-btnSearchRecord.Height
6. Text: Search Record
7. OnSelect: 

1. ClearCollect(
       DataSourceFiltered,
       Search(
           Coll_AllItems,
           txtSearchBox.Text,
           "Title"
       )
   );
   ClearCollect(
       DataSourceForGalleryItems,
       DataSourceFiltered
   );
   UpdateContext({intFilterRecordsFromGallerySource: PageSize});
   

73. 
    
    
74. This way, we have completed our functionality. Below are the screenshots.
75. Home Screen-
76. 
77. Next Button-
78. 
79. Previous Button-
80. 
81. Search Page-
82. 
83. Search Record-
84. 
85. Reload-
86. 
87. Last Page-
88. 
89. First Page-
90. 
91. This way you can implement pagination.
92. You may also implement numeric pagination. For this, you need to visit my next post. PowerApps: Pagination In Gallery (Implement Numeric Pagination).

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !

Bye... Bye... 2021

Wishing All Readers & Coders . . .        !!! A Very Happy New Year !!!