Lookup Field
The Lookup field component allows you to search a specific record
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
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
Compatibility
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 programmatic open method to open the overlay
- Released
- 2024-09-23
- 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 23.1.2
- Browser
- N/A
Lookup Field - Vaadin Add-on Directory
The Lookup field component allows you to search a specific recordOnline 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 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 23.1.2
Vaadin 23 version of the component
Lookup Field version 23.1.3
Update Enhanced Dialog version.
Lookup Field version 23.2.0
Replace MultiselectComboBox component with new core component. This new version is compatible with Vaadin 23.2.x.
Lookup Field version 23.2.2
New release compatible with flow version 23.2.2 onwards
Lookup Field version 23.2.3
Removed dependency to vaadin-enhanced-dialog
Lookup Field version 23.2.8
* Fixed add-on breaking when used as the editor field of a GridPro.
* The submit button of the dialog is now enabled by default. If you supply the Emptyselection i18n message, the dialog will not close without a selection but display a Notification with the provided message. You can also override this behavior to do something else.
Lookup Field version 23.2.11
Fixed keyboard navigation issues occurring when using the LookupField inside a GridPro
Lookup Field version 23.3.4
- Fix search button event propagation issue.
Lookup Field version 24.0.0
Update the component to be compatible with Vaadin 24.
Lookup Field version 23.3.5
#### Fixes
- fix: delegate required indicator so it shown in the combobox field
- fix: cannot read properties of undefined (reading 'assignedNodes') when using custom filters
Lookup Field version 24.0.1
#### Fixes
* fix: delegate required indicator so it shown in the combobox field
* fix: cannot read properties of undefined (reading 'assignedNodes') when using custom filters
Lookup Field version 23.3.6
#### Fixes
* Removed dependency to Enhanced Dialog completely from both web component and Flow API
* The Lookup Field Dialog now uses `vaadin-dialog` default styling and layouting for the header and footer instead of custom styles and layouts for the labels and buttons
Lookup Field version 23.3.7
#### Fixes
* fix: return HasTheme API which was removed by mistake
Lookup Field version 24.0.2
#### Fixes
* Removed dependency to Enhanced Dialog completely from both web component and Flow API
* The Lookup Field Dialog now uses `vaadin-dialog` default styling and layouting for the header and footer instead of custom styles and layouts for the labels and buttons
Lookup Field version 23.3.8
#### Fixes
* fixed setting custom components to the header and footer of the Lookup dialog
Lookup Field version 24.0.3
#### Fixes
* fixed setting custom components to the header and footer of the Lookup dialog
Lookup Field version 24.0.4
Fix an issue with Vaadin 24.4.x
Lookup Field version 24.0.5
Add 2 theme variants integrated and full-width-label.
Lookup Field version 23.3.10
Added a method "open" to open the overlay programmatically
Lookup Field version 24.0.6
Add programmatic open method to open the overlay