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.

hi @ObyY!
I’m ready to share the solution, so first of all, we need to open the Data tool->App State Manager and create some variables:

  1. allData - empty array;
  2. currentData - empty array;
  3. offSet - number, initial value - 0;
  4. limit - number, initial value - 3 (you can change to any number that you want to display in the table)

Now create a few actions:

  1. pagination. This action consists of 2 steps:
    1.1. Code step, put the following code snippet here:

    const allData = […{{state.allData}}];
    const page = {{state.offSet}};
    const limit = {{state.limit}};
    return allData.slice(page * limit, page * limit + limit);

1.2. the following step is Save Data to App State, select here variable - currentData created earlier.

  1. on more action we need to add - for_back_button.
    2.1. Code step with the following code:

const direction = {{data}};
return Math.max(0, {{state.offSet}} + direction);

2.2. Save Data to App State, select variable - offSet.

2.3. Execute action step, select - pagination.

3.Action “loaddata” that will load the real data into a Table.
3.1. HTTP request with GET method and your URL.
3.2. Save Data to App State, select variable - allData.
3.3. Execute action step, select - pagination.

Now we can work with the UI Part, add a Table, select TableRow, and put here the sequence variable as {{state.currentData}}.
Display your data with {{item.name}} syntaxis in a Table.
Also, don’t forget to assign created actions on UI elements:

  • root space “on init” - loaddata;
  • table “on init” - pagination.

Also, create 2 buttons: prev and next. Set action “for_back_button” on click for both buttons. The last part - enable action arguments


and put 1 for button “next” and -1 for button “prev”.
I will attach the video to illustrate the result.

Hi Artem,

Thanks for the above guide you provided a while back. I followed it then and ran into some issues with smoothly editing a row on the ‘Table’ component. As such, I decided to switch to the Smart Table component to see if I could use it instead. I also ran into some issues using the Smart Table component and I initially was going to wait for the Smart Table component to be upgraded, but as my project is very delayed, I have decided to try the ‘Table’ component again to see if I can make some headway with my project.

The Problem: I am having difficulty editing a row, as some existing data disappear and and have to be reselected again and when I try to save to the database, I have errors passing a param to the database using the ‘POST’ command.

Can you provide an example project where a numerical number or an array of numbers are successfully passed into a ‘POST’ https command? In addition, can you provide guidance on how I can pass a variable to another page from a selected row on a ‘Table’ component? I am considering clicking a button on a row, so I can get the unique id of the record on the row, and then navigate to a different page where I can query the database for that record and update the record on the page I navigated to.

Please let me know if I need to clarify anything above and I look forward to some guidance on how I can move forward from where I have been stuck for over a month now on UI Bakery.

Thanks,
Oby

Hi @ObyY!
Could you please attach the image with errors?

Hi Artem,

See below image showing that once I press edit on a row, the fields that have a drop down automatically blank out the data that was previously there.

In addition, I get an error when I try to save data to the database, though it might be an issue with regards how the database receives parameters when calling the https POST method and perhaps I need to take that up with the database service I am using, See the errors below

thanks, @ObyY, could you please also share the image with HTTP step?
404 error means - that the way was not found.
looks like the POST method is set incorrectly.

See the image with the http step. Note, the endpoint url the database service provided for use ends with the jobid in the curly bracket. I am not certain if the jobid is expected to be appended to the url or I should be removing the jobid portion of the url and instead just ensure the set up has the parameter specified.

try to change job/{job_id}
to
job/{{data.jobID}}

Thanks. I tried doing this and I am still getting a 404 error. I also tried deleting the param in the setup, while specifing job/{{data.jobID}}, and I am still getting a 404 error…