How to build a form that has multiple dynamic parts

I need to build a form in Vaadin that has a bunch of fields. Some of the fields are radio button groups and when you change the selection the fields under the radio button also change. All the data for the form are modeled as a single class where some of the fields are declared as interfaces which can have subclasses.

When filling out the form, clicking on a radio button means choosing one of the subclasses. Then the user has to fill out the fields of that subclass. The subclasses can have different number of fields, different names and different types.

I am struggling to figure out how to use Binder for this in Vaadin.

Some avenues I have explored:

  1. build a new model for Vaadin only where the fields all have specific types and other subclasses are null when not in use, then convert this to the actual model on save/on load - for this one I dislike the need of building the whole structure because it’s big, leaving bunch of the fields as null does not feel clean
  2. represent the dynamically swapped sections as AbstractCompositeField that have their own internal binders for validation but output the value of the whole subclass as one object - for this one, setModel on the composite does not seem to trigger the parent binder setter, I am also not sure if this is even the right approach

Binding aside, what’s the best way to the form itself? The best I came up with is that in the radio button listener I remove the fields I don’t need and re-add the fields I want. That does not seem very efficient either.

I’m using a Binder hierarchy for this with a “parent” Binder that keeps track of common properties and the radio button and one or many (List) of Binder that handle the different sub parts of the form. Once a radio group is selected I destroy the old sub form + binder and add a new sub form + binder as children. (Don’t worry about efficiency - we talking about milli seconds)

The final touch is the save / send button where I iterator over the parent + all current child binder to ensure everything is valid.

you dont happen to have a shareable example of this?

What does your model look like? The bean that you bind to the parent binder, does it contain all the sub-parts of the form as well or are those separate?

I don’t know if I need to somehow sync the parent binder with the sub-binders or if I should keep them separate until validation+saving.

Sadly nothing open source I’m allowed to share.

Simple example:

Person

  • firstName
  • lastName
  • addressType (enum: local, international)
  • LocalAddress
  • InternalAddress

The parent binder would have the first 3 properties and I would create 2 additional binder+forms for the different types of addresses and swap those depending on the selected address type.

I’m normally not worried about syncing cause I use setBean

got it, so if addressType == local then the internalAddress is gonna be null right?

I’m normally not worried about syncing cause I use setBean

but you do have to sync the local/international address fields manually from the child binders right?

I would null the other fields, correct :slightly_smiling_face:

In my radio button group change listener I would go with something like this:

switch(value)
Local → international = null, local = new Local(), new Subform(local)
International → the opposite