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: Nested Gallery - Alternate Row Color

Hello Friends,

Welcome back with another post on PowerApps. In our last post, we have studied on how to create nested Gallery and then we have applied the Expand / Collapse feature on that gallery. Then we applied Expand All / Collapse All.

1. PowerApps: Nested Gallery
   
2. PowerApps: Nested Gallery - Expand / Collapse
   
3. PowerApps: Nested Gallery - Expand All / Collapse All
   

Now, we will try to add Alternate Row Color in nested gallery (Items gallery). For this, we will add a dynamic column RowNumber and assign a sequential value to it. Then we will use this RowNumber to define the color of rows. But Before start, I assume that you had visited all the three posts above and created the PowerApps as described. Let's start for further implementation.

1. Click on GalleryItemDetails gallery and select the Items property. Right now it is mentioned as ThisItem.ListItemDetails.
2. Now, change the function with below-

3. With(
       {RecordsListItemDetails: ThisItem.ListItemDetails},
       ForAll(
           Sequence(CountRows(ThisItem.ListItemDetails)),
           Patch(
               Last(
                   FirstN(
                       RecordsListItemDetails,
                       Value
                   )
               ),
               {RowNumber: Value}
           )
       )
   )
   

4. 
5. Further, select the TemplateFill property of the same gallery (GalleryItemDetails) and add below function. It will check if Mod value is ZERO (means even number row) then it will apply one color otherwise (odd number row) other color.

6. If(Mod(ThisItem.RowNumber,2)=0,RGBA(241, 244, 209, 1),RGBA(200, 200, 200, 1))
   

7. 
8. Save the PowerApps and execute/play. The magic works. 🙂
9. 
   
   
10. This way, we can add Alternate Row Color in PowerApps Gallery.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !

PowerApps: Nested Gallery - Expand All / Collapse All

Hello Friends,

Welcome back with another post on PowerApps. In our last post, we have studied on how to create nested Gallery and then we have applied the Expand / Collapse feature on that gallery.

1. PowerApps: Nested Gallery
   
2. PowerApps: Nested Gallery - Expand / Collapse
   

If you have not read these posts, please go through it.

Now, we will try to implement Expand All / Collapse All feature. Let's start-

1. I am assuming that you have read my last 2 posts mentioned above and created the PowerApps as described. We will continue from there.
2. Let's add 2 buttons-
3. Button1:
1. Name: btnCollapseAll
2. Text: Collapse All
3. OnSelect: ClearCollect(SelectedOrderIDCollection,{SelectedOrderID:0})
4. 
4. Button2:
1. Name: btnExpandAll
2. Text: Expand All
3. OnSelect: 

4. ClearCollect(
       SelectedOrderIDCollection,
       {SelectedOrderID: 0}
   );
   ForAll(
       OrdersList,
       If(
           CountRows(
               Filter(
                   SelectedOrderIDCollection,
                   SelectedOrderID = OrdersList[@OrderID]
               )
           ) = 0,
           Collect(
               SelectedOrderIDCollection,
               {SelectedOrderID: OrdersList[@OrderID]}
           )
       )
   );
   

5. 
5. For Collapse All, we have cleared the collection which was storing the OrderID. As the collection becomes clear, no Order is there therefore, all galleries height will become ZERO (0).
6. 
7. For Expand All, first we have cleared the collection, then, we have added all OrderIDs in that collection. Therefore, all galleries will be now having height based on their items count.
8. 
9. That's all. It was so simple to implement.
10. This way you can apply Expand All & Collapse All feature in nested gallery.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !

PowerApps: Nested Gallery - Expand / Collapse

 Hello Friends,

Welcome back with another post on PowerApps. In our last post, we have studied on how to create nested Gallery. We have successfully achieved the functionality. Now, by default, all nested galleries were appearing in expanded mode. We want to show only the selected order item gallery in expanded mode and other in collapse mode. Let's see-

If you have not read my previous post on Nested Gallery, please visit below link to go through and create the Nested Gallery PowerApps.

1. PowerApps: Nested Gallery
   

Now, as we to make changes so that only the selected Order's detail would get expanded and remaining gets collapsed. For this, 

1. Option 1: Only One Expanded At A Time
2. We will make a little change in the height property of nested gallery. Set the Height property of GalleryItemDetails as

3. If(ThisItem.OrderID = GalleryOrderMaster.Selected.OrderID,(CountA(ThisItem.ListItemDetails.ItemName)+1)*50,0)
   

4. This way, when we click on any Order ID, it's nested gallery will get a height of 50 times the number of rows +1. For rest of the order ids, their nested gallery will have the height as 0.
5. 
   
   
6. Now save the PowerApps and execute (play). The output will be
7. 
8. This way, only one order will be displayed in expanded mode at a time.
9. Option 2: Multiple Expanded At A Time
10. Sometimes there could be scenario that user need to expand more than one order at a time. Click on order id should be in a toggle mode. If Collapsed then it should expand otherwise collapse.
11. For this, we will use another local collection, where we will store the OrderID, upon which the user has clicked. Upon first click, the ID will get saved in this collection.
12. Upon second click, it will be removed from the collection.
13. This would be a repetitive process.
14. For this, we will add a collection creation code on btnLoadData. You may write the same on App >> OnStart.

15. ClearCollect(SelectedOrderIDCollection,{SelectedOrderID:0});
    

16. It will create a local collection with name as "SelectedOrderIDCollection" and having one record with column name as SelectedOrderID and value as 0. Being 0 will not be ID for any order hence, it will not impact our logic.
17. Now add below logic on GalleryOrderMaster >> OnSelect property-

18. If(
        CountRows(
            Filter(
                SelectedOrderIDCollection,
                SelectedOrderID = GalleryOrderMaster.Selected.OrderID
            )
        ) = 0,
        Collect(
            SelectedOrderIDCollection,
            {SelectedOrderID: GalleryOrderMaster.Selected.OrderID}
        ),
        Remove(
            SelectedOrderIDCollection,
            Filter(
                SelectedOrderIDCollection,
                SelectedOrderID = GalleryOrderMaster.Selected.OrderID
            )
        )
    )
    

19. This function will check if the selected OrderID is present in local selected collection (SelectedOrderIDCollection). If not, then this function will add it, otherwise it will remove. Means a toggle functionality will work.
20. 
21. Now, we redefine the Height property of GalleryItemsDetails. Change the existing function to-

22. (CountA(ThisItem.ListItemDetails.ItemName) + 1) * 50 * CountA(
        Filter(
            SelectedOrderIDCollection,
            SelectedOrderID = ThisItem.OrderID
        )
    )
    

23. 
    
    
24. Now save the PowerApps and execute/play the same.
25. 
    
    
26. 
    
    
27. This way, we can achieve the multiple expand feature in PowerApps nested gallery.
28. In our next post, we will learn about Expand All / Collapse All.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !

PowerApps: Nested Gallery

Hello Friends,

Welcome back with another post on PowerApps. We are starting a series of posts in which we will learn about-

1. Nested Gallery
2. Expand / Collapse (individual master child record set)
3. Expand All / Collapse All
4. Alternate row color

Below is the overview of functionality, we are going to discuss-

We will learn all these features one by one. So let's start-

1. Before starting, we need a SharePoint List having below columns-
1. OrderID
2. ItemName
3. ItemQuantity
2. We have kept the list simple to just show the functionality.
3. 
4. Now add 5-6 orders with each having multiple items.
5. 
   
   
6. Now click on App Launcher (grid of 9 dots at top left corner) and click on PowerApps to open the PowerApps maker platform.
7. I am creating PowerApps in Tablet mode so that the display of nested gallery should be clear.
8. First of all, add connection with SharePoint list. For this, click on Data icon from left navigation menu, click on Add Data. Now select the SharePoint connector. Select the Site and then list "OrdersList".
9.  
10. Now, add a button at bottom right corner which will load the data from SharePoint to local collection.
11. Click on Insert >> Button. Rename it btnLoadData. Set Text as "Load Data".
12. Add below function on "OnSelect" property-

13. ClearCollect(OrdersListCollection,GroupBy(OrdersList,"OrderID","ListItemDetails"));
    

14. This function will load the data from SharePoint list into a local collection "OrdersListCollection" with grouping on OrderID. The grouped data will reflect under column "ListItemDetails". It means, the local collection will have two column-
1. OrderID
2. ListItemDetails
15. 
    
    
16. 
    
    
17. Now we will add gallery control on screen. For this, choose the gallery of type "Blank flexible height". The reason behind this is that we will expand the item based on the number of child items.
18. 
    
    
19. Set the-
1. Height property of gallery as "Parent.Height"
2. Width property as "1000"
3. Items property as "OrdersListCollection"
20. Now click on the Edit icon of item template as shown in below screenshot-
21. 
22. Add a label and set it's-
1. Width as 400
2. Position X as 0
3. Position Y as 0
4. FontWeight as Bold
5. Height as 50
6. Fill as RGBA(241, 244, 249, 1)
7. Rename it as lblOrderID
8. Text as Concatenate("Order ID: ",Text(ThisItem.OrderID))
23. Add one more label and set it's-
1. Width as 585
2. Position X as 400
3. Position Y as 0
4. FontWeight as Bold
5. Height as 50
6. Fill as RGBA(241, 244, 249, 1)
7. Rename it as lblCustomer
8. Text as Concatenate("Customer: ",LookUp(OrdersList,OrderID = ThisItem.OrderID,'Created By'.DisplayName))
24. 
    
    
25. This will show the Order ID and the Customer name. Rename this gallery as "GalleryOrderMaster".
26.  Now we will add one more gallery, which will show the Items associated with that particular Order ID. Once again, click on edit icon as shown in Step 20 and add another gallery of type "Blank flexible height". Rename it as "GalleryItemsDetails".
27. Set-
1. Position X as 50
2. Position Y as 50 (you may set it dynamic by specifying lblOrderID.Height + lblOrderID.Y)
3. Width as 885
4. Height as 100 (we will make it dynamic later in code)
5. Items as ThisItem.ListItemDetails
28. Now we will add two labels to show the ItemName and ItemQuantity.
29. 
30. Add first label and set-
1. Name as lblItemName
2. Text as ThisItem.ItemName
3. Position X as 0
4. Position Y as 0
5. Width as 300
6. Height as 50
31. 
    
    a
32. Similarly, add another label and set-
1. Name as lblItemQuantity
2. Text as ThisItem.ItemQuantity
3. Position X as 300
4. Position Y as 0
5. Width as 300
6. Height as 50
33. 
    
    
34. This way you can show nested items. The basic part is complete. Now, if you execute the PowerApps, you will find that the height of nested gallery is fixed. So, we will make it dynamic. For this, set the Height of GalleryItemDetails as "(CountA(ThisItem.ListItemDetails.ItemName)+1)*50". We have added +1 to make sure there should be no scrollbar.
35. 
    
    
36. This way we can achieve nested gallery functionality. In next post, we will discuss about Expand / collapse feature in nested gallery.
37. UPDATE:
1. Some times, you may find that if the data in nested gallery is too large, then the behavior of parent-nested gallery becomes abnormal.
2. 
   
   
3. As you can see, Parent Items (Kamal, Manoj...) are inline with Child Items (Item-491, Item-492...). (Below is the dynamic height code which you will read in my next articles of this series).
4. The Height code is-

5. If(
       ThisItem.OrderID = ParentGallery.Selected.OrderID,
       (CountA(
           Filter(
               CollChild,
               OrderID = ThisItem.OrderID
           ).ItemName
       ) + 1) * 50,
       0
   )
   

6. To avoid this situation, we need to fix the height of child gallery upto a max limit. But the problem is that, there is Max Height property available for Gallery control.
7. So, we have prepared a workaround to overcome this problem. We have Min function. We will make use of it.
8.  Let's modify the code for Height (I am taking maximum height for child gallery as 400)-

9. If(
       ThisItem.OrderID = ParentGallery.Selected.OrderID,
       Min(
           (CountA(
               Filter(
                   CollChild,
                   OrderID = ThisItem.OrderID
               ).ItemName
           ) + 1) * 50,
           400
       ),
       0
   )
   

10. After implementing this code, the height of child gallery is set to maximum 400 as the calculated height was much greater than 400. Therefore, Min function gave 400 as output.
11.   
12. In case if the calculated height is less than 400, in that case, the Min function will gave the calculated value as output. 

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !