Display Data In Power Apps Gallery And Update The Input Of That Gallery In SharePoint List

In my previous article, I have explained how to create a simple Project with the inputs Project name (Text Input - Single Line), Project Description (Text Input - Multiple Line), Project Start Date and Project End Date (Date Picker), Project Manager (Combo Box - People Picker) for a single user, Project Members (Combo Box - People Picker) for multiple users and Project Type (Dropdown).
 
Before reading this article, please read my previous article “Project Management Application (Create Project) Using PowerApps And SharePoint Onlinein which I have explained the use of the Patch function to save all the inputs in the SharePoint List.
 

Create Phases of the Project as per the Project Template

 
We need to create the following SharePoint Lists and then will work on the Power Apps screen.
 
Details of SharePoint List required for this,
  • Project Details - All inputs of creating the Project saved and stored here.
  • Templates - List of all required Templates 
 
Column Name - Data Type
 
Title - Single Line of Text
 
Template Phases - List all the Phases of the corresponding template
 
Phase Name - Single Line of Text
 
Template Name - Lookup Column of Templates
 
 

Project_Phase_Info

 
Phase Name - Single Line of Text
 
Phase Start Date - Date and Time
 
Phase End Date - Date and Time
 
ProjectID - Lookup of ID column Project_Details list
 
 
Design the Power Apps screen as shown below,
 
 
The controls shown in the left pane of the image, I have explained in my previous article how to save them in the SharePoint List. Now we will see how to extract the phases as per the template selected by the user.
 
Step 1
 
Add a dropdown rename it as Project_Template and add the code in the following properties.
 
Items - Templates (SharePoint List)
 
 
Step 2
 
Concept - Display the data in the Gallery as per the value selected in the dropdown
 
Add a vertical gallery below the dropdown and add the following properties,
  1. Items: Filter(  
  2.    'Template Phases',  
  3.    Template_x0020_Name.Value = Project_Template_1.Selected.Title  
  4. )  
Edit the gallery add a label and in the Text property of the label add - Title, then the corresponding Phases will be displayed as per the Template.
 
 
Step 3
 
Now we will add Phase Start Date and Phase End Date against each Phase and will save them in the SharePoint List. For this, we have created a SharePoint List “Project_Phase_Info” and columns in the list which I have mentioned above.
 
Step 4
 
Now we will save the Phase Start Date and Phase End Date in the SharePoint List “Project_Phase_Info”.
 
Concept - Save in SharePoint list item from PowerApps Gallery
 
Generally, when we save any record in the SharePoint list, SharePoint by default creates an ID for each record and that ID can be a lookup in any other list for extracting corresponding data.
 
The scenario here is when clicking on Create Project it will save the basic data in the Project_Details list and its ID will be lookup in Project_Phase_Info. As we are saving all the information with one button click, the ID of the Project_Details list is not generated.
 
For this first, we need to create a collection “colCreatedProjectRecord” and save the Project-related control in this using the below code. Then create another collection “Phase_info” and save the Phase Information.
 
Now add the code in the Create Project to save the corresponding Phases of the Project.
  1. ClearCollect(colCreatedProjectRecord, Patch(Project_Details, Defaults(Project_Details), {  
  2.     Title: Now(),  
  3.     Project_Name: Project_name_txt_1.Text,  
  4.     'Project StartDate': start_date_1.SelectedDate,  
  5.     'Project EndDate': end_date_1.SelectedDate,  
  6.     Project_Description: Project_description_1.Text,  
  7.     Template: {  
  8.         '@odata.type'"#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",  
  9.         Id: Project_Template_1.Selected.ID,  
  10.         Value: Project_Template_1.Selected.Title  
  11.     },  
  12.     ProjectManager: {  
  13.         '@odata.type'"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",  
  14.         Claims: Concatenate("i:0#.f|membership|", PROJECTMANAGER_1.Selected.Mail),  
  15.         Department: " ",  
  16.         DisplayName: " ",  
  17.         Email: "",  
  18.         JobTitle: " ",  
  19.         Picture: " "  
  20.     },  
  21.     ProjectMembers: ForAll(colMembersToAdd, {  
  22.         '@odata.type'"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",  
  23.         Claims: Claims,  
  24.         Department: "",  
  25.         DisplayName: "",  
  26.         Email: "abc",  
  27.         JobTitle: "",  
  28.         Picture: ""  
  29.     })  
  30. }));  
  31. ForAll('Phaseinfocreate Project'.AllItems, Collect(Phase_info, Patch(Project_Phase_Info, Defaults(Project_Phase_Info), {  
  32.     Title: Now(),  
  33.     PhaseStartDate: Phasestartdate.SelectedDate,  
  34.     PhaseEndDate: Phaseenddate.SelectedDate,  
  35.     PhaseName: Phasename.Text,  
  36.     ProjectID: {  
  37.         '@odata.type'"#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",  
  38.         Id: First(colCreatedProjectRecord).ID,  
  39.         Value: First(colCreatedProjectRecord).ID  
  40.     }  
  41. })));   
The image below displays the Project which I have created and when I select any of the Project then the right Gallery shows its phases. Like, here I have selected the second Project which Template is HR, and the right Gallery showing the HR phases.
 
To achieve this I have used the following code,
 
Items property of All Projects gallery: Project_Details
 
Items property of right gallery: Filter(Phase_info,ProjectID.Id = AllProjects.Selected.ID)
 
 
A demonstration here gives an idea of how to create a Project and will display the Phases of the Project as per the Template selected.
 
I hope, this article will help you in building your app. Enjoy working with me. Thank you.