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,
SharePoint List Structure
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 
Labels and Gallery 
Add TextInput, DatePicker, and Icons (for Save, Edit, and Cancel) inside the gallery as below,
Add Controls to gallery
After successfully adding all controls on the screen, our screen looks like this,
 Controls inside gallery
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,
Name - Default Property
Address - Default Property
  • Set DefaultDate Property for datePicker control as below,
Date - Default Property
  • 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,
  1. Set(  
  2.     ItemID,  
  3.     Patch(  
  4.         'Employees Information',  
  5.         Defaults('Employees Information'),  
  6.         {'Name (Title)'""}  
  7.     ).ID  
  8. )  

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,
  1. Select(Parent);  
  2. Set(  
  3.     ItemID,  
  4.     ThisItem.ID  
  5. )  
  • 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,
  1. Select(Parent);  
  2. Patch(  
  3.     'Employees Information',  
  4.     {ID: ThisItem.ID},  
  5.     {  
  6.         'Name (Title)': txtName.Text,  
  7.         Address: txtAddress.Text,  
  8.         DOB: datePicker.SelectedDate  
  9.     }  
  10. );  
  11. Set(  
  12.     ItemID,  
  13.     0  
  14. );  
  • 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,
  1. If(  
  2.     ItemID = ThisItem.ID,  
  3.     true,  
  4.     false  
  5. )  
  • Set Visible property of btnEdit as below,
  1. If(  
  2.     ItemID = ThisItem.ID,  
  3.     false,  
  4.     true  
  5. )  
Delete Record
 
Set OnSelect property of btnDelete as below,
  1. Remove(  
  2.     'Employees Information',  
  3.     Gallery1.Selected  
  4. )  
Cancel Record
 
Set OnSelect property of btnSelect as below,
  1. Set(  
  2.     ItemID,  
  3.     0  
  4. )
Set Visible property of btnSelect as below,
  1. If(  
  2.     ItemID = ThisItem.ID,  
  3.     true,  
  4.     false  
  5. )  
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!!!