PowerApps Bulk Update Collection With Patch And Floating Concept Used For Screen Customization

Introduction

In this article, we will see how we can use the Patch function in Power Apps for bulk operations like bulk Edit, bulk Delete with respect to our database. I will explain with an example in which I have taken SharePoint List as a database.

Before reading this article, please go through my previous articles in which I explained the steps to create a Project and the Phases of the Project using various input fields. Also explained on Expand and Collapse Multiple Phases together by using Nested Gallery,

1. Project Management Application (Create Project) Using PowerApps and SharePoint Online
2. Display Data In Power Apps Gallery And Update The Input Of That Gallery In SharePoint List
3. Multiple Expand And Collapse Rows In A Power Apps Canvas App Gallery

Let’s start with a scenario in which I am going to explain how to edit, update or delete multiple tasks of the Task gallery along with this I will explain the floating concept in Power Apps which will help for better architecture in the design of the Application.

Demonstration

The below image displays Project Information in which the left pane is showing the basic information of a project like Project Name, Project Description, and Project Manager. I have already explained all this how to save all the information from the customized form in the Share Point list using the Patch function and how to extract all the information in Power Apps Gallery. The links are given above please refer for better understanding.

The Right pane displays a nested gallery, the Parent gallery displays the Phases and the child gallery displays the Tasks under the Project. I have created some default tasks under every phase using the concept explained in the previous article “Phases created under the Project”. So, here all the tasks are by default assigned to Project Manager, Task Start date is same with Project Start Date and Task End Date is same with Project End Date and the Task Status is “Not Started”.

 

When we click on the Edit button,

Actions

1. The edit button will be changed to Cancel
2. Check Box will be added in every task row
3. Task Name, Task Start date, Task End date, Task Assignee, Task Status, Save and Delete button will appear.
4. We will be able to edit, update or delete single or multiple tasks at one click

Steps to achieve the Design

Edit Button

OnSelect: UpdateContext({Edittaskgallery:!Edittaskgallery}) // Edittaskgallery is a variable declared to enable edit

Text: If(Edittaskgallery, "Cancel", "Edit")// If Edit is enabled the Text of button will be Cancel as it will work Disable Edit

Set the visible property of all controls to Edittaskgallery // By this when the edit button will be clicked this column values will appear.

1. Edit the task gallery and select the checkbox and set the visible property to Edittaskgallery
2. When the column values will visible we need to push the Phase and Task Gallery down, for this we need to set the “Y” and the “Height” property of the Parent gallery(Phase Gallery)

Y: If(Edittaskgallery,180, 100)

Height: If(Edittaskgallery,580, 647)

Let us take one more scenario here, in the above image when Edit is enabled the labels of the controls are disturbed, so let’s arrange them by setting X property of those labels.

Here I have set the X property of all labels and the labels are arranged just above the controls. This is also a concept of floating, by using this we need not create duplicate labels in the screen which will enhance the performance of the application.

Development of this Nested Gallery and its properties

On Visible property of the Screen.

Created a Collection to extract all the Phases of a particular Project,

ClearCollect(
    colPhaseunderProject,
    Filter(
        Project_Phase_Info,
        ProjectID.Value = Projectlist.Selected.ID
    )
);
Created a collection to extract all the tasks under a particular phase
ClearCollect(
    colTasksunderPhase,
    Filter(
        Task_List,
        ProjectID.Value = Projectlist.Selected.ID
    )
)

Now I will add these collections to the Items property of the Gallery.

Items of Phase Gallery: colPhaseunderProject

Select the Child gallery - Task Gallery

Items property of Task gallery: Filter(colTasksunderPhase,PhaseName.Id= ThisItem.ID) // This will bring the tasks which are under a particular Phase.

Bulk Update: Scenario 1

Now in this task list, all the tasks are Starting from June 1, 2021, and ending on September 30, 2021, and assigned to PRAJNYA SATAPATHY and all are in Not Started.

I have added a check box in every Task row and one check box on the top to select all the tasks.

Action

When we will on Check the check box those tasks will be selected for edit. Save button is for saving the Information into the Share Point List and the Delete button is to delete the tasks from the SharePoint List.

Select the checkbox inside the gallery.

Oncheck: Collect(colBulkUpdate,ThisItem)

OnUncheck: Remove(colBulkUpdate,ThisItem)

Now, click on the Edit button and select some tasks from the list.

Action

1. The Task Start Date of these 4 tasks to be changed June 16, 2021
2. The Task End Date of these 4 tasks to be changed to June 23, 2021
3. The Task Assignee of these 4 tasks to be changed to Dilip Kumar
4. The Task Status of these 4 tasks to be changed to In Progress

Result - Displayed in the below image

Steps to achieve this,

Select the checkbox inside the gallery.

On Check: Collect(colBulkUpdate,ThisItem)

OnUncheck: Remove(colBulkUpdate,ThisItem)

Select the Save button: Code(OnSelect)

UpdateIf(
    colBulkUpdate,
    true, // If any tasks selected by checkbox as we have created this collection on Oncheck of Check box//
    { // Below the bold letter are the SharePoint Column name which we want to update. //
        Title: Now(),
        Task_Start_Date: TaskStartdate.SelectedDate,
        Task_End_Date: TaskEnddate.SelectedDate,
        Task_Status: {
            '@odata.type': "#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",
            Id: 0,
            Value: dd_TaskStatus.Selected.Value
        },
        Task_Assignee: {
            '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
            Claims: Concatenate(
                "i:0#.f|membership|",
                dd_TaskAssignee.Selected.DisplayName
            ),
            Department: " ",
            DisplayName: dd_TaskAssignee.Selected.DisplayName,
            Email: " ",
            JobTitle: " ",
            Picture: " "
        }
    }
);

ClearCollect(
    coldatatoPatch1, // Created a temporary collection //
    ShowColumns(  // The column names which need to be patch are listed //
        colBulkUpdate,
        "ID",
        "Title",
        "Task_Start_Date",
        "Task_End_Date",
        "Task_Status",
        "Task_Assignee"
    )
);
Patch(
    Task_List,  // Sharepoint List//
    coldatatoPatch1 // Temporary collection//
); 
Clear(colBulkUpdate);  //Clear the collection of tasks selected b checkbox//
ClearCollect(colPhaseunderProject,Filter(Project_Phase_Info,ProjectID.Value = Projectlist.Selected.ID));
ClearCollect(colTasksunderPhase,Filter(Task_List, ProjectID.Value = Projectlist.Selected.ID));
Set(
    ResetCheckbox2,
    true
); // Reset the checkbox value in Select All set the Reset property ResetCheckbox2

Bulk Update: Scenario 2

 When we click on the Select All checkbox all the tasks will be selected. Let’s update the Task Start Date, Task End date, Task Assignee, and Task Status.

OnCheck: Collect(colBulkUpdate,colTasksunderPhase)

OnUncheck: Remove(colBulkUpdate,colTasksunderPhase)

Action

Result

Bulk Update: Scenario 3

I have explained the 2 examples above for Bulk updates, but in both cases The Task Name box I have kept blank and the Task Name in every task is present. I will explain here the case where the Bulk updates will create the problem and what will be the solution for this.

Please note in the code I have written there is no Task Name column to update,

Let’s add Task Name to update and will check What will be the result,

OnSelect of Save button

UpdateIf(
    colBulkUpdate,
    true,
    {
        Title: Now(),
        Task_Start_Date: TaskStartdate.SelectedDate,
        Task_End_Date: TaskEnddate.SelectedDate,
        Task_Status: {
            '@odata.type': "#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",
            Id: 0,
            Value: dd_TaskStatus.Selected.Value
        },
        Task_Assignee: {
            '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
            Claims: Concatenate(
                "i:0#.f|membership|",
                dd_TaskAssignee.Selected.DisplayName
            ),
            Department: " ",
            DisplayName: dd_TaskAssignee.Selected.DisplayName,
            Email: " ",
            JobTitle: " ",
            Picture: " "
        },
        Task_name:Txt_Taskname.Text
    }
);
ClearCollect(
    coldatatoPatch1,
    ShowColumns(
        colBulkUpdate,
        "ID",
        "Title",
        "Task_Start_Date",
        "Task_End_Date",
        "Task_Status",
        "Task_Assignee",
        "Task_name"
    )
);
Patch(
    Task_List,
    coldatatoPatch1
);
Clear(colBulkUpdate);
ClearCollect(colPhaseunderProject,Filter(Project_Phase_Info,ProjectID.Value = Projectlist.Selected.ID));
ClearCollect(colTasksunderPhase,Filter(Task_List, ProjectID.Value = Projectlist.Selected.ID));
Set(
    ResetCheckbox2,
    true
);

Action

Result

Task names of all tasks are changed to Initialize the Budget.

In the above scenario1 and scenario2 if I would have Patch the value of Task Name column then all the Value of Task Name would have Blank. So, it is dangerous to add a column that should have a unique value.

Solution

In the case of doing the bulk update, the data only add the columns which can be changed in a bulk.

Bulk Update: Scenario 4

Delete the multiple Tasks:

On Select of Delete button:

Remove(Task_List,colBulkUpdate.ID);

Clear(colBulkUpdate);

Conclusion

In this article, I have tried to explain how to do various bulk operations like edit, update and delete using the Patch function. It takes very little time which enhances the performance of the application. I hope you enjoy reading the article and watching the video here. Please like and share if you like the content. Thanking you.