How to split up form fields into different tabs?

I have a Person class and Student class. A Person class contains common fields like Name. The Student class contains specific fields for students like Grade. Since there are a lot of form fields (common and specifics) so I want to split them up into different tabs using Tabsheet component. One tab called “Common” and the other tab called Specific.

Both of these tabs made up a Student object class. I have a Student POJO in the backend that maps to these form fields.

How do I display only specific form fields? On “Common” tab only has Name field. On “Specific” tab, only Grade field?


It depends a bit what kind of items you are binding the form to; can the fields be committed in parts or only as a whole, etc.

There’s at least
this simple example
, which assumes that you can commit the fields separately for each step (that may not be possible with items from a database).

The example would need a bit more logic for navigating between the tabs safely. For example, now you can go back from tab 2 to tab 1, make modifications there,
click OK, but go to tab 2, thereby missing validation of the first step.

I don’t need to store any data into a database. The reason I have a POJO is because I might be using Drools in the backend. The whole reason why I want to split up the field forms is for organizational purpose. I could put all the field forms onto one page but that’s too much.

The Vaadin FieldGroup Webinar answered my answer.