Create Dynamic Growing Form using List View

App Building
1

Hi Team,

We're trying to create a Retool App for create, update and view data.
But there is a requirement in the form, which cannot be done directly.

In our case

  1. We want a small section with few text input fields (Approx. 6) in the main form to be added multiple times by clicking a Add/+ button.
  2. That section's input fields should get added to the main form dynamically in a list format. Which makes the form grow dynamically.

I checked out one of the post suggesting to use JsonSchema, but it does not suit our requirement and also read this can be done using ListView.

So, can anyone please share a demo project and its documentation for reference.

Or if possible please share any retool sample which has this kind of feature.

2

Hi there. Not identical but I had a similar problem, in my case I was creating a form which had a large number of inputs (>30). If the fields are all of the same type (e.g. numeric), then it's easier to manage as a table:

  • I created a database table ("skeleton") with columns of: field_name_id, category, field name, sort order
  • I then created another table ("values") which can hold entries of: entry_id, field_name_id (from above), field_value
  • You then create a left join of those two which will always return all the fields from both tables, but field_value will by default be blank;
  • On save you just save the values into the second table (values)

In this example, the 'white' columns come from the 'skeleton', and the coloured columns come from the 'values' table

image
image1247×531 42.2 KB

For me this meant that I can add in new 'fields' by creating new entries in the "skeleton" table without having to create new form fields every time. In your case you could just have an add new row button or similar.

It does sound like you are describing a one-to-many relationship so, if using a conventional third-normal-form SQL database, a two-table structure would make more sense.
HTH

3

Actually, we want to collect the data and send it via REST API (AWS API).
Let me know what we can do to handle that :slight_smile:

4

Hi @vijayraj_incedo and @domjammoo here is an example of dynamically rendering inputs using a List View and a State variable:

This implementation was made on a Mobile app but the same outcome should be achievable on web apps. :slightly_smiling_face: