How to add non-field components to a form

Vaadin 6 / 7 / 8 Framework UI
1

Hi

Sometimes it’s required to put in a form some components that are not fields.

For instance, I need to show a field which is html, not for edit, only to show. RichTextArea is not a choice. I cannot add a Label with HTML content because it’s not a field.

How to do it?

2

You can put such extra components directly in the layout of the form. You can get the layout, which is a FormLayout by default, with getLayout().

For example:

myform.getLayout().addComponent(new Label("This is a Label"));

Binding such components to the data source of the form would need to be done manually. I’m not sure how easy that would be, there could be some issues.

3

Ok, I tried it quick, binding an extra non-field component to the same data source works just fine, no problems. Just remember to have the source component immediate if the extra component is bound to its value.

See the
form example
. Select “Jupiter” and some moon, and the moon will be shown in the Label below.

    // The form
    Form myform = new Form();
    myform.setCaption("My Little Form");
    myform.setFormFieldFactory(new MyFieldFactory());
    
    // Create a bean to use as a data source for the form
    MoonBean moonbean = new MoonBean();
    BeanItem<MoonBean> beanitem = new BeanItem<MoonBean>(moonbean);
    myform.setItemDataSource(beanitem);
    myform.setVisibleItemProperties(new Object[] {"planet", "moon"});

    // Put a non-Field component to the form and bind it to
    // the selection result
    Label label = new Label(); // No caption as bound to data source
    myform.getLayout().addComponent(label);
    label.setPropertyDataSource(beanitem.getItemProperty("moon"));
4

Marko

It works fine.

Thanks
Aniceto

5

If the field contents you want to show comes from your item, another option would be to use the
CustomField
 component containing a Label.

Unfortunately, it is severely lacking examples of use and could use some other improvements as well when I have time to get back to it.