Adding elements to AppLayout object dynamically

[abonhote]

Hi!

Is there a way to add elements, like menu items and submenus, dynamically? I'd like to loop over an array after I created the AppLayout object and add items one by one.

I tried many things, for example this:

AppLayout drawer = AppLayoutBuilder.get().withBehaviour(variant).build();
        drawer.setTitle("XYZ");
       drawer.addNavigationHeaderElement(new MenuHeader("App Layout", "Version 0.9.11", new ThemeResource("logo.png")));
        drawer.addNavigationElement(new NavigatorNavigationElement("Responsive",VaadinIcons.ABACUS, View1.class).getComponent());

Line 2 and 3 work, but addNavigationElement throws a null pointer exception.

Any idea appreciated!

Cheers

André

[appreciated]

Simply don't build the Layout right away, actually use the Builder pattern.

Instead of doing this:

AppLayout drawer = AppLayoutBuilder.get().withBehaviour(variant).build();

Do this:

AppLayoutBuilder builder = AppLayoutBuilder.get()
        .add(new MenuHeader("App Layout", "Version 0.9.11", new ThemeResource("logo.png")))
        .add(new NavigatorNavigationElement("Responsive", VaadinIcons.ABACUS, View1.class).getComponent());

// builder.add(...)

Component component = builder.build();

But you have a point the Builder pattern and the resulting AppLayout do require some refactoring. The NPE is not supposed to happen, also your code is supposed to work, but currently it doesn't. 😞

I opened Issue #45 to make things more clear

[abonhote]

Thanks, that worked, sort of. I came across another thing, however: It looks like there's a limit of four submenu items, although I didn't find that value in the code yet. What I'm trying:

for (int i = 1; i < 10; i++) {
	if (i == 3 || i == 7) {
		SubmenuBuilder submenu = SubmenuBuilder.get("Menu "+i,VaadinIcons.MENU);
		for (int j = 1; j < 7; j++) {
			submenu.add("Submenu "+j,View2.class);
			System.out.println("Submenu "+j);
		}
		builder.add(submenu.build());
	} else {
		builder.add("Menu " + i, VaadinIcons.ADJUST, View1.class);
	}
}

So I'm expecting 6 submenu items on top level menu 3 and 7, but both have only 4. Nothing on the console, my println counts from 1 to 6 as expected.

Cheers

André

PS: Thanks for all that, I really appreciate it!
PPS: If you prefer one issue per "issue", I'll be glad to move this.

[appreciated]

I did this for you now thank you for your finding!

The Issue is occurring because the value for the max-height amination I have set is too small for your elements to fit.

Here a temporary fix which you can add to your theme file:

...

@mixin mytheme {

  ...

  .app-layout-expanding-menu-container-open {
    max-height: 999px !important;
  }

  ...

}

[abonhote]

Sorry, I'm late ;) Thaks a ton, highly @appreciated ;)