Post
Ask Question

Power Apps Alternative Editable Data Grid

Introduction

 
Hello everyone. This is my first blog. I am going to explain how to implement an editable grid using Data Table and Text Box controls, and how to include the save, edit and delete operations in the grid.
 

Add the components

 
For the first step, we need a DataTable control,
 
PowerApps Alternative Editable Data Grid
 
We will add the following text boxes, for this example we use a "Name", "Last name" and "Employment",

PowerApps Alternative Editable Data Grid
 
We are going to add the icons to do the operations (save, edit and delete) and our app is looking like this,
 
PowerApps Alternative Editable Data Grid
 
Save, Edit and Delete Operations
 
Save 

We are going to select the Save icon and on the "OnSelect" function we put the next code,

PowerApps Alternative Editable Data Grid
  1. Collect(CollItemsInfo; {  
  2.     IdInfo: Text(Last(CollItemsInfo).IdInfo + 1);  
  3.     Name: TextInput_Name.Text;  
  4.     LastName: TextInput_LastName.Text;  
  5.     Employment: TextInput_Employment.Text  
  6. })  
For saving an item we need the "Collect" function. This function needs two parameters (Data Source, Items). "CollItemsInfo" is the name of our collection (Data Source) and then we place the items that are obtained from the text boxes. We need the "IdInfo" field to perform the edit and delete function, this field gets the final Id plus one.
 
Edit 
 
We are going to select the Edit icon and on the "OnSelect" function we put the next code,
  1. Patch(CollItemsInfo; {  
  2.     IdInfo: DataTable1.Selected.IdInfo  
  3. }; {  
  4.     Name: TextInput_Name.Text;  
  5.     LastName: TextInput_LastName.Text;  
  6.     Employment: TextInput_Employment.Text  
  7. })   
It seems like the Save operation, but not at all, when we want to use an Edit operation we need to use "Patch" function and in the second parameter we need to reference the Id of the item that we want to edit. Then in the third parameter we put the new values; Patch (Data Source, Id, New values).
 
Delete
 
We are going to select the Delete icon and on the "OnSelect" function we put the next code.
  1. RemoveIf(CollItemsInfo;IdInfo = DataTable1.Selected.IdInfo)  
In this case we use RemoveIf function, this function needs two parameters (Data Source, Condition), our condition is "IdInfo = DataTable1.Selected.IdInfo" this means that the id of the selected row will be deleted.
 

Show Data

 
In the DataTable we reference our collection,
PowerApps Alternative Editable Data Grid
 
We add the fields,
 
PowerApps Alternative Editable Data Grid
 
On the "Default" function of our text boxes (TextInput_Name, TextInput_LastName, TextImput_Employment) we put the next code depending on the field,
  1. DataTable1.Selected.Name  
  2. DataTable1.Selected.LastName  
  3. DataTable1.Selected.Employment  
Testing grid
 
Now everything is ready and our grid should look like this,