Save Table Column Edits to temp state

App Building
,
1

I am working on giving my user access to edit two columns in my table( Cost and Quantity) after they are satisfied with the edits I want them to be able to use the big "Save" button provided by the table component. But I am running into a little issue with how to update the data from my table to the temporary state where the tables resource is kept. I have tried the Save event handler in the picture using the built in Key Path and Value lines. But they don't seem to be quite correct. Because I am doing multiple line edits would I need to use JS instead? Or can this tables feature still be used? Thank you.

image
image1499×649 63.1 KB

2

Unfortunately I don't see how you'd use that if multiple rows are being submitted. The key path is asking for the keys and indexes in your variable to update, of which there will be several if you're submitting multiple fields and rows.

You'll need to loop through the change object and find the index of the object that you want to update based on the primary key that you have set (this should also be the key of each object within the changeset object). Something like:

const data = lineitem.value

Object.entries(table_newItemsAdd.changesetObject).forEach(([key, values])=> {
  const index = data.findIndex(x=>x.id === Number(key))
  Object.entries(values).forEach(([attribute, value]) => {
    data[index][attribute] = value
  })
})

lineitem.setValue(data)
3

I can note that the Set In value is incorrect. That method works by setting a deep property with a string path, like this var.setIn('deep.nested.path', value)

Try switching it to just Set so you store the changeSet?

4

Thank you! That is sorta what I was thinking. I needed a more universal looping code to deal with the multiple lines. This works perfectly!!

1 Like
5

Also, if you wanted to, you could clarify that logic some with lodash since ReTool embeds it for you.

const data = lineitem.value;

_.forEach(table_newItemsAdd.changesetObject, (values, key) => {
  const index = _.findIndex(data, { id: Number(key) });
  
  _.forEach(values, (value, attribute) => {
    _.set(data[index], attribute, value);
  });
});

lineitem.setValue(data);
6

Just a quick follow up issue I am having with this code. I have attached the picture of the code I am using that is directly from your suggestions above. The code updates the variable perfectly. The issue I am having is that I have to click my "SAVE" button 2 times for it to actually save the data and for the little blue triangles on the boxes to go away. Is it a simple setting that I am missing?

image
image1103×1024 85.5 KB