Dynamically creating elements with inputs

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 :pray:

Best,
Nino

1 Like

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

1 Like

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.

Thank you so much for helping a newbie out! :pray:

1 Like

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

1 Like

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.

hey @john44 !

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