Example extending Abstract Field

I am trying to port (i.e. rewrite) a Vaadin application from Vaadin 7 to 14/flow). I am starting from some base components I made for V7. One of them is an image field that contains an image, an upload component and a clear button. In V 7 I a CustomField. In flow CustomField has no more the initContent method so, question 1:how do I assemble the resulting component?

Maybe I can use a composite, but being composite based on an HTML element, question2: how do I style it, or at least assign a class to that element?

Ideally I would see an example of a field extending AbstractField and/or AbstractCompositeField. Question 3: where can I find such examples

Finally the upload component is nice but takes a lot of space, The button is all what I need. Question 4: Is there how to hide the rest (at least in part)? The drop target (at right of button) for example could be the button itself or still better the image (if I can set it) and I need no border.

You can use the getContent() method of Composite to access the root Component / Element. So for example this would work to set a CSS class to your composite:

public class MyComposite extends Composite<Div> {

    public MyComposite() {
        getContent().add(new Span("Some content"));


Here’s an example that styles an Upload, although in the opposite direction as your requirement: https://cookbook.vaadin.com/large-upload-area . Same techniques could be applied.

Thank you very much Olli, that’s exactly what I was looking for, I see that the upload-area is quite customizable. And special thanks for the example that made me find another precious source of tricks: the cookbook that I didn’t know (Yep I got some startup links from Vaadin but this one was missing and is really welcome).

In the mean time I also found getElement() instead of getContent(), but I see that getContent() is more strongly typed - thus better.



Still do not understand some things from the recipe: it is not a question of only adding elements but also to remove some. In this case I suspect shall add on the shadow DOM and probably take a deep look at the Download component to understand its internals.

But a question is where are the recipes sources? By the way I see the recipes are not part of the documentation (in the sense that there is no link to the recipes - or I did not found it). The provided example reads:

@CssImport(value = "./recipe/large-upload-area/large-upload-area.css", themeFor = "vaadin-upload")

Where is large-upload-area.css and where is vaadin-lumo-styles/badge.js?

The large-upload-area.css is there, you just need to select it from the tabs on top of the source area. vaadin-lumo-styles/badge.js comes from the Lumo dependencies (documented here: https://vaadin.com/docs/themes/lumo/badges.html). You can find the Cookbook sources here: https://github.com/vaadin/cookbook

Thanks Olli, I was completely missing the gitgub page. Unhappily Vaadin documentation is scattered due to new releases adn googling for anything is difficult. I think this is a problem with most frameworks.

Yep the large area is there, but how did you get rid of the upload button? I tried to do the same bit the button and the original message are still there.

These are the styles that hides the part that contains the upload vaadin-button:

) [part="primary-buttons"]
  display: none;

The documentation on vaadin.com is being revamped and the new documentation’s beta version can be seen here: https://vaadin.com/docs-beta/latest/ - now’s your time to submit feedback!