Vaadin ComboBox with values and IDs

Question

I have defined a ComboBox which allows the user to select a contact from his contact list. The ComboBox is showing the contact name, but that can not really be used to map to the real contact: the contact ID is needed. My problem is that I do not know how to populate the Vaadin ComboBox with linked values and IDs, but only showing the values.

// Add all organization contacts to the drop-down
for (Contact contact : organizationContacts) {
    contactName = contact.getName();
    contactId   = contact.getId();
    _logger.debug("Adding contactName=" + contactName + " contactId=" + contactId + " to person with id=" + personId);
    contactNameCombo.addItem(contactName);
}

// Add the contact of this person, and select it in the drop-down
contactName = person.getContact().getName();
contactId   = person.getContact().getId();
contactNameCombo.addItem(contactName);
contactNameCombo.setValue(contactName);

As you can see in the code above, I am adding the contactName to the ComboBox, but I do not know how to add also the contactId so that I can know later, from the selected entry, which ID must be used to update the database.

Answer 1

There are several ways to approach this : the most flexible here is to configure the combobox to use a named property as a caption. See Book Of Vaadin on Selecting Items for more details.

// Set the caption mode to read the caption directly
// from the 'name' property of the item
contactNameCombo.setItemCaptionMode(Select.ITEM_CAPTION_MODE_PROPERTY);
contactNameCombo.setItemCaptionPropertyId("name");

// Add all organization contacts to the drop-down
for (Contact contact : organizationContacts) {
    contactName = contact.getName();
    contactId   = contact.getId();
    _logger.debug("Adding contactName=" + contactName + " contactId=" + contactId + " to person with id=" + personId);

    // Note : the itemId of the item is the contactId
    Item item = contactNameCombo.addItem(contactId);
    item.getProperty("name").setValue(contactName)
}
// Add the contact of this person, and select it in the drop-down
contactName = person.getContact().getName();
contactId   = person.getContact().getId();
Item item = contactNameCombo.addItem(contactId);
item.getProperty("name").setValue(contactName)

// Using the itemId (which = contactId) to select the given contact
contactNameCombo.setValue(contactId);

Answer 2

The solution given by @Charles Anthony didn't work for me either. In Vaadin docs (https://vaadin.com/book/-/page/components.selecting.html) I have found the following code:

// Set item caption for this item explicitly
select.addItem(2); // same as "new Integer(2)"
select.setItemCaption(2, "Deimos");

which works for me.

Answer 3

Vaadin 7:

    statusSelectCombo.setItemCaptionMode(ItemCaptionMode.PROPERTY);
statusSelectCombo.setItemCaptionPropertyId("courseOptionValue");

   IndexedContainer iContainer = new IndexedContainer();
   iContainer.addContainerProperty("courseId", String.class, "");
   iContainer.addContainerProperty("courseOptionValue", String.class, "");
    String addItemId="";
    String addItemCaption="";
for (int i = 0; i < comboItemsArray.length; i++) //String[] comboItemsArray
{
    log.debug("comboItemsArray["+i+"] "+comboItemsArray[i]);
    addItemId= comboItemsArray[i];
    addItemCaption=comboItemsArray[i];
   Item newItem = iContainer.getItem(iContainer.addItem());
   newItem.getItemProperty("courseId").setValue(addItemId);
   newItem.getItemProperty("courseOptionValue").setValue(addItemId);
}
statusSelectCombo.setContainerDataSource(iContainer);

ValueChangeListener listener = new Property.ValueChangeListener()
{
    public void valueChange(ValueChangeEvent event)
    {
    statusSelectCombo.getItemIds();
    Property changedProperty = event.getProperty();
    Object selectedStatus = (Object) statusSelectCombo.getValue(); //it is get Value but gives object ID as an Object
    Item rowItem = statusSelectCombo.getItem(selectedStatus);
    final String selectedCourseId = (String) rowItem.getItemProperty("courseId").getValue();        

    }
};

Answer 4

Charles Anthony is absolutely right.

You can also take the advantage of a Container like BeanContainer or BeanItemContainer for example (more information here) to add your contact object to your ComboBox. You'll need to fill up your container and add it with

contactNameCombo.setContainerDataSource(YOUR_CONTAINER);

to your ComboBox.