Dynamically creating elements with inputs

[ntabs]

Hi Bubblers,

I’ve been trying to figure out how to let users dynamically add elements with inputs and saving the data in those inputs in a field in the database.

Here’s a video reference of what I’m trying to build:

Use case: Adding variations to a product and within those variations, a couple of options.

So far. I figured how to dynamically let users add elements with the help of this thread: Dynamically adding elements

However, It is only limited to static elements. Whenever I tried to add input fields within the RG, I can’t seem to get the data within those fields.

I would appreciate any help that I could get and would be more than happy to help you in exchange

Best,
Nino

[hanan1]

Hi @ntabs,

it seems like your problem is with capturing the data entered in the input fields and that could be caused by 1 of 2 problems:

1. you don’t have the action set up correctly to update the variant or option name when the respective input field’s value changes.
2. there is a problem with the data sources in the nested groups in your UI. If this is the case the information you capture is not linked to the correct product/variant in the DB.

here is a working demo.

And here it is in action:
https://drive.google.com/file/d/1oVGCAsQDyP7xU5gBobqGJ1__gfLbDgjh/view?usp=sharing

[ntabs]

Hi @hanan1,

I appreciate you making the time and effort! Thank you so much, I’ve been stuck in this for a couple of days now.

Turns out, I was missing out on this feature:

I thought I’d need to use an external plugin like BDK to get the data from the inputs in the RG as stated here [New Plugin] Bdk Utilities - #48 by gaurav

Moreover, In dynamically adding or decreasing the elements (add/delete variants and options) I decided to use custom states and list of numbers as the data source and alter the number through an action as stated here :

I decided it would be good to keep the DB clean without using data types such as “elements” and capture the data from the inputs using BDK.

Let your users dynamically add or decrease the number of elements

Hi Bubblers, Pretty sure most of you already know this but I hope those who are still starting out will learn from this (I’m one of them) You can let your users dynamically add or decrease the number of elements To do this you would need to make use of: Repeating groups Custom states Toolbox’s list of numbers Steps: Create a custom state for either the page or the element [image] Add Toolbox’s list of numbers and use number 1’s custom state as the length of the list [image] Add …

Thank you so much for helping a newbie out!

[hanan1]

Awesome! glad it worked and good job implementing this tip for adding/removing elements.

[john44]

Hi @hanan1 Great video tutorial. I’m also trying to do something similar. I was wondering if you could share the working demo with me? the demo link above seems to have a permission restriction on it.

[hanan1]

hey @john44 !

glad you find it useful sure, the link is now open you can try it again

[priyanka.vijayakumar]

Thank you so much! Your example helped avoid me a lot of stress!