Adding multiple rows in a table before "save changes"

App Building
#1

Hi Retool Team,

I want to have a tool that allows users to input multiple rows of record before they is same changes to trigger the bulk add query.

To records to be added have three columns:

  1. Charge name
  2. Charge currency
  3. Charge amount

My problem:

  • the JSON form component limits the user to add one row of record at a time
  • the "On Row Add" feature of a table component also limits the user to add one row of record at a time (see print screen)
  • the users want to type in multiple rows of records, before hitting "Save Changes"
    Screenshot 2021-04-07 at 14.35.57
    Screenshot 2021-04-07 at 14.35.57934Ă—782 30.5 KB

Question: How can this requirement be done?

1 Like
#2

Hi Oliver, The table component currently only supports adding one row at a time. This sounds like a good case to use List View option in Retool. You would first create a list locally in an app and then upload it into your table. I have included a screen shot below and attached a JSON file here we used to create the view - feel free to adapt it for your purposes!https://docs.retool.com/docs/working-with-listviews

3536Ă—1986 609 KB

1 Like
#3

Thanks Grace. That works.

Not very versed with JS and listView - with your current method, after I input data in the three rows and when I click “Add Raw”, the number of rows increase to 4 but all input data is cleared? I guess it’s something to do with the Row Keys of the listView component but how can I execute that exactly, please?

Similar question to remove rows, i.e. rather than remove row + clear all input, can we only remove a row but keep all the input.

Thanks

#4

In this case, Grace is using a temporary state to store the values of each row, and the components reference those values in their default value settings like this: 

{{tempState.value[i].description}} Using this code to update the values when inputs are changed, triggered in the textinput’s “On blue run” setting:
var startLength = 1 // change to list of data if you are pre-filling the lsitview with items from something
if( triggeredById == “addRow”){
return listviewLength.data += 1
} else if (triggeredById == “removeRow” ){
  tempState.setValue(tempState.value.slice(0,tempState.value.length-1))
  return listviewLength.data += -1 
} else{
  return startLength
}
#5

Hi @alex-w and @grace ,

I'm wondering how to use removeRow button inside the lisView to remove a specific row. For example, when clicks the removeRow button on the second row, the expected result is: the second row is removed, while the first and third rows' values are preserved and the third row now becomes the second row.

CleanShot 2021-09-28 at 21.28.25
CleanShot 2021-09-28 at 21.28.25878Ă—351 24.5 KB

My approach to the listView is similar to the discussion here. The length of the listview is controlled by a temp state tempNumRows and the values of each row are stored in another temp state tempData. There's an addRow button triggering two js queries

  • to increment the temNumRows
    tempNumRows.setValue(tempNumRows.value += 1)

  • to keep the tempData updated

    tempArray = [];
    for (let i = 0; i < tempNumRows.value; i++) {
    let el = {
    type: select1[i].value,
    note: textInput1[i].value
    }
    tempArray.push(el)
    }
    tempData.setValue(tempArray)

I'm figuring out how to manipulate the removeRow button. I have tried to associate a js query tempData.setValue(tempData.value.spice(i, 1)) but it is not working.

Thank you in advance for your time and help :innocent: