Change dynamically created fields based on database rules

Coffee Lounge
1

Hello everyone

I’m creating an app with dynamic forms, based on control types admin user will set on admin plattform.

Forms are being created nice, but there are some rules like: change checkbox value field to "true"when other checkbox is set to “false”, set “yes” for 4 radio options when user select “xyz” on a dropdown list and so on.

I have some plans to accomplish this task but would love to know how you guys would develop the same task.

Since the controls are dynamic, I wonder in using javascript to change the fields values. It is not possible to use “hide/show” dynamics attributes due to the dynamic created fields, right?

Thank you for your time!

2

Hey @otavionestares, I have a super complex dynamic form in my app and I was just doing this kind of thing yesterday!

I do it using a data store. Mine is a booking form so I have two nested repeats:

repeat attendees_datastore.data
repeat questions_datastore.data

Each input has a value that is bound to a datastore value:

input id=“i_response_text” dmx-bind:value=“response”

Where response is a field in the responses_datastore.

Then I can dynamically set the values of each input to whatever I want to from any value change or button click.

There is then a fun technique to write out all the results to the database.

Am on my phone rather than my computer at the moment so can’t easily add more detail, but I hope that is a starter… ask me more questions and I’ll give you more details later!

Best wishes,
Antony.

1 Like
3

Thanks @Antony! Your control types are in the data store or you are using only inputs? Interesting approach! Could you show your code? I’m planning use data store to insert data in the DB!

4

I’ve also been working on a form with conditional bindings. I’m using ternary operators to handle conditions, eg:
dmx-bind:value="condition ? value1 : value2"
You can use nested ternary operators for more complex conditions.

In my case the conditions and values are coming from a database query. To keep the values short - so I can use value1 rather than serverconnect.data.query.value - I’ve put the form into a repeat. The query which populates the form may not return any data, so I use a ‘conditional repeat’ - again, using a ternary operator, defaulting to ‘1’.

1 Like
5

Here is some code…

Attendees repeat, repeating on the data store attendees:

<div id="rg_attendees" is="dmx-repeat" key="attendee" dmx-bind:repeat="attendees.data" class="">
        <dmx-value id="this_attendee_number" dmx-bind:value="$id"></dmx-value>

Typical field in the repeat:

<input type="text" class="form-control input_form" id="i_first_name" name="first_name" dmx-bind:value="first_name" dmx-on:updated="attendees.update({$id: $id},{first_name: i_first_name.value})">

So you can see it is bound to the value “first_name” of the datastore field, and when the value of the input is updated the the datastore is updated. This way you can change any inputs dynamically.

I use a flow to pre-load datastore that need to have information coming from the database. So in such a flow I have a repeat on the data from the database, and pass the values, along with some control information, into the datastore…

So in the following flow I am repeating on some prices I got from the database (get_activity.data.prices), doing some analysis about whether they should be shown to the user or not, then writing them into the “prices_to_show” datastore.

I hope that helps!
Antony.

flow
flow1814×601 63.6 KB

1 Like
6

Awesome @Antony! Thank you so much! BTW, nice flow!! :smiley:

1 Like