Directory

Lookup Field

The Lookup field component allows you to search a specific record

View larger

Close

View larger

Close

View larger

Close

Compatibility

• Version 1.x.x -> Up to Vaadin 17.x.x
• Version 2.x.x -> Vaadin 17+
• Version 23.1.x -> Vaadin 23.1.x
• Version 23.2.x -> Vaadin 23.2.x
• Version 24.x.x -> Vaadin 24.x.x

Description

The Lookup field component allows you to search a specific record with:

• a combobox
• a dialog and a grid that can contains all the fields

How to use it

Create a new component LookupField and use it like a Field.

The API is similar to a Vaadin Combobox.

Examples

Basic example with String

    public SimpleView() {
        LookupField<String> lookupField = new LookupField<>();
        List<String> items = Arrays.asList("item1","item2", "item3");
        lookupField.setDataProvider(DataProvider.ofCollection(items));
        lookupField.getGrid().addColumn(s -> s).setHeader("item");
        lookupField.setLabel("Item selector");
        add(lookupField);
    }

Basic example with an Object

    public PersonView() {
        LookupField<Person> lookupField = new LookupField<>(Person.class);
        List<Person> items = getItems();
        lookupField.setDataProvider(DataProvider.ofCollection(items));
        lookupField.setGridWidth("900px");
        lookupField.setHeader("Person Search");
        add(lookupField);
    }

    private List<Person> getItems() {
        PersonService personService = new PersonService();
        return personService.fetchAll();
    }

Internationalization

You can change the captions of the buttons, dialog header, serach label.

    public I18nView() {
        LookupField<String> lookupField = new LookupField<>();
        List<String> items = Arrays.asList("item1","item2", "item3");
        lookupField.setDataProvider(DataProvider.ofCollection(items));
        lookupField.getGrid().addColumn(s -> s).setHeader("item");
        // set the label of the field
        lookupField.setLabel("Item selector");
        //set the header text of the dialog
        lookupField.setHeader("utilisateurs");
        // translate the cpations of the component
        lookupField.setI18n(new LookupField.LookupFieldI18n()
            .setSearcharialabel("Cliquer pour ouvrir la fenêtre de recherche")
            .setSelect("Sélectionner")
            .setHeaderprefix("Recherche:")
            .setSearch("Recherche")
            .setHeaderpostfix("")
            .setCancel("Annuler"));
        add(lookupField);
    }

Demo

You can check the demo here: https://incubator.app.fi/lookup-field-flow-demo/

Missing features or bugs

You can report any issue or missing feature on github: https://github.com/vaadin-component-factory/lookup-field-flow

Sponsored development

Major pieces of development of this add-on has been sponsored by customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

    public SimpleView() {
        LookupField<String> lookupField = new LookupField<>();
        List<String> items = Arrays.asList("item1","item2", "item3");
        lookupField.setDataProvider(DataProvider.ofCollection(items));
        lookupField.getGrid().addColumn(s -> s).setHeader("item");
        lookupField.setLabel("Item selector");
        add(lookupField);
    }

public I18nView() {
        LookupField<String> lookupField = new LookupField<>();
        List<String> items = Arrays.asList("item1","item2", "item3");
        lookupField.setDataProvider(DataProvider.ofCollection(items));
        lookupField.getGrid().addColumn(s -> s).setHeader("item");
        // set the label of the field
        lookupField.setLabel("Item selector");
        //set the header text of the dialog
        lookupField.setHeader("utilisateurs");
        // translate the cpations of the component
        lookupField.setI18n(new LookupField.LookupFieldI18n()
            .setSearcharialabel("Cliquer pour ouvrir la fenêtre de recherche")
            .setSelect("Sélectionner")
            .setHeaderprefix("Recherche:")
            .setSearch("Recherche")
            .setHeaderpostfix("")
            .setCancel("Annuler"));
        add(lookupField);
    }

    private Person person = new Person();

    public BinderView() {
        Address address1 = new Address("20140", "Turku");
        Address address2 = new Address("10000", "Helsinki");
        Address address3 = new Address("20150", "Turku");
        List<Address> items = Arrays.asList(address1, address2, address3);

        LookupField<Address> lookupField = new LookupField<>();
        lookupField.setItems(items);
        // update the grid to show 2 columns
        lookupField.getGrid().addColumn(Address::getPostalCode).setHeader("Postal code");
        lookupField.getGrid().addColumn(Address::getCity).setHeader("City");
        lookupField.setLabel("Address");
        // add field helper
        lookupField.setHelperText("helper text for the component");
        // update the width
        lookupField.setWidthFull();
        add(lookupField);

        Binder<Person> personBinder = new Binder<>();
        // add a validation
        personBinder.forField(lookupField)
            .asRequired("Address is required")
            .withValidator(e -> "Turku".equals(e.getCity()), "Only Turku is valid")
            .bind(Person::getAddress, Person::setAddress);
        personBinder.setBean(person);
        personBinder.addValueChangeListener(e ->
            Notification.show("Address is now " + person.getAddress())
        );
    }

Links

• Issue tracker
• Online Demo
• View on GitHub

Compatibility