Adding cam-variable input fields in javascript in embedded forms

Hi everyone,
I’m using a Spring Boot generated project (if that matters), and I’m using an html embedded form.
I am trying to add input fields (checkboxes) using javascript (because they are in a list that can change, so I found it easier to do it in a “for” loop).
So I’m adding the checkboxes using the Element.innerHtml method, which seemed to work, until I submitted the form : the variables were not uploaded in the instance variables. (The same exact html code works if I put it directly in my form in html.)
When I check the source code in my browser, I see that some classes are added to the other inputs I made :

class=“ng-valid ng-valid-cam-variable-type ng-not-empty ng-valid-parse ng-pristine ng-touched”

which are not added on the fields that were added using JavaScript.
I tried adding them manually, which unsurprisingly didn’t work.
I am guessing that it has to do with the lifecycle of the form, and that my JavaScript is executed too late, but putting it at ‘form-loaded’ instead of ‘variables-restored’ did not work either.
I have been struggling on this problem for a few days now and can’t seem to find the solution, any help would be greatly appreciated, thanks in advance !

Hi,
I still need help with this, I feel like the solution must be easy but I can’t find where I messed up.

Hello @whynotworking ,

in this case I would use two-way-databind to have the form data as JS object that can then be submitted in the correct lifecycle hook. Please find an example here:

https://docs.camunda.org/manual/latest/reference/forms/embedded-forms/javascript/lifecycle/#implementing-custom-fields

Hope this helps. I know this is a bit more code, but conditional form fields are complex.

Jonathan