Dynamically refreshing a field or component's data

Hello,

I am trying to dynamically refresh the data displayed on some components when a trigger event occurs. Can anyone provide guidance on how to do this?

Context: I am using a regular table and not the smart table to display some information (using the sequence variable). I am using the table component and not the smart table component, as I could not get the smart table to use the date picker component for one of the input fields. Now that I am using the table component. I am not sure how I can select a displayed row, so it can be displayed somewhere and its data edited if need be. I have set up the Select button to query the database for just that row’s record and I now want to display it in a set of input fields, so a user can make changes and edit the record. I am now stuck trying to dynamically refresh the data displayed in the input fields, once a row’s record has been selected. See screen shot below. I would appreciate some guidance on how to accomplish this.

Thanks.

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:

  1. in case we are just observing the table;
  2. 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.

Thanks Artem! I will try and replicate this and if need be, request a copy of the example. Hopefully the directions should suffice for me to replicate it.

I have another follow on question with regards a simple table. Out of curiosity, can someone create paging using a simple table? or is it only with a Smart table that someone could have paging on the data returned from the database. Thanks.