Row generator inside a dynamic collapse

Hello All ,

I am trying to achieve a functionality inside a form. The end goal is to have a user fill out multiple phones numbers, email , addresses etc. Right now i have added 3 dynamic collapses. Each successive dynamic collapse opens up with the new form to input the phone type and the phone numbers. I was wondering if there is an easier way to achieve this that a block just repeats itself if i click the plus icon. Think of it like an IOS contact where clicking the plus icon generates a new input row for the type of phone and the actual number.

Asking this as I set up the phone collapses , but the client also wants the email and addresses. I can repeat the same logic but it is very tedious and arranging th containers might become a problem. Thank You! The community is really awesome for finding solutions when stuck at a dead end!

I just started using wappler to come from a UI design role to actual development for demos. Really impressed with the whole software. Thanks wappler team!

Hi Anuj,

I am having trouble figuring out what you are trying to achieve. I know your site isn’t live but do you have a link to a site that does what you are trying to do as an example?

Brad ill try and see if there’s another site that does this. Will it help if i screen record my dev site and post it here ?

Yes, a recording helps if it isn’t to large of file.

Great. Ill get home and do it asap. Shouldn’t be a very large file. Thank You!

1 Like

65B90721-46DA-400C-B089-DF7275725D94.mov (7.3 MB)

Brad,

This is what I am trying to achieve across three categories: Address, Phone, Email. As you can see I only added about three + signs. Now I want to achieve the same for email and address, but i feel the container alignment might screw up. It would be awesome if I could somehow incorporate a repititve row generator that adds these rows dynamically at the click of the plus icon.

Thanks for the video, Anuj.

You likely won’t be able to do that as you will have to bind the fields to your database input steps and need as many columns in your database to accommodate them.

You could probably do it the way you are doing it now but limit it to say three phone numbers. There is no way to be able to bind any sort of dynamic form field to your input action.

I assume your form data is going into a database?

Yes Brad. It will go into a database. I guess I’ll just add the other ones similarly and work on the postioning of the columns

1 Like

Hi Anuj,

Have you had a look at Working with Arrays

As far as he database is concerned, you would need 2 tables, one for the single values and one for the multiple values linked to he 1st table - e.g. phone numbers etc.

Something similar could be achieved quite easily i think using 1 form and a table.
Start with a query to retrieve any numbers already added
Create a BS table with the current numbers already stored in the database table (you can play with the layout to match the form as closely as possible)

Create the input form below

On database success event of the form reload the numbers query which will refresh the table giving the impression it moves up to the table and also reset the form ready for the next entry
You could optionally add some animations to the process

1 Like

Thanks for all the help guys. I will look into these possibilities!