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 !

PowerApps: Create Repeater Control Part-1

 Hello Friends,

Welcome back with another post on PowerApps. Have you ever encountered a scenario where you have to create a Master-Child relationship list and you have to input data in both table simultaneously. Let me take an example. Suppose, you have to create an application for Expense Management. A user went for a leisure trip and he/she wants to keep information of each expense done for that trip. But the problem is that the trip is 6 days long so, he/she cannot remember all the expenses at the end of the trip. He/she want to have an app where he/she can create a master expense named link "Trip to Mumbai". Now for this trip, each expense can be saved as and when occurred. If we have to develop this functionality in any other language/platform, it can be each managed using JavaScript. In PowerApps, there is no control available nor any support of JavaScript. So, How can we achieve this? Let's try-

1. First create two lists-
1. Expense Master - It will store the master information of Expense
2. Expense Details - It will store the detailed information of expenses that are linked to Expense master item.
2. Below is the list creation-
3. 
   
   
   
   
   
   
   
4. Now coming to PowerApps. 
5. First we create a Welcome Page (ScreenWelcome) where we will add 2 buttons, one for New Expense another one for View Expense.
6. 
   
   
   
7. The OnSelect property of "Add New Expense" will be described as follows-

8. NewForm(FormNewExpenseMaster);
   ClearCollect(
       ExpenseDetailsCollection,
       {
           ExpenseItem: "",
           ExpenseCost: 0,
           ShowSaveButtons:true
       }
   );
   Navigate(
       ScreenNewExpense,
       ScreenTransition.CoverRight
   );
   Set(IsExpenseDetailsSaveFirst,false);
   

9. Here we are creating a collection "ExpenseDetailsCollection" to hold the Expense Details so that when form is submitted, it will also be saved in transactional list. This collection has 3 fields-
1. ExpenseItem:- It will hold the type/name of the Expense that was occurred.
2. ExpenseCost:- It will hold the amount of the Expense.
3. ShowSaveButtons:- it will tell the gallery that whether it has to show the Save icons or the Edit icons. It true, then show Save Icons otherwise Edit Icons.  
10. A global variable "IsExpenseDetailsSaveFirst" is also defined. The purpose of this variable is to prompt the user that he/she has to save the transaction table changes (first) in local collection so that when form is submitted, all transactions will get saved in list.
11. Another button "View / Edit Expenses" will have a simple redirection to View Screen when clicked.
12. OnSelect >> Navigate(ScreenViewEditExpense,ScreenTransition.CoverRight); 
13. Now we will create the New Expense Screen (FormNewExpenseMaster).
14. 
    
    
    
    
15. The naming convention of controls is as below-
16. 
    
    
    
    
17. Below is the controls added on above screen-
18. 
    
    
    
19. Let start functional coding-
20. IconExit
1. OnSelect >> Exit(false);
21. 
    
    
    
22. Label6
1. Visible >> IsExpenseDetailsSaveFirst
2. Text >> "You have unsaved Expense Details."
23. 
    
    
    
24. btnSaveToSharePoint
1. DisplayMode >> If(IsExpenseDetailsSaveFirst,Disabled,Edit)
2. OnSelect >> SubmitForm(FormNewExpenseMaster)
25. 
    
    
    
    
26. IconHome
1. OnSelect >> Navigate(ScreenWelcome,ScreenTransition.Cover)
27. 
    
    
    
    
28. IconNewExpenseDetailsEntryRow
1. OnSelect >> Collect(ExpenseDetailsCollection,{ExpenseItem:"",ExpenseCost:0,ShowSaveButtons:true})
2. Visible >> 

1. If(
       CountRows(ExpenseDetailsCollection) > 0,
       If(
           CountRows( Filter(ExpenseDetailsCollection,ExpenseItem = "")) > 0,
           false,
           true
       ),
       true
   )
   

29. 
    
    
    
    
30. FormNewExpenseMaster >>
1. DataSource >> ExpenseMaster
2. DefaultMode >> FormMode.New
31. 
    
    
    
    
32. DataCardValue
1. Default >> Choices([@ExpenseMaster].'Expense Type')
33. 
    
    
    
    
34. DataCardValue2
1. DefaultDate >> Today()
35. 
    
    
    
    
36. DataCardValue3
1. Default >> Text(Sum(ExpenseDetailsCollection,ExpenseCost),"#,###0.00")
37. 
    
    
    
    
38. GalleryNewExpenseDetails
1. Items >> ExpenseDetailsCollection
39. IconTrashExpenseDetails
1. Visible >> !ThisItem.ShowSaveButtons
2. OnSelect >> Remove(ExpenseDetailsCollection,ThisItem)
40. IconEditExpenseDetails
1. Visible >> !ThisItem.ShowSaveButtons
2. OnSelect >> Patch(ExpenseDetailsCollection,ThisItem,{ShowSaveButtons:true});UpdateContext({IsItemInEditMode:true});
41. IconDeleteExpenseDetails
1. Visible >> ThisItem.ShowSaveButtons
2. OnSelect >>

1. If(
       IsItemInEditMode,
       Patch(
           ExpenseDetailsCollection,
           ThisItem,
           {ShowSaveButtons: false}
       );UpdateContext({IsItemInEditMode:false});,
       Remove(
           ExpenseDetailsCollection,
           ThisItem
       )
   );
   

42. IconSaveExpenseDetails
1. Visible >> ThisItem.ShowSaveButtons
2. OnSelect >> 

1. If(
       !IsBlank(glytxtExpenseItem.Text),
       If(
           Value(glytxtExpenseCost.Text) > 0,
           Patch(
               ExpenseDetailsCollection,
               ThisItem,
               {
                   ExpenseItem: glytxtExpenseItem.Text,
                   ExpenseCost: Value(glytxtExpenseCost.Text),
                   ShowSaveButtons: false
               }
           );
           If(
               !IsItemInEditMode,
               Collect(
                   ExpenseDetailsCollection,
                   {
                       ExpenseItem: "",
                       ExpenseCost: 0,
                       ShowSaveButtons: true
                   }
               )
           );
           UpdateContext({IsItemInEditMode: false});
           ,
           Notify(
               "Please provide Expense Cost.",
               NotificationType.Error
           )
       ),
       Notify(
           "Please provide Expense Item Name.",
           NotificationType.Error
       )
   );
   Set(IsExpenseDetailsSaveFirst,false);
   

43. glytxtExpenseCost
1. DisplayMode >> If(ThisItem.ShowSaveButtons, DisplayMode.Edit,DisplayMode.View)
44. glytxtExpenseItem
1. DisplayMode >> If(ThisItem.ShowSaveButtons, DisplayMode.Edit,DisplayMode.View)
45. DataSource are-
46. 
    
    
    
    
47. This way we have create the entry form for Expense manager. Here you will see that the gallery "GalleryNewExpenseDetails" is acting as Repeater Control. By default the input controls are shown in edit mode. As soon as you click on Save Icon, the row get inserted into local collection and at the same moment, the controls converts into View mode. The icons of Save / Cancel gets replaced by Edit / Trash. Additionally, new input row gets added into the gallery.
48. Once all the information gets filled on the screen, you may click "Submit Expense" button to submit the data into SharePoint.
49. Let's take an example-
50. We have submitted an Expense for Business Meeting. In Expense Master, the ItemId for master record is 5.
51. For this master record, the expense details got captured in Expense Details list with ExpenseMasterID as 5.
52. If you sum up the expenses, it will come out to be 8850/- which is same as mentionend in ExpenseMaster list.
53. ExpenseMaster - Records -
54. 
    
    
    
    
55. ExpenseDetails - Records-
56. 

    
    
    
57. With this Part 1 of this series is completed. In Part 2, we will try to edit the record, which is already inserted in system.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !