Help with script to add empty row in tables


I’m new to retool an don’t have any experience with javascript.

I’m trying to create a request form that save data to db.

  1. I have a table with 5 empty row by using data source [1,2,3,4,5]

  2. Under the table i have
    Numberfield + button «add additional rows»
    User can type in number of extra row(s) user need, defult number is 1.

It can also be a solution to have one row and when user type something on that row a new empty row is added.

  1. And then i have a submit button.
    That will save the information in to a db.

I need help with a script that will add more empty rows in the table that i can add as event on the button «add aditional row(s)»

Hope there are someone that can help a new beginner. Maybe have other idees to a from table with 7 editable columns.

1 Like

If you are starting with a table that is sourced from a database and want empty rows that the user can modify, you could create a script that sends an "create record" query to the DB X times with empty strings as the 7 editable columns which would result in X new records, each of which having (essentially) only a primary key (presumably). Then script can trigger the table refresh which would then include those additional records to be edited by the user.

Or, given that you seem to be starting with a blank table (I think that is what you mean by using a data source of [1,2,3,4,5] for the table), you could create a variable (variable1 below) and run a variation of the following script to add N new "rows":

let N = 3 //make this variable in your implementation
let newVarVal = variable1.value
for (let i = 0; i < N; i++) {
  const lastItem = newVarVal[newVarVal.length - 1];
  newVarVal.push(lastItem + 1);

BUT - if you are saving your data to the variable, which is presumably the source of your table, you would need to define the rest of the table columns in the variable as well and account for them in your code.

For my tastes, I would recommend you start with a query to the DB to get the records from the table you are adding to, put those in the table, and then use some variation on approach #1. The second approach might get a bit hairy, depending on what specifically you are trying to do.

Hi @jg80

I want the client that need help to send his request in a request form.

Example client want to create a «main task/ requests» that has «subtasks/items»

  1. client select a «type» in a a dropdown list
    «Type» can be a project, user, car or store
    This will be registered in MySql table request

  2. user register items user need. It can be 1 item or 500 items. Items can be: users for a project, items to purchase, useres that need access to Retool or parts for for a car.

Column A: name
Column B: location
Column C: qty.
Column D: url
Column E: comment

If posible, client can copy and paste from a excel sheet to retool request form.

Items will be registered in MySql db table items

  1. client press «send request»
    Sql query will then set reqID and use {{localStorage.result}} and then set items for all rows that has data.

User can not update this after it is has been sent.

I do not want to have a list of 500 rows if client only whant to register 1 item

Today client sent his request by e-mail to me and i distribute his request to the support team.

Makes sense - I would suggest starting with a form component. Within the form, place a select component that allows the user to choose one of the four options (project, user, car, store):

Then add a file input component that allows the user to drop in an Excel file which is parsed into a table component in the form (if the format of the Excel is not always the same depending on the request, you will want dynamic columns):



Then for the "submit" action, you will want to (1) trigger an insert of the new task/request based on the data in the select drop down, and (2) using the ReqID returned by the first insert, trigger an insert of the task details from the table.

The devil is in the details - for example, if the inserts are different for the different types, you will need to use some conditional logic based on the select component - but hopefully this gives you a good start.

Hi @jg80

Maybe I can solve my need with a small script that will add one empty line. i do not know where to use the one you typed. Newby :slight_smile:

Here is my form I'm working with:

I have many things I want, but do not now how to solve yet, learning and asking as I go.

  1. Client is presented a empty table. it can be only 1 empty row or 5 empty rows as a starting point.
  2. Client start typing on the last row. (or last row has a action button "+")

  3. Retool: Add a new empty row for client.
  4. Client can delete row if he see that it not needed.
  5. Client can upload pdf files as attachements
  6. Client press send request.
  7. Retool create a record in DB

Point related to my Excel comment was:
When I mention excel. I was thinking of copy information from a excel sheet or word table to ReTool table grid with using Ctrl+C and Ctrl+V. not upload a excel file.
Copy from using Ctrl+C:
Paste to using Ctrl+V:

Not like now:

Hi @jg80

Ref. to your Script

let N = 3 //make this variable in your implementation
let newVarVal = variable1.value
for (let i = 0; i < N; i++) {
  const lastItem = newVarVal[newVarVal.length - 1];
  newVarVal.push(lastItem + 1);

How can I implement / use the script here om my action button?

I have only one row.

Client need to press + to add a new empty row.

Sorry for my lack of knowledge's and all questions.

It's just I want to move away from a e-mail and person depended process as today to a more flexible process.

You would set the initial value of the variable to [ x ] or however many rows you would like, and the script would be placed as the event action for the button (choose “run script”)

Hi @jg80

This is how i have implemented the script. but it will not add empty row to my table.
I do not know wat i'm doing wrong. Can you help with me?

For the data source of your table, you need to use the variable. Then, in your click event for the "add row" button, you run a script (no {{ }} in the script. Like this:

I included a number input where the number of rows to be added can be dynamically controlled. Also included a button that resets the table to [ 1 ]. I exported the app as a JSON so you can play around with it to get used to the process:
sandbox.json (28.8 KB)