Search code examples
javavaadinaccordionvaadin14

Is it possible to filter vaadin accordion elements?

I have 6 vaadin accordion components under each other, each one for specific kind of offers with 1000+ buttons (button per offer). Click on each button opens a new tab in another part of my layout. The accordions look like this:

        var firstDropDown = new Accordion();
        var firstDropDownContent = new VerticalLayout();
        firstDropDownContent.add(
                createButton("Offer1", buttonClickEvent -> addNewTab("Offer1", tabs, new VerticalLayout())),
                createButton("Offer2", buttonClickEvent -> addNewTab("Offer2", tabs, new VerticalLayout())),
                createButton("Offer3", buttonClickEvent -> addNewTab("Offer3", tabs, new VerticalLayout())),
                createButton("Offer4", buttonClickEvent -> addNewTab("Offer4", tabs, new VerticalLayout())),
                createButton("Offer5", buttonClickEvent -> addNewTab("Offer5", tabs, new VerticalLayout())),
        firstDropDown.add("MarketingOffers", firstDropDownContent);
        firstDropDown.close();
        
        var secondDropDown = new Accordion();
        var secondDropDownContent = new VerticalLayout();
        secondDropDownContent.add(
                createButton("XOffer1", buttonClickEvent -> addNewTab("XOffer1", tabs, new VerticalLayout())),
                createButton("XOffer2", buttonClickEvent -> addNewTab("XOffer2", tabs, new VerticalLayout())),
                createButton("XOffer3", buttonClickEvent -> addNewTab("XOffer3", tabs, new VerticalLayout())),
                createButton("XOffer4", buttonClickEvent -> addNewTab("XOffer4", tabs, new VerticalLayout())),
                createButton("XOffer5", buttonClickEvent -> addNewTab("XOffer5", tabs, new VerticalLayout())),
        secondDropDown.add("OperationalOffers", secondDropDownContent);
        secondDropDown.close();

and so on...

Offers name are unique across the app (db constraint).

Now i want to add a text field above all the accordions in my layout that would act as a filter. When user types "1" i want to open, filter out and show him only those accordions button that contain "1". Is that kind of filtering/hiding other buttons possible with accordion component? If so then how can i achieve this?

I couldnt find any documentation about this. I am using vaadin 14, java only (v11).

Solution

  • I managed to achieve this with

    1. Adding Accordions that contain Grid with 1 column (buttons) instead of vertical layouts.

    2. Adding data provider to grid

    3. Adding this simple listener to search text field, that filters by the offer name which is also a button name in my case :)

       search.addValueChangeListener(event -> {
     if (event.getValue().isBlank()) {
         firstDropDown.close();
         secondDropDown.close();
         thirdDropDown.close();
         forthDropDown.close();
     } else {
         firstDropDown.open(0);
         secondDropDown.open(0);
         thirdDropDown.open(0);
         forthDropDown.open(0);
         offerFilterObject.setName(event.getValue());
     }
     dataProvider.refreshAll();
 })

    This basically opens all accordions, filters out what you type in the text field and closes all if there is no text - exactly what i aimed for.

    Thanks a lot @Tatu Lund !