Complex Form Layout (Columns and Collection<Item> fields)

I’m trying to code a very complex form. I need to be able to put fields in two columns (side-by-side) as well as having a table which represents a List, where my Elements type is a model item, and the list represents one of the fields of my model (for which this form exists).

I’m considering writing a custom form, but I’m a bit afraid of having to rewrite a lot of Form functionality, and I’m a bit lost on how to do so.

How may I put my form on two columns?
How can I put a Table which represents my List field? (N.B. this table must ‘span’ across the above two columns)
How am I able to put a button for this Table?

Should I consider writing my own custom Form components? Where can I get reference material for this?

Thanks in advance,

Shameless… bump…

In my opinion it sounds that you have very special case, with only a few fields. How about just forgetting the Form? It might be easier to handle those fields if they are completely separate - and it shouldn’t be a big hassle when the amount of fields are only a few.

Actually it’s quite a big form, I just presented the more complicated parts of it (the ones I’m unsure how to handle). As there any reference material I can use for creating custom forms? (I’m thinking about validation for example)

I guess I did a wrong assumption when saying that the form has only a few fields. I somehow interpret ‘fields in two columns’ = two fields in separate columns. Is the table the only field that is a special case? One option is to have the table outside the form and handle only that component separately. On the other hand, I guess using a formfieldfactory will give the power you need to build up the different fields, and you don’t have to extend the form itself. Just use a gridlayout as content, form.setContent(new GridLayout(1,2));

Check the
Book of Vaadin
, “Generating Proper Fields with a FormFieldFactory” under 5.17.2 Binding Form to Data

Excellent Jens! If everything stays the same our mega-form should have 2 List Tables and one even more complex Tree/Table element (which I won’t even get into, it’s a List, where Bean1 has a List, where Bean2 has a List =D)
We’re already using a FormFieldFactory, I suspect I’ve got to dig through and learn how Vaadin’s Field class works exactly. Will look into using a GridLayout.

Thanks again,
I’ll come back tomorrow (probably ;-D)

Hi Jens!

I am also looking to do something like this on a form, I can however not find the function setContent on the Form class.


Is it possible to use a grid layout and still add fields to the form with addField?

Cheers, Lars


Thanks Dale, when you add fields to the form (that has a gridlayout), how do you specify where in the grid the field should end up?

I have the same question. I have not (yet) found any example of a Vaadin Form with its fields arranged in a GridLayout. An example of that would help me. :slight_smile:

Thank you.


What I did for similar situation is extend Form and override attachField(). In the attachField() method I can put the field anywhere I wanted.

public class ComplexForm extends Form {
    public Layout myLayout;
    public FormLayout ifYouWantCaptionOnLeft;
    public ComplexForm() {
          myLayout = GridLayout(); //you can choose any layout

    protected void attachField(Object propertyId, Field field) {
         if (propertyId == something) {
         } else if (if you want caption on left of field) {



Personally, I’m a big fan of CustomLayout but you can use any Layout you want.

EDIT: Forgot to mention few caveats. DO NOT call setLayout in the form and instead of adding the form to a Container, you’ll have to first override getLayout() and call that method.

I did not want to overrite
, but eventually I did that too. I don’t like the awkward succession of
, this is not very performant. Vaadin
are good, but they lack a simpler way of attaching fields wherever one wants in a form.


Awkward this is, but for tests that can be performed with “==”, the cost is probably in the nanoseconds per invocation at least after JIT has optimized the code.

In general, for a simpler way to manage forms and data binding, take a look at Vaadin 7 FieldGroup or the
FormBinder add-on
for Vaadin 6. How much they help depend on your use case (how static or dynamic the forms are, …) but they should at least make the data binding and layout aspects less dependent on each other if not providing more in your case.

I dont make my tests with [i]

[/i], but rather with
. Anyway, it is awkward to have a long succession of
, as though the fields were special cases. The fields are just normal cases where the developer wants to control the position.

I hope that future Vaadin will separate more the intelligence on the fields, tightly linked to the Form, and their position.


That is exactly the role of FieldGroup, which effectively replaces Form in Vaadin 7.

Cool !

Hi I am uisng vaadin 7.I have stuck in one place and need guidance.
I have a pojo class with four fields(
private long IDFactorRegla;
private Set Agrupación;
private Set values;
private Double Tasa;)

I also have myForm extending formlayout with two Textfield and a listselect component, based on the itemselected from listselect component , the corresponding combobox will be visible.

Based on the items selected in combobox, i am storing all in a hashset and setting the field ‘values’.
I am using beanfieldgroup, and populating them in grid.
But i am not getting the satisfying result.The values field in grid is not populating based on the items selected by combobox.

Please sugggest me what is right approach to solve my problem.