multiSelectComboBox

<multiSelectComboBox id="multiSelectComboBox"/>
<multiSelectComboBox itemsEnum="io.jmix.uisamples.entity.Day" clearButtonVisible="true" width="17em"/>

@ViewComponent
protected JmixMultiSelectComboBox<String> multiSelectComboBox;

@Subscribe
protected void onInit(InitEvent event) {
    multiSelectComboBox.setItems("CSS", "HTML", "Java", "JavaScript", "JSON", "Kotlin", "XML");
    multiSelectComboBox.select("Java", "Kotlin");
}

@JmixEntity
@Table(name = "HOBBY")
@Entity
public class Hobby {
    /* attributes */
}

@JmixEntity
@Entity
@Table(name = "USER_")
public class User {

    /* other attributes */

    @JoinTable(name = "USER_HOBBY_LINK",
            joinColumns = @JoinColumn(name = "USER_ID"),
            inverseJoinColumns = @JoinColumn(name = "HOBBY_ID"))
    @ManyToMany
    private List<Hobby> userHobbies;
}

<data>
    <instance id="productDc"
              class="io.jmix.uisamples.entity.Product"
              fetchPlan="_local">
    </instance>
    <collection id="productTagsDc"
                class="io.jmix.uisamples.entity.ProductTag"
                fetchPlan="_local">
        <loader id="productTagsDl">
            <query>
                <![CDATA[select e from ProductTag e]]>
            </query>
        </loader>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
<layout>
    <multiSelectComboBox id="multiSelectComboBox" width="15em" label="Product tags"
                         dataContainer="productDc" property="tags"
                         itemsContainer="productTagsDc"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

@ViewComponent
protected InstanceContainer<Product> productDc;
@ViewComponent
protected Span spanValue;

@Autowired
protected Metadata metadata;

@Subscribe
protected void onInit(InitEvent event) {
    Product product = metadata.create(Product.class);
    productDc.setItem(product);
}

@Subscribe("multiSelectComboBox")
protected void onMultiSelectComboBoxFieldValueChange(
        TypedValueChangeEvent<JmixMultiSelectComboBox<Product>, Product> changeEvent) {
    spanValue.setText(getSelectedTagsInstanceName());
}

protected String getSelectedTagsInstanceName() {
    return productDc.getItem().getTags()
            .stream()
            .map(ProductTag::getInstanceName)
            .collect(Collectors.joining(", "));
}

<multiSelectComboBox metaClass="Hobby"
                     itemsContainer="userHobbiesDc"/>

<data>
    <collection id="productTagsDc"
                class="io.jmix.uisamples.entity.ProductTag"
                fetchPlan="_local">
        <loader id="productTagsDl">
            <query>
                <![CDATA[select e from ProductTag e]]>
            </query>
        </loader>
    </collection>
</data>
    <multiSelectComboBox id="multiSelectComboBox" label="Product tags" itemsContainer="productTagsDc"/>

@Install(to = "multiSelectComboBox", subject = "itemLabelGenerator")
protected String multiSelectComboBoxItemLabelGenerator(ProductTag productTag) {
    return "#" + productTag.getName();
}

<multiSelectComboBox id="iconsMultiSelectComboBox" clearButtonVisible="true"
          label="Icons"
          width="20em"/>

@ViewComponent
protected JmixMultiSelectComboBox<VaadinIcon> iconsMultiSelectComboBox;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    iconsMultiSelectComboBox.setItems(VaadinIcon.values());
}

@Supply(to = "iconsMultiSelectComboBox", subject = "renderer")
protected Renderer<VaadinIcon> multiSelectComboBoxComponentRenderer() {
    return new ComponentRenderer<>(vaadinIcon -> {
        HorizontalLayout contentBox = uiComponents.create(HorizontalLayout.class);
        contentBox.setPadding(false);

        contentBox.add(vaadinIcon.create());
        contentBox.add(vaadinIcon.name());

        return contentBox;
    });
}

<multiSelectComboBox id="declarativeMultiSelectComboBox" label="Customer"
                metaClass="Customer">
    <itemsQuery class="io.jmix.uisamples.entity.Customer"
                searchStringFormat="(?i)%${inputString}%"
                escapeValueForLike="true"
                fetchPlan="_local">
        <query>
            <![CDATA[select e from Customer e where e.name
            like :searchString escape '\' order by e.name asc]]>
        </query>
    </itemsQuery>
</multiSelectComboBox>

@Autowired
protected DataManager dataManager;

protected Collection<Customer> customers;

@Subscribe
protected void onInit(InitEvent event) {
    customers = dataManager.load(Customer.class).all().list();
}

@Install(to = "programmaticMultiSelectComboBox", subject = "itemsFetchCallback")
protected Stream<Customer> programmaticMultiSelectComboBoxItemsFetchCallback(Query<Customer, String> query) {
    String enteredValue = query.getFilter()
            .orElse("");

    return customers.stream()
            .filter(customer -> customer.getName() != null &&
                    customer.getName().toLowerCase().contains(enteredValue.toLowerCase()))
            .skip(query.getOffset())
            .limit(query.getLimit());
}