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

Add attribute invalid, readonly on the main component Disabled: disable the combobox and the button Add the demo for the different states

Released
2022-04-07
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 24 in 24.0.5
Vaadin 23 in 23.3.8
Vaadin 17+ in 2.0.1
Browser
N/A

Lookup Field - Vaadin Add-on Directory

The Lookup field component allows you to search a specific record Lookup Field - Vaadin Add-on Directory
## 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 lookupField = new LookupField<>(); List 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 lookupField = new LookupField<>(Person.class); List items = getItems(); lookupField.setDataProvider(DataProvider.ofCollection(items)); lookupField.setGridWidth("900px"); lookupField.setHeader("Person Search"); add(lookupField); } private List getItems() { PersonService personService = new PersonService(); return personService.fetchAll(); } ``` ### Internationalization You can change the captions of the buttons, dialog header, serach label. ``` public I18nView() { LookupField lookupField = new LookupField<>(); List 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](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
Online