The Vaadin Wiki is temporarily in read only mode due to large recent spam attacks.

UX

Configure ComboBoxes wisely

WARNING: This wiki page was last edited over a year ago and might be outdated.

The Vaadin ComboBox is a versatile input field with lots of settings that change its behavior. The default settings are a good start, but are not necessarily suitable for all situations. Configure your ComboBoxes properly to avoid usability issues and make use of their advanced features.

Null selection #

By default, the ComboBox component has “null selection” enabled, which means that the drop down list contains an empty element that maps to null. If you don’t want users to be able to select “none”, you should disable null selection with setNullSelectionAllowed(false).

If you do want to allow null selection, you might want to set a specific caption for the empty item by adding a “dummy” option to the list and setting it as the null selection item:

#!java
ComboBox cbExample = new ComboBox();
cbExample.setNullSelectionAllowed(true);
cbExample.addItem(“[ None ]”);
cbExample.setNullSelectionItemId(“[ None ]”);

Consider surrounding the null item’s caption with brackets or dashes to distinguish it from the other options, and make sure that it ends up in the beginning or end of the list.

Enable text input only when appropriate #

The Vaadin ComboBox can behave either as an actual combo box (i.e. combining a textfield with a dropdown list), but also as a normal dropdown menu (like the html <select> element) without text entry. This is controlled through the setTextInputAllowed() method.

Text input is great if 1) the list is very long, where using the textfield as a filter helps in finding the correct item, or 2) if users need to be able to add new values to the list (in which case adding new items must also be enabled using setNewItemsAllowed(true)).

#!java
ComboBox cbEducation = new ComboBox(“Education”);
cbEducation.setInputPrompt(“Choose degree from list or enter your own”);
cbEducation.setTextInputAllowed(true);
cbEducation.setNewItemsAllowed(true);

If only items in the list can be chosen, and the list is quite short (say, less than 10 entries), it’s actually better to disable text input, because that makes the click target for opening the dropdown cover the entire field, instead of just the small arrow-icon/button at the end (dropdown menu click-target areas marked in pink below):

(Actually in these cases, you might want to consider the NativeSelect, which is really just a wrapper around the normal html <select> element. But then you can’t have an input prompt or any of the other nice features of the ComboBox.)

2 Attachments
16801 Views
Average (4 Votes)
Comments
How to get the text inside the comboBox to a string.
Posted on 7/8/15 7:19 AM.
Normally, when you create a combobox, you bind it with a BeanItemContainer or a IndexedContainer, that should have a "caption" attribute, when you need to get the caption of the combobox, get the value of the combo "getValue()" this retrieve the item selected, and then get the "caption" attribute of the item selected.

IndexedContainer indexedContainer = new IndexedContainer();
indexedContainer.addContainerProperty("id", Integer.class, null);
indexedContainer.addContainerProperty("caption", String.class, null);

Item item = indexedContainer.addItem(0);
item.getItemProperty("caption").setValue("FEMALE");

item = indexedContainer.addItem(1);
item.getItemProperty("caption").setValue("MALE");

ComboBox comboBox = new ComboBox();
comboBox.setContainerDataSource(indexedContainer);
Posted on 7/5/16 1:48 AM in reply to Alexis Toby.