Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Arrange Components inside a Form
I want to arrange componenets or fields inside a Form in a specific way. Right now the form looks like the attached snapshot.
I want something like this
Caption Caption Caption
Field Field Field
Caption
Field
any suggestions On how to change the layout within the form?
hl = new HorizontalLayout();
hl1 = new HorizontalLayout();
vl1 = new VerticalLayout();
vl2 = new VerticalLayout();
// selectAction = new Select("Choose Action");
final ComboBox selectAction = new ComboBox("Choose Action");
performAction = new Button("Apply Action");
resetAction = new Button("Reset");
searchButton = new Button("Search");
ordersSearchForm = new Form();
// subForm = new Form();
// Add some items
selectAction.addItem("A");
selectAction.addItem("C");
selectAction.addItem("N");
selectAction.setNullSelectionAllowed(false);
ordersSearchForm.setLayout(hl1);
hl1.addComponent(ordersSearchForm.getField("OrderInt"));
ordersSearchForm.addField("OrderInt", new TextField("Ord Number"));
ordersSearchForm.addField("ItemInt", new TextField("Item Number"));
ordersSearchForm.addField("Start Date", new DateField("Start Date"));
ordersSearchForm.addField("End Date", new DateField("End Date"));
ordersSearchForm.getLayout().setMargin(true);
ordersSearchForm.addField("selectaction", selectAction);
ordersSearchForm.getField("OrderInt").setRequired(true);
ordersSearchForm.getField("OrderInt").addValidator(new IntegerValidator("Order Number must be integer"));
ordersSearchForm.setImmediate(true);
ordersSearchForm.setCaption("Orders Search Form");
ordersSearchForm.setDescription("Enter the order number you want to search");
ordersSearchForm.getFooter().addComponent(searchButton);
ordersSearchForm.getFooter().addComponent(performAction);
ordersSearchForm.getFooter().addComponent(resetAction);
Not sure, if I understood your question correctly, but you can use a custom layout with a Form using Form#setLayout().
Note: In the Book of Vaadin, the section about Forms says, that setLayout() gets described in the section about FormLayout, which is not the case (as far as I have seen while skimming through the pages).
The easiest way is probably to use something like the FormBinder add-on.
There are other possibilities for customized form layouts explained elsewhere on the forum but they may require overriding attachField() etc.
The Form component also supports HTML layouts using a CustomLayout, in which case it performs mapping based on element names (vaguely similar to FormBinder).