hi @ObyY!
1) Preparations
Let’s imagine you already have real data placed inside of the Table. You’ve used a sequence variable, to populate the data. Also, we added a few inputs and buttons. So the picture is looking like this
.
As you can see from the image, we placed an input with a text component near each text component.
Since we are using sequences, we have item and index.
We need to hide/show our data in the table, it depends on the action we want to do:
- in case we are just observing the table;
- or we want to edit the data;
That’s why we need to use the Show condition feature. Before using Show condition feature we will create a variable with name editedRow, type - object, value - empty.
Select the tex component that displays “id” field, open its’ data settings, inside of Show condition put the following code:{{index}} !== {{state.editedRow}}.index. It means that our index is strict not equal to the edited row.
Now shift to the input component and put the following code in the Show condition field:
{{index}} === {{state.editedRow}}.index
Do the same with the other text and input components.
2) Select.
Now we are going to work with select button, create a button, set a name for button and click on action arguments placed in data settings of the button.
Add here the following code:
{
index: {{index}},
item: {{item}},
}`
Now create an action “on cick”
This action has one step - Save Data to App State, create a variable - selectedRowIndex, type - number, initial value - ‘-1’ (minus one).
Open Builder Tool, select TableRow, find background color property in general settings of the TableRow, and put the code:
{{index === state.selectedRowIndex ? ‘rgba(255, 255, 255, 0.5)’ : ‘transparent’}}.
3) Update
Now we need to work with update button. Create a button, set a name for button and click on action arguments placed in data settings of the button.
Add here the following code:
{
index: {{index}},
item: {{item}},
}`
We need also to create action on click of the button with name “editRow”.
This action consists on only one step - Save Data to App State Manager.
Create a variable “editedRow”, type - object, value - empty.
3.1) Cancel
The button “cancel” has a show condition:
{{index}} === {{state.editedRow}}.index
It means that if our selected item is changed, we need to display button “cancel”. Also, don’t forget to create action on click of the button “cancel”.
This action has only one step -Save data to App state, select existent variable - editedRow.
3.2.) Save
The button “save” has a show condition:
{{index}} === {{state.editedRow}}.index
It means that if our selected item is changed, we need to display button “save”. Also, don’t forget to create action on click of the button “save”.
This action consists of 3 action steps:
step 1) Code step where we need to use the following code:
const allData = […{{state.data}}];
const oldItem = {{state.editedRow}}.item;
const index1 = {{state.editedRow}}.index;
const newItem = {
id: {{ui.Input.value}},
fullName: {{ui.Input1.value}},
};
allData[index1] = {…oldItem, …newItem};
return allData;
step 2) Save data to App State Manager
In this step we only select our “data” variable. This variable was created at the beginning to load the original data into the table.
step 3) Execute action, select here action “cancelEdit” (we created this action in step 3.1)
4) Remove (delete)
This button has show condition
{{index}} !== {{state.editedRow}}.index
and action arguments
{
index: {{index}},
item: {{item}},
}
Set action on click on button “remove”.
This action consists of 2 steps:
step 1) Code step
const allData = […{{state.data}}];
const removeIndex = {{data}}.index;
allData.splice(removeIndex, 1);
return allData;
step 2) Save Data to App State Manager, where we need to select “data” variable.
That’s it!
Here is the link to real example
We can copy this project to your account by a request, but I should say that you need to have an empty project for copying purposes.
