Adding container in form removes input fields from form parameters

Question and Answers JavaScript
1

I added containers on a form to make it more visually digestible. Having done that, I can’t now use the input fields in the JS conditional show for the button. It simply isn’t aware of the inputs in the containers (that are within the form).

Expected behaviour that works without the containers is that in the JS conditional, you start writing {{form1.data.inputx
In doing this you will see all of the available input fields from the form.

Actual behaviour, with the addition of containers
in typing {{form1.data.inputx, we only see the inputs that are in the form but outside of containers in the list

Things I tried

  • I tried to write the input field name regardless, but the button ignores those container fields
  • I tested one of the same fields outside of the container, but within the form, this works fine and the button shows as active if the conditional format is met.
  • I deleted the containers (which is fiddly because you have to remove content one by one and push it back into the form). it now works as expected but looks a bit pants.

Not sure if a bug or maybe I shouldn’t be using containers for UX?

2

Hey @tristan.dibbens! Welcome to Appsmith community.

When you say the form is not good (easily digestible), can you please share the screenshot of what you mean?

Also, the elements inside a container don’t work as a child widgets, i.e. you can’t reference them like you can do it in a form. Hence your are getting blocked. I suggest you should use the JSON form for this.