JS Query: How do I add a blank row to a temporary state/table

💬 Queries and Resources
1

I have a temporary state and a table tied to it. I'm trying to write a JS Code to add a new blank row to the temporary state table without changing any of the existing rows. I've been messing around with setValue and setIn but I can't get them to do this. Either I use setValue and it creates a new line AND clears out the entire table, or I use setIn and it doesn't create a new row but updates an existing one.

Can someone please help? Here's the table, I guess I'd want it to create a new row similar to the existing row, without affecting the existing row/s

A8D35CF0-D4BB-4EB5-AB97-05B2351530AA
A8D35CF0-D4BB-4EB5-AB97-05B2351530AA1920×937 75.5 KB

2

The following should work, I believe.
Temp_State_Detail.setValue(Temp_State_Detail.concat(table1.selectedRow.data))

3

ScottR,

Thanks for the suggestion! I tried what you suggested but It returned an error "Temp_State_Detail.concat is not a function". I changed it to add ".value" like this

Temp_State_Detail.setValue(Temp_State_Detail.value.concat(table1.selectedRow.data))

This does create a new detail row but it clears out everything that was previously keyed into the existing lines.

I also tried this

Temp_State_Detail.setValue(Temp_State_Detail.value.concat([{
  "Line": 2,
  "Category": "Part",
  "Charge Description": "",
  "Qty": 0,
  "Unit Price": 0.00
}]))

but it seems to do something similar. Basically, any time I do a Temp_State_Detail.setValue, it adds a new row but reverts all lines back to their default state, clearing anything that was entered. I'm wondering if I should be interacting with the table instead of the Temp State?

4

The reason your getting the error is because you cannot use concat() if the Temp_State_Detail is not an array.

I got it to work by defining the initial value of Temp_State_Detail
as {{transformer1.value}}
which is defined as the following:
const objs = ;
return objs;

Then using an Event on the table such as Row Select, I call query2 which is defined as
Temp_State_Detail.setValue(Temp_State_Detail.value.concat(table1.selectedRow.data);

Screen Shot 2021-11-08 at 12.31.32 PM
Screen Shot 2021-11-08 at 12.31.32 PM2708×556 81.3 KB

Screen Shot 2021-11-08 at 12.31.12 PM
Screen Shot 2021-11-08 at 12.31.12 PM680×588 28.4 KB

Screen Shot 2021-11-08 at 12.30.54 PM
Screen Shot 2021-11-08 at 12.30.54 PM2714×1310 469 KB

5

ScottR
Thanks for the detailed response. I did as you suggested. The only thing I did differently was to set the query2 to run on a button click. I also set the transformer1 as the following

4632E0D3-D9A7-4DD1-B556-84ECEABD966D
4632E0D3-D9A7-4DD1-B556-84ECEABD966D2068×578 103 KB

Clicking the button adds a row but seems to wipe out anything already entered in the table. I'm not sure if this is similar to your experience or if I'm doing something wrong.

Basically, I want it so that when a user clicks the button to add a row, it leaves existing rows as they are, with any changes that had been entered into them, then it adds a new blank row set to "Part" Category.

Thanks for your help

Josh

6

Check out this article, not sure if you have read it yet, but I think it will give you what you're looking for...
https://docs.retool.com/docs/temporary-state

7

Also, I think you may have to set the value of the table initially from a temp state so that you can run concat on it and this way it doesn't wipe out the original rows....so query1 in your case would be the initial temp state and then concat on that value and push it into another temp state which would be the value of the table itself

So, here's what I have done:
I have three temp states - each starting as objs that have structure but are empty - though they don't have to be.
temp1
temp2
mainTempState - this is the one I will use to update the db

Depending on what operation takes place, I will set temp1 to a value and then do
mainTempState.setValue(temp1.value)
If I need to concat on that for temp2 I will do
mainTempState.setValue(mainTempState.value.concat(temp2.value))

Notice that I am never really changing but only adding to mainTempState...

For you mainTempState would be the value of your initial query and the source for your table.