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 Online” in 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,

Items: Filter(
   'Template Phases',
   Template_x0020_Name.Value = Project_Template_1.Selected.Title
)

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.

ClearCollect(colCreatedProjectRecord, Patch(Project_Details, Defaults(Project_Details), {
    Title: Now(),
    Project_Name: Project_name_txt_1.Text,
    'Project StartDate': start_date_1.SelectedDate,
    'Project EndDate': end_date_1.SelectedDate,
    Project_Description: Project_description_1.Text,
    Template: {
        '@odata.type': "#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",
        Id: Project_Template_1.Selected.ID,
        Value: Project_Template_1.Selected.Title
    },
    ProjectManager: {
        '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
        Claims: Concatenate("i:0#.f|membership|", PROJECTMANAGER_1.Selected.Mail),
        Department: " ",
        DisplayName: " ",
        Email: "",
        JobTitle: " ",
        Picture: " "
    },
    ProjectMembers: ForAll(colMembersToAdd, {
        '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
        Claims: Claims,
        Department: "",
        DisplayName: "",
        Email: "abc",
        JobTitle: "",
        Picture: ""
    })
}));
ForAll('Phaseinfocreate Project'.AllItems, Collect(Phase_info, Patch(Project_Phase_Info, Defaults(Project_Phase_Info), {
    Title: Now(),
    PhaseStartDate: Phasestartdate.SelectedDate,
    PhaseEndDate: Phaseenddate.SelectedDate,
    PhaseName: Phasename.Text,
    ProjectID: {
        '@odata.type': "#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",
        Id: First(colCreatedProjectRecord).ID,
        Value: First(colCreatedProjectRecord).ID
    }
})));

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.