paged fields on a formLayout

Flow
1

We have a FormLayout, on which we are adding dozens of text fields or checkboxes. What I want to achieve is having 10 or 20 fields visible at a time, and use < and > buttons to page through the fields. I’m sure this must be easy to do. Appreciate any hints!

Thanks

-Richard

2

There’s probably a ton of different ways to accomplish this. If you want it to be paged (e.g. 20 items on each “page”), one option is to split the fields into one or more formlayouts and hide/unhide them based on whether < or > is clicked. This approach is very similar to how tabs work, sans the tabs of course.

https://vaadin.com/components/vaadin-tabs/java-examples

If you want it to be more granular, and have one formlayoyt, you can hide/unhide individual formitems.

I use the latter method in my app. I use a RadioButtonGroup to alter the form based on user selection:

   private void paymentMethodChanged(PaymentMethod pm) {

      boolean credit = PaymentMethod.CREDITCARD.equals(pm);
      boolean cash = PaymentMethod.CASH.equals(pm);
      boolean check = PaymentMethod.CHECK.equals(pm);

      fiCardNumber.setVisible(credit);
      fiName.setVisible(credit);
      fiComment.setVisible(check);
      fiAmount.setVisible(credit || cash || check);

      ...
   }
3

Thanks for the advice, worked like a charm!