How to create Form with multiple fieldsets?

Vaadin 6 / 7 / 8 Framework UI
1

Hi again,

Is it possible to create a single Form with multiple fieldsets?

ie. the fields on a form are placed in multiple groups, like so:

http://images.devshed.com/da/stories/Building_Dynamic_Web_Forms_with_EXT_JS/img2.gif

thanks again, cheers.

2

Bump. Anyone?

I’ve tried changing a Form’s layout to VerticalLayout, then adding 2 FormLayouts to that. Each FormLayout has its own caption set.

However, the FormLayouts’ captions show without borders - which is not what I want. I’d like to see each FormLayout with borders running through their captions, so they look like fieldsets as shown here:

http://images.devshed.com/da/stories/Building_Dynamic_Web_Forms_with_EXT_JS/img2.gif

Any suggestions?

Or is there another way to achieve the same look with a single Form?

thanks again, regards.

PS. My current workaround is placing 2 Forms inside a Panel, and treating that whole Panel as a single Form. But this feels a little hacky, and requires that I bind a single itemDataSource multiple times, and call commit() multiple times etc.

3

An idea,

You could create two forms and one button as this :


savebutton = new Button("save", this, "commit");

	public void commit(){
		try {
			form1.commit();
            form2.commit();
		} catch (final InvalidValueException ive) {
			return;
		}
                   //your actions
	}
4

Thanks. And yes, that’s actually what I do right now as a work around.

I was wondering if there’s another way to do it to avoid having to manage multiple forms (which requires calling commit() multiple times etc).

cheers.

5

You can have a single form with your own, customized layout.

If you are prepared to define the layout in HTML, you can use a CustomLayout and name the divs/spans in it with the field names. Otherwise, subclass Form and override attachField() to control field placement in the layout.