Hello Retool community, great app, by the way.
I'm currently working on a Retool app and having an issue with updating values in a table.
Here's the setup: I have a table where the data is loaded from a temp state. I'm using the default table values with one extra column called "menu_order" to be more simple to explain. I need to change the values of the "menu_order" column from 0 to 99. I created a button where I can change the temp state "menu_order" value to 99, and the table updates its values from the temp state as expected.
However, what I need is to change the table values itself to have the recordsUpdates property of the table values changed, so that I can send only the changed/updated values via an API, rather than sending all values and potentially encountering errors.
I'm not sure how to update the recordsUpdates property to reflect the changes made to the "menu_order" values. Can anyone suggest a solution for this?
This is the example app I made to try to explain what I have today.
https://tc2day.retool.com/apps/64d874d0-ccee-11ed-8d67-237419890987/menu%20Order
Thank you in advance for your help!
Hello,
In the table documentation, there is a section describes how recordUpdates property works.
After making columns editable, you can double click on a cell to edit it. When you edit cells, changes are saved in the table's recordUpdates property. This tracks the changes you've made but it doesn't update the underlying data source that your query connects to. To save edits back to your data source, you must write an appropriate query to update your data. For example, saving changes to a PostgreSQL database can be done using a Bulk update query .
The gif below shows how recordUpdates and changeSet properties work.
Hope that helps.
1 Like
Hi lamh, thanks for the reply.
In the example, the value was changed manually, and in my case, the values should be updated by a script using a button.
Initial state:
After button was clicked:
TBH, I don't know how to do, how to set the values into the table, and, since the values were placed/changed the recordsUpdate also must show the new values. The only way I found add an event handler on the button click to set the values into the temp state, and because the table source is the temp state, the table shows the new values.
I see, unfortunately that recordUpdates is internal to the table so we can't access it.
In that case, you can add additional value in your data to indicate which records was updated. Below are just suggestions with the objective to identify which records were changed and/or which fields were changed.
Temp Data - let add a Boolean flag to indicate if there was any change to the record
[
{ menu_order: 0, id: 1, .........., has_changes: false},
{ menu_order: 0, id: 2, .........., has_changes: false}
]
Button clicked, when you set the menu_order to 99, you can set the has_changes to true. Note: hide the has_changes column in your table.
Now you can identify which record was changed.
If you want to go beyond and simulate the changeSet functionality like the table component, you can create another temporary state to store the changes. This new temp state can have a format of:
[
{ id: 1, menu_order: 99,..............},
{ id: 2, menu_order: 99,..............}
]
And this object has all the records that was changed with the new values. Just reset it to [] after calling the API.
1 Like
Hi lamh.
I changed the way a little bit to work for me. I created two temp states with the same source, temp1, and temp2.
I modified the table to get the values from temp2 keeping temp1 with the original data. Then I set the button "99" to fill the temp2 with the values I want, and since the table gets the values from temp2, the table is updated, which is very good.
Then I set the "reset" button to refresh the table and the temp2, so temp2, after refreshing, loads again values from temp1 and restarted the process.
This is not exactly what I want, but it will work for now.
Thanks!
Sounds good, glad you found a solution. Yea that's one thing I love about programming in general...there is always a solution to a problem.
