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 !