Power Apps Alternative Editable Data Grid

In this blog, you will learn how to make an App with a Data Table editable using text boxes.

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,

 

 

We will add the following text boxes, for this example we use a "Name", "Last name" and "Employment",

 

We are going to add the icons to do the operations (save, edit and delete) and our app is looking like this,

 

 

Save, Edit and Delete Operations

 

Save 

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

Collect(CollItemsInfo; {
    IdInfo: Text(Last(CollItemsInfo).IdInfo + 1);
    Name: TextInput_Name.Text;
    LastName: TextInput_LastName.Text;
    Employment: TextInput_Employment.Text
})

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,

Patch(CollItemsInfo; {
    IdInfo: DataTable1.Selected.IdInfo
}; {
    Name: TextInput_Name.Text;
    LastName: TextInput_LastName.Text;
    Employment: TextInput_Employment.Text
})

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.

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,

 

We add the fields,

 

 

On the "Default" function of our text boxes (TextInput_Name, TextInput_LastName, TextImput_Employment) we put the next code depending on the field,

DataTable1.Selected.Name
DataTable1.Selected.LastName
DataTable1.Selected.Employment

Testing grid

 

Now everything is ready and our grid should look like this,