Edit table values using a text input field

App Building
1

Hi,

Is there a way to update cells in a table, using a separate text-input field, with the same outcomes as you would get from directly changing 'editable values' in said table?

I've got a long list of items to pick on one tab and a 'zoomed-in' representation of these rows shown one at a time on another. As a user works through the items on the zoomed-in view, they should be able to tick a box to indicate the item was successfully picked and possibly update the quantity of an item if there was a discrepancy i.e. 'we were asked to pick 10, but there we only found 8'.

This functionality exists perfectly when looking at the long list view, I can edit the quantities and tick boxes all day - with changes being stored in the changesetArray. These changes, once reviewed, can then be saved via an API call to an inventory management system (no help needed for this bit).

Thanks for taking a look at this, screenshots for context:

'Long list view':
image

'Zoomed-in view':

image
image733×454 15.3 KB

2

Hi @Matt_Buckingham, welcome to the forum! :wave:

We can definitely update a row with a separate input.

Here is a form with a text input. The default value is set to the selected row's name property:


Just create an event handler to run the update query:

Here is the update query:

Note: Don't forget to add the Success event handler to run the query that gets your data so your table reflects the changes.
​

That should work like a charm:

Let us know if you have any questions! :slightly_smiling_face:

3

Hi Paulo, thanks for getting back to me!

This would be absolutely perfect if I was working with a retool database, here's my use case:

  1. Make a 'get' call to a Rest API to pull data through to the retool table from an inventory management system.

  2. Edit / update the information in the table by making the rows editable.

  3. When all changes have been made, send a 'save' API call to update our inventory management. The parameters for this save are constructed by referencing the table's change set and comparing it to the original data from the first API call.

So as the data isn't hosted in a database while it's in the table, I'm not able to 'update an existing record' method. I could send a save API call followed by get call every time a value is changed, but this would be very slow - especially when working with large datasets.

Are you aware of any way that I could update a table value, such that it will appear in the change set - the same way that manually changing an editable cell would?

Thank you for your time!

4

If you make all columns editable for the table, all the changes will be inside the "changesetArray".

From here, it would be a matter of making the request to update such entities. But doing it from the zoomed in view is a different story, because the changeSetArray and changeSetObject are read-only.
​
​For example, if we make the text input of the zoomed in view reference the changeSetObject (no iteration needed on the object => better performance) :


There is no way that changing the input will change the values on the changeSetObject (or array).
​
​For example:


A workaround I can think for your use case is to use a separate object to keep track of the changes made on the zoomed in view, like "localStorage" or a state variable with the value of an object. We could add key-value pairs, where the keys are ids of the entities, and the values are changes made on the zoomed in view. This should work, but the changes won't be visible on the table until we run the update query.
​

1 Like