PowerApps CRUD Operations Using Quick Edit Grid

Introduction

 

A CRUD operation is the most basic thing for all applications. In PowerApps, we can create a CRUD operation with SharePoint List in many ways like using the form, grid, data table, etc.

 

In this article, we will create a CRUD operation using a grid view as a SharePoint quick edit. So let's start the step by step implementation.

 

Implementation

 

Create SharePoint lists as below,

• Create a list called Employees Information with the below field,

Let's start the PowerApps Implementation,

• Move to the PowerApps
• Go to the Create > Canvas app from blank
• Give App name and select format

Now we will add required controls like Gallery, Labels, Icons and Text Inputs 

 

Add TextInput, DatePicker, and Icons (for Save, Edit, and Cancel) inside the gallery as below,

After successfully adding all controls on the screen, our screen looks like this,

 

Add Data Source for mapping controls and save back to SharePoint list

• Go to the View on top ribbon > Select Data source > Search SharePoint > Add Connection > Connect to the SharePoint Site > Select list (Employees Information).

• Set Default Properties for txtName and txtAddress controls as below,

• Set DefaultDate Property for datePicker control as below,

• Set OnStart property of App creating a variable called ItemID = 0

Create Record

 

On clicking the add icon, we will create a row inside the gallery with all the above-added controls.

 

Set OnSelct property on iconAdd as below,

Set(
    ItemID,
    Patch(
        'Employees Information',
        Defaults('Employees Information'),
        {'Name (Title)': ""}
    ).ID
)

Edit Record

• Let's create logic for editing and saving button selection 

• On Selection of Edit Button, we will get selected item ID and set the variable called ItemID.

• Set OnSelect property of btnEdit as below,

Select(Parent);
Set(
    ItemID,
    ThisItem.ID
)

• On Selection of Save Button, we will save the record in the SharePoint list and then reset ItemID variable to 0.

• Set OnSelect property of btnSave as below,

Select(Parent);
Patch(
    'Employees Information',
    {ID: ThisItem.ID},
    {
        'Name (Title)': txtName.Text,
        Address: txtAddress.Text,
        DOB: datePicker.SelectedDate
    }
);
Set(
    ItemID,
    0
);

• Our logic will be we have to show/hide the Save/edit button. We will show only one button at a time. So we will set Visible property of both as below.

• Set Visible property of btnSave as below,

If(
    ItemID = ThisItem.ID,
    true,
    false
)

• Set Visible property of btnEdit as below,

If(
    ItemID = ThisItem.ID,
    false,
    true
)

Delete Record

 

Set OnSelect property of btnDelete as below,

Remove(
    'Employees Information',
    Gallery1.Selected
)

Cancel Record

 

Set OnSelect property of btnSelect as below,

Set(
    ItemID,
    0
)

Set Visible property of btnSelect as below,

If(
    ItemID = ThisItem.ID,
    true,
    false
)

Now run the PowerApps using the F5 Command.

 

Output

 

 

Full Source Code

 

You can download full source code from the zip file. After downloading the zip file you have to create the SharePoint list as mentioned above and set the data source in PowerApps.

 

Summary

 

In this article, we have seen step by step implementation of a PowerApps CRUD operation using a quick edit grid.

 

I hope you like this. If it is helpful to you then share it with others. Give your valuable feedback and suggestions in the comments section below.

 

Sharing is caring!!!