Directory

← Back

Lookup Field

The Lookup field component allows you to search a specific record

Author

Rating

Popularity

400+

Important information about versioning

Component versions 23.x and 24.x were deprecated in order to follow Semanting Versioning practices. Please use latest version 3.x for Vaadin 23 and version 4/5.x for Vaadin 24.

Compatibility

  • Version 1.x.x -> Up to Vaadin 17.x.x
  • Version 2.x.x -> Vaadin 17+
  • Version 3.x.x -> Vaadin 23.x
  • Version 4.x.x -> Vaadin 24.x
  • Version 5.x.x -> Vaadin 24.x (improved accessibility)

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

Version compatible with Vaadin 24.

Released
2024-11-07
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 24
Vaadin 17+ in 2.0.1
Vaadin 14 in 1.0.3
Vaadin 23 in 3.0.0
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
## Important information about versioning **Component versions 23.x and 24.x were deprecated in order to follow Semanting Versioning practices. Please use latest version 3.x for Vaadin 23 and version 4/5.x for Vaadin 24.** ## Compatibility * Version 1.x.x -> Up to Vaadin 17.x.x * Version 2.x.x -> Vaadin 17+ * Version 3.x.x -> Vaadin 23.x * Version 4.x.x -> Vaadin 24.x * **Version 5.x.x -> Vaadin 24.x (improved accessibility)** ## 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)
Issue tracker
Online Demo
View on GitHub

Lookup Field version 1.0.3
First release of the component

Lookup Field version 1.0.4
Fixes: * dialog scroll bar always visible * wrong size of the grid for small screen * Remove the background of the footer. Now it's using the default color. New features: * Theme API for the Java API * Update the enhanced-dialog dependency which is now Apache2

Lookup Field version 1.0.5
Add CSS classnames: https://github.com/vaadin-component-factory/vcf-lookup-field/issues/1

Lookup Field version 1.0.6
Add custom header and footer slots. See this demo: https://incubator.app.fi/lookup-field-flow-demo/custom-header

Lookup Field version 1.1.0
* Set the focus on the search field when the dialog is opened * Set the focus on the button when the dialog is closed * Add a new parameter `setSelectionDisabledIfEmpty that sets whether the select button is disabled or send an error when the selection is empty or not. The default value is true so the behavior of the component does not change. * Add a new listener `addEmptySelectionListener` that can be called to replace the default error notification

Lookup Field version 1.1.1
* Fix an issue in the webcomponent for custom grid * Bump the Vaadin platform version

Lookup Field version 1.2.0
Add: - MultiSelect Lookup Field: You can select multiple elements in the combobox and the grid - CustomFilter: You can change the filter input to a component. The component depends multiselect-combo-box-flow.

Lookup Field version 1.2.1
Fix an issue for java8 (previously built with a higher JDK)

Lookup Field version 1.3.0
Footer is refactored to be vaadin-horizontal-layout with theme=“spacing-s” The dialog only closes when “Select” or “Cancel” buttons are clicked. Number of selected items shown in the dialog “N items selected” Add an attribute for “has-selections” to the footer

Lookup Field version 1.3.1
New build as 1.3.0 was not properly published to the Maven repository

Lookup Field version 2.0.1

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

Lookup Field version 5.0.0
#### New features: * Updates web-component version to [5.0.0](https://github.com/vaadin-component-factory/vcf-lookup-field/pull/9). Changes are meant to expose the search button to the light DOM.

Lookup Field version 5.0.1
#### New features: * Update web-component dependency to 5.0.1 to fix styling issue with integrated variant ([see details]( https://github.com/vaadin-component-factory/vcf-lookup-field/releases/tag/v5.0.1))

Lookup Field version 3.0.0
* Component version compatible with Vaadin 23.x.

Lookup Field version 4.0.0
Version compatible with Vaadin 24.

Online