Create Dynamically Growing Form

I want to make an "if this than that" rule creator, where users can continuously add new ifthan statements.

I cannot figure out a way to dynamically allow users to add new components inside a form component or any component for that matter. Closest can get is using the jsonSchemaForm, but the ui doesn't really lend itself to having multiple values in one row, if that makes sense.

Can anyone help? I'm thinking something like this:

3 Likes

Hi @szabon :wave:

Hmm :thinking: you know I never came across this before. I wonder if this is possible directly? What I can do is check-in with my teammates to see what they are able to say about this since I haven't seen/heard of something like this before. I'll circle back with you when I find out a more solid answer.

A workaround that I can think of for the time being is to render the entire form as you'd want it and conditionally hide the values of certain components dependent on values from elsewhere in your app. The use of conditionals such as JS ternary statements can get that going for you in the right hand inspector pane under the 'hidden' option.

Hi @Pawan,

Is there any update from your teammates?

Hi @james.laurence !

Hopping in to help here!

While I haven't seen something directly like this myself, I have seen a use case where someone embedded a listview component within a form. From there, users can add whatever number of components within the form.

Would this work for you?

Hey @DanBlonc

We're building a couple of apps to evaluate Retool and this is something we'd like be able to do. Dynamically adding and removing form rows has come up a couple of times.

Seems there's two options but both have pretty big drawbacks:

  • Use the JSON schema form: you're limited by json schema. (For example, a form row with a select field with options that come from a resource is not possible)
  • Use a list view: you can do this - but can't remove specific rows (i.e. allow a user to remove the nth row)

Are there other options we should consider? Cheers! First class support for something like this would be very powerful.

1 Like

I would also be interested in knowing if this is possible.

Can we get an update from the team? :slight_smile:

If it were me making this app, and in considering the current capabilities of Retool, I would definitely go with the a Listview.

I have successfully used Listview in a somewhat similar way where the user could add/edit/remove "records". The number and type of components within each view changes depending on the content.

2 Likes

Hi @bradlymathews

In your example, are you dynamically adding (or removing) form rows to your list view without doing any query to your database/API?

That's right. I only update my database when the user clicks the save button.

Alright, I got it. It is ListView that you have to use. And you CAN dynamically delete specific rows in the list as well. You just have to save the data for the list as a temporary state, and make the defaults for each section point to that data. Use the index of each component to identify which rows you want to delete and such. And set the length of the list to your temporary state. And for each component set it to change the temporary state, if that makes sense.

Its a bit of a pain to make the first time, but it works nicely. and in the end you have an array of objects that you can pretty easily plug into a query to update your db.

2 Likes

Looking up here for a solution, since the same situation came to me.

The form root entity has a one to many relationship with another object and it'd be nice to persist them all together, in one single atomic action, maintaining database consistence over the mentioned relationship.

Although I understood the proposal workaround, I'd say it is not a that rare scenario over a CRUD-kind effect of a form submission. It would be awesome to have a feature like that in here

1 Like

hey @bradlymathews thanks for sharing this workaround. Is there any chance you can share a simple app with this feature so that one can make an app on top of it to see how actually it works.

@victoria @Kabirdas : Hey retool, just thinking maybe there can be some kind of incentive for user who will share apps like this with retool and retool can enhance their template library with these type of templates or update the specific docs and add these.

Thanks

Heya!

I've actually been running across questions like this a bunch lately. Hopefully, some of these examples give you some ideas but it would be great to get more input from other community members. I'm definitely curious to see @bradlymathews's take on this as well.

Ideas

We definitely want to have ways to thank folks for their contributions on the forums. People put a lot of effort in and have created great posts that are super useful for others (including us).

1 Like

I stripped down my most advanced ListView app and created a whole Show and Tell post about it:

This isn't the only way to do it, but is a solid and full featured example on the subject.

3 Likes

+1 on adding first-class support for an input form element where an arbitrary number of the same type of input can be added, removed, or reordered! For a single project for my company, I can already think of two input types where we'd definitely want to do this.

1 Like

Hi @bradlymathews
How to delete particular list item through button (Delete Section button in your app ) without writing query.

Welcome to the forum @AkshyaK ,

I would recommend downloading my Advanced ListView example (referenced above) and making an App from it so you can see all of the nitty gritty details.

1 Like

@bradlymathews Thank you!