PowerApps: Create Repeater Control Part-2

Hello Friends,

Welcome back with another post on PowerApps. In last post we were discussing about creating repeater control in PowerApps. We have successfully created the Add Expense Screen. Below is the link of the post-

PowerApps: Create Repeater Control Part-1

In this post we will try to create screen for editing the Item. The thought we will follow is that, we will be having a Master Expense gallery and a Transactional Expenses gallery. On clicking any master expense, related expenses should get loaded in transactional gallery. Next, on clicking any particular transactional expense, it should get loaded in editable section. Once we change the content of this editable expense and click on Update Expense, the transaction table should get updated. Simultaneously, the sum of all transactions for that particular master expense should also get updated in Master Expense list. Let us see, how we can manage these things-

1. First of  all we will create an View/Edit Screen named "ScreenViewEditExpense".
2. 
   
   
   
   
3. The naming convention of controls used here are-
4. 
   
   
   
   
5. Below labels are used for beautification purpose only so that a user can get see which record is currently selected. They have no other significance in performance or functionality.
1. LblIsItemSelectedRight
2. LblIsItemSelectedLeft
3. LblIsIEDtemSelectedLeftRight
4. LblIsIEDtemSelectedLeft
6. Now let's discuss one by one.
7. 
   
   
   
8. Let's start functional coding-
9. IconHome_View
1. OnSelect >> Navigate(ScreenWelcome,ScreenTransition.Cover) 
10. btnSaveToSharePoint_2
1. DisplayMode >>

1. If(IsExpenseDetailsSaveFirst,Disabled,Edit)
   

2. OnSelect >>

1. If(IsNewDetail,
   Patch(
       ExpenseDetails,
       Defaults(ExpenseDetails),
       {
           'Item Name': txtItemNameEdit.Text,
           'Expense Amount': Value(txtExpenseCostEdit.Text),
           'Expense Master ID':GalleryViewExpenseMaster.Selected.ID
       }
   ),
   Patch(
       ExpenseDetails,
       GalleryViewExpenseDetails.Selected,
       {
           'Item Name': txtItemNameEdit.Text,
           'Expense Amount': Value(txtExpenseCostEdit.Text)
       }
   ));
   
   If(
       IsEmpty(Errors(ExpenseDetails)),
       Patch(
           ExpenseMaster,
           GalleryViewExpenseMaster.Selected,
           {
               TotalExpense: Value(txtTotalExpense.Text)
           }
       ),
       false
   )
   

11. txtTotalExpense
1. DisplayMode >> Disabled
2. Default >>

1. If(
       IsNewDetail,
       Value(GalleryViewExpenseMaster.Selected.TotalExpense) + Value(txtExpenseCostEdit.Text),
       Value(GalleryViewExpenseMaster.Selected.TotalExpense) - Value(GalleryViewExpenseDetails.Selected.'Expense Amount') + Value(txtExpenseCostEdit.Text)
   )
   

12. txtExpenseCostEdit
1. Default >>

1. If(
       IsNewDetail,
       "",
       Text(
           GalleryViewExpenseDetails.Selected.'Expense Amount',
           "#,###0.00"
       )
   )
   

13. txtItemNameEdit
1. Default >>

1. If(
       IsNewDetail,
       "",
       GalleryViewExpenseDetails.Selected.'Item Name'
   )
   

14. IconeAddNewExpenseDetails
1. OnSelect >>

1. UpdateContext({IsNewDetail:true});
   

15. GalleryViewExpenseMaster
1. Items >> ExpenseMaster
16. IconSendForApproval : Actually, this icon was used to initiate approval process of the Expense. You may skip this icon. In case, if you wish to use this functionality, you have to create a Power Automate to start approval process and use it here OnSelect. I had created a Power Automate named "InitiateExpenseApproval" which takes the ItemID as input. I am not going to add this Power Automate code here.
1. OnSelect >>

1. InitiateExpenseApproval.Run(Text(ThisItem.ID));
   

17. LblIsItemSelectedRight / LblIsItemSelectedLeft
1. Fill >>

1. If(ThisItem.IsSelected,RGBA(118, 22, 68, 1),RGBA(255, 255, 255, 1))
   

18. NextArrow1
1. OnSelect >> Select(Parent)
19. txtDateOfExpenseClaim
1. Text >> 

1. Text(ThisItem.'Claim Request Date',"dd mmm, yyyy")
   

20. txtExpenseAmount
1. Text >>

1. Text(ThisItem.'Total Expense',"#,###0.00")
   

21. txtExpenseTitle
1. Text >>

1. ThisItem.'Expense Type'.Value
   

22. GalleryViewExpenseDetails
1. Items >>

1. Filter(ExpenseDetails,'Expense Master ID' = GalleryViewExpenseMaster.Selected.ID)
   

23. IconTrash
1. OnSelect >>

1. Remove(
       ExpenseDetails,
       ThisItem
   );
   Patch(
       ExpenseMaster,
       GalleryViewExpenseMaster.Selected,
       {
           TotalExpense: Sum(
               GalleryViewExpenseDetails.AllItems,
               'Expense Amount'
           )
       }
   );
   

24. LblIsIEDtemSelectedLeftRight / LblIsIEDtemSelectedLeftLeft
1. Fill >>

1. If(ThisItem.IsSelected,RGBA(118, 22, 68, 1),RGBA(255, 255, 255, 1))
   

25. NextArrow3
1. OnSelect >>

1. Select(Parent);UpdateContext({IsNewDetail:false});
   

26. txtExpenseCost
1. Text >>

1. Text(ThisItem.'Expense Amount',"#,###0.00")
   

27. txtExpenseDetails
1. Text >>

1. ThisItem.'Item Name'
   

28. This way functional coding part has been completed. Now, the process of use-
1. The moment, this screen is loaded, all expenses master from ExpenseMaster list gets loaded in "GalleryViewExpenseMaster". As by default the first record is selected, hence the filtered details of that expense gets loaded in "GalleryViewExpenseDetails". 
2. The trash icon deletes that particular record from SharePoint list and updates the total sum in ExpenseMaster. 
3. The NextArrow icon loads its details in edit section where user can change the details and save it. Upon Save, the record gets updated in Expense Details list nd the sum gets updated in Expense Master list.
29. Lets take example of same record, we discussed in Part-1. Below are the screenshots of the steps-
1. 
   
   
   
   
2. 
   
   
   
   
3. 
   
   
   
   
4. 
   
   
   
   
5. Upon clicking the Plus icon to add new record-
1. 
   
   
   
   
2. Adding new expense-
3. 
   
   
   
   
4. 
   
   
   
   
30. Future Scope of AddOn-
1. Once a record is sent for approval, it should not be able to get edit on this screen.
31. With this Part 2 of this series is completed. This way we can implement Repeater Control functionality in PowerApps.
32. Lastly, I would like to thanks Shane Young whose YouTube post helps me a lot in getting this done. Please find below links of his YouTube videos-
1. PowerApps Repeating Tables like InfoPath Part 1 - Enter the data
   
2. PowerApps Repeating Tables like InfoPath Part 2 - View and edit the data
   
3. PowerApps Repeating Tables Like InfoPath Part 3 - Inline editing
   

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !