FormLayout, Custom Components, and the "required" indicator

Flow
1

I built a custom component extending from AbstractField. I create my custom field, call setRequiredIndicatorVisible(true) and then add it to a FormLayout. Everything works, except that the “required” indicator is not displaying next to the label. The Binder validation behavior appears to be correct however.
What secret sauce am I missing that is needed to get the required indicator to display?

2

The secret is to use “CustomField” instead of AbstractField. The first one has a client side implementation - the latter has not

2 Likes
3

Yup :+1: For me it has become the default approach to extend CustomField, even in very simple cases. At some point I (or somebody else using my component) figures out some of the “common field features” is needed, and CustomField is clearly the easiest way to get them all implemented. I even wrote a piece about the topic a year ago.

4

Saying the same thing as the two other replies but from a different perspective:

  • AbstractField is intended for components built like Vaadin’s built-in ones, i.e. with a client-side implementation for generic field things like the label, the error message area and the required indicator. This class is only about handling the value.
  • CustomField is intended for components built like typical server-side compositions where the generic field things are to be provided by the base class. This class handles both the value and the generic field things like the label, the error message area and the required indicator.
5

Thanks for the pointer - I was able to make that work. I’m not sure why I didn’t do it that way initially as I had read that documentation page just recently. The only extra bit required was to implement HasValidator and define a custom Validator to do what I needed. Thanks everyone for the responses.