Vaadin
Part of tutorial series CRUD app tutorial

Filtering Entities in a Grid

Most applications need some kind of search or filtering functionality and implementing it is a good exercise for learning Vaadin.

This part of the tutorial shows how to add filtering functionality to the list of customers created in the previous step. You’ll implement the filter by adding a text field above the Grid, and adding a button to clear the input.

Filter

Adding a TextField Component

To add a TextField component:

  1. In the MainView class, introduce an instance variable of type TextField as follows:

    ...
    public class MainView extends VerticalLayout {
    
        ...
        private TextField filterText = new TextField();
    
        ...
    }
  2. Configure the text field to display a placeholder and a clear button, by adding the following code at the beginning of the constructor:

    public MainView() {
    
        filterText.setPlaceholder("Filter by name...");
        filterText.setClearButtonVisible(true);
    
        ...
    }
    • setPlaceholder shows the given string in the field. When the user starts typing, the placeholder is automatically removed.

    • setClearButtonVisible adds a clear button (X) that displays on the right side of the text field.

  3. Change the add(grid) code line to include the filterText component as follows:

    add(filterText, grid);

Filtering the Data

To make the filter functional:

  1. Add the following code right after the filterText configuration:

    public MainView() {
    
        ...
        filterText.setValueChangeMode(ValueChangeMode.EAGER);
        filterText.addValueChangeListener(e -> updateList());
    
        ...
    }
    • ValueChangeMode.EAGER ensures that change events are fired immediately when the user types.

    • addValueChangeListener adds a value change listener that reacts to changes in the value of the text field.

  2. The value change listener calls the updateList() method which doesn’t use the value in the filter yet. To configure it to use this value, change the line in the updateList() method to send the value to the service (backend) call:

    public void updateList() {
        grid.setItems(service.findAll(filterText.getValue()));
    }
    • filterText.getValue() returns the current string in the text field.

  3. Compile the project by selecting Build > Build Project in IntelliJ IDEA, and refresh your browser to see the changes. Check that the filter works as expected.

For reference, here’s the complete implementation of the MainLayout class at this point:

@Route("")
@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends VerticalLayout {

    private CustomerService service = CustomerService.getInstance();
    private Grid<Customer> grid = new Grid<>(Customer.class);
    private TextField filterText = new TextField();

    public MainView() {
        filterText.setPlaceholder("Filter by name...");
        filterText.setClearButtonVisible(true);
        filterText.setValueChangeMode(ValueChangeMode.EAGER);
        filterText.addValueChangeListener(e -> updateList());

        grid.setColumns("firstName", "lastName", "status");

        add(filterText, grid);

        setSizeFull();

        updateList();
    }

    public void updateList() {
        grid.setItems(service.findAll(filterText.getValue()));
    }

}
Vaadin is an open-source framework offering the fastest way to build web apps on Java backends
GET STARTED

Comments (6)

Alejandro Duarte
3 years ago Mar 25, 2019 10:13am
Alejandro Duarte
3 years ago Mar 18, 2019 5:19pm
Erik Lumme
3 years ago Mar 19, 2019 6:50am