Directory

← Back

Lookup Field

The Lookup field component allows you to search a specific record

Author

Rating

Popularity

300+

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 23.3.x -> Vaadin 23.3.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

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())
        );
    }

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2022-02-20
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 17+
Vaadin 24 in 24.0.3
Vaadin 23 in 23.3.8
Vaadin 14 in 1.3.2
Browser
N/A

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online