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!!!

5 Comments

Join the conversation! Your thoughts help the community grow.

Chinni Reddy5y ago
Its not working for me all formulaes showing error me. Kindly assist me anybody for this article?
Reddiprasad A5y ago
Nice Article, but where is the "btnSelect"
Amit Kumar5y ago
Very nice article. Thanks for sharing.
Emilio Roqueta5y ago
Thank you Chandani !!
Sumit Kumar6y ago
Nice article. thanks Chandani for the sharing this blog...