List Builder Component

Hi all,

This might be a dumb question, but…

Does there exist an ‘off the shelf’ UI component that has:

  • A ComboBox to add items to a list.
  • And below that a ‘list’ (i.e. labels in a vertical layout or something) that can be deleted?

I know there exists other ListBuilder’s, however I have a large data container which would be painful with ListSelect or TwinColSelect. (Hence wanting the combobox at the top).


(also this seems like it should be easy to do by creating a ‘custom’ component), are there any examples for creating custom ‘composite’ components?

Select with setNewItemsAllowed(true) could get close. You should experiement with the different types of select to see which one fits your needs the best. You can find the different types of select from the
Cheat Sheet
, their all in the lower right corner pointing at ‘AbstractSelect’.
The Book of Vaadin
has more info in chapter 5.11.5 on how to use newItemsAllowed.

However, I suggest you just handle the logic yourself with separate components. I have done a very similar case as you described for uploading files, showing a list of them, and deleting rows. It was a total of ~50 rows of code and most of it was about handling data streams. You only need a TextField and a Button to add items and a VerticalLayout / Table to show the data. You can use right click context menus in tables to delete rows, or a Embedded/Button with a delete-icon when using VerticalLayout.

Hope it helps.

Hi Jens,

That select is close to what I want. (Sorry didn’t see it before). I wanted to use it in a Form (i.e. need it to implement Field). I might go ahead and try to create a class that extends AbstractSelect (or something) so I can do this.

btw, I love that cheatsheet.