App Layout - Addon

Flow
41

Radostin Tsvetanov:
Hello, is there a way to open a view from a submenu?
I have something like this:

.add(SubmenuBuilder.get(“Configuration”, VaadinIcons.PLUS)
.add(“Dowload”, VaadinIcons.DOWNLOAD, new DownloadConfigurationView())
…

Can I open a view by clicking on the Configuration button?

Currently there isn’t.

42

Melvin Mah:
I’ve just tried out. While it works, we have a specific requirement where users with certain privileges are allowed to access a certain number of menu items across the categories. For instance, if this user is an Area Manager, he can only see like: (3 of 5 items in Category 1, 4 of 6 items in Category 2, etc…)

At the beginning, the menu construction (for all users) is like:

.add(CDISubmenuBuilder.get("Sales", VaadinIcons.PLUS)
                        .add("Sales (RM) by Outlet", FontAwesome.BAR_CHART_O, SalesByOutlet.class)
                        .add("Item Quantity by Outlet", FontAwesome.BAR_CHART_O, ItemQtyByOutlet.class)
                        .build())
                .add(CDISubmenuBuilder.get("Sales Pattern", VaadinIcons.PLUS)
                        .add("Transaction by Hour", FontAwesome.BAR_CHART_O, TransactSalesByHour.class)
                        .add("Sales (RM) by Hour", FontAwesome.BAR_CHART_O, SalesByHour.class)
                        .build())
                .add(CDISubmenuBuilder.get("Top SKUs", VaadinIcons.PLUS)
                        .add("Top SKUs", FontAwesome.BAR_CHART_O, TopSkus.class)
                        .add("Top SKUs by Count", FontAwesome.BAR_CHART_O, TopSkusCount.class)
                        .build())
                .add(CDISubmenuBuilder.get("Audit", VaadinIcons.PLUS)
                        .add("Receipt Validation", FontAwesome.BAR_CHART_O, RcptValidation.class)
                        .add("Matching - Receipt not in SYCARDA", FontAwesome.BAR_CHART_O, RcptNotInSycarda.class)
                        .build())

How do we add it later to the existing sub-menus, or is there another way to have it added at the construction level?

The current API does not support a manipulation of the Components later on. What I would suggest is to completly rebuild it if the user-type changes to match the users privileges.

43

Fabio Ebner:
I Have one View to Create or Change one Ticket. so In my enter method I verify if I have some parameters in url (http://localhost:8080/#!protocolo-td/3051&t=1519220867121) If have no parameters (http://localhost:8080/#!protocolo-td/) I enable the button to Save and disable the button Edit… so when my User click the button save I navigate to same view but now with parameters in my url (http://localhost:8080/#!protocolo-td/3051&t=1519220867121) (the &t=1519220867121 are to change the parameters every click and i Reload the view) so when I found some parameter in url in the case (/3051) I disable de button save and enable th button edit, but after I put our add on, when I click in save button my enter method are execute but the enable ou disable it’s no longer working. if I debug the set my button enabled =false, but in my screen the button are not disabled .(all method are executed, he save in my db but does not reflect on my screen component changes
why? tks

I understand what the problem is but I cannot tell you what might be the reason for it. Would you mind to share some code?

44

Hi,
i’m trying this Add-on version 0.9.23. When i launch my project i receive this error:
The NavigationElementInfoProvider must not be null.

I jave tried to launch an example project of github. Is all ok with 0.9.22.
I’d like to dinamycally generate my menu but with the example i receive a lot of errors…is there a way to do this with 0.9.22?
thanks!

45

Matteo Natali:
Hi,
i’m trying this Add-on version 0.9.23. When i launch my project i receive this error:
The NavigationElementInfoProvider must not be null.

I jave tried to launch an example project of github. Is all ok with 0.9.22.
I’d like to dinamycally generate my menu but with the example i receive a lot of errors…is there a way to do this with 0.9.22?
thanks!

Please open an issue on Github to allow me to reproduce the issue so I can fix it

46

Hi, I started using this this add-on yesterday and after fooling around with the example code I tried to make edit it for my needs. Unluckily I can’t really figure out how to add anything to the main part of my website, everything appears on left sidebar (I use LEFT_RESPONSIVE_HYBRID). I’d love to find out how to populate middle of the screen and make icons on the sidebar change pages. I can’t really find any good information about it, but probably I’m just missing something.

Thanks in advance

47

Hi,

compliments for the component, i’m using it from the beginning, so easy to use.

i have a question: How can i pass paramenters on first load / reload ?

at the moment i use myurl.com/?myparam=100 and read the param by request.getParameter(“myparam”) but, i receive an exception

GRAVE: Servlet.service() for servlet […]
in context with path
[/] threw exception [com.vaadin.server.ServiceException: org.apache.catalina.connector.ClientAbortException: java.io.IOException: Broken pipe]
with root cause
java.io.IOException: Broken pipe

any suggestion ?

Thanks
Giovanni

48

Hi,

how can i add a logo next to the open menu button on left side of the topbar ?

is it possible ?

Thanks

49

Jakub Śledź:
Hi, I started using this this add-on yesterday and after fooling around with the example code I tried to make edit it for my needs. Unluckily I can’t really figure out how to add anything to the main part of my website, everything appears on left sidebar (I use LEFT_RESPONSIVE_HYBRID). I’d love to find out how to populate middle of the screen and make icons on the sidebar change pages. I can’t really find any good information about it, but probably I’m just missing something.

Thanks in advance

[Checkout the code examples]
(https://github.com/appreciated/vaadin-app-layout/tree/master/app-layout-examples/plain/basic/src/main/java/com/github/appreciated/demo)

50

Giovanni Adobati:
Hi,

how can i add a logo next to the open menu button on left side of the topbar ?

is it possible ?

Thanks

Use the Builder Method .withAppBarIconComponent()

51

Hi,
I have a question for you. It would be great if icons in menu could display hover title (description) - we use Behavior.LEFT_RESPONSIVE_SMALL_NO_APP_BAR for our UI which is great.

Is there any possibility to force showing this description by code?

Thank you very much, this is great work you are doing with this add-on

Best
Jiri

52

Jiri Slivarich:
Hi,
I have a question for you. It would be great if icons in menu could display hover title (description) - we use Behavior.LEFT_RESPONSIVE_SMALL_NO_APP_BAR for our UI which is great.

Is there any possibility to force showing this description by code?

Thank you very much, this is great work you are doing with this add-on

Best
Jiri

I actually tried adding tooltips to the Elements. But there were some issues when using them on iPads which is why I dropped it.

I just found an issue which is preventing the following code from working so you will need to wait for 1.0.1. All you then have to do is as follows:

AppLayoutComponent drawer = AppLayout.getDefaultBuilder(variant)
        ...
        .withNavigationElementProvider(new CustomLeftNavigationBadgeElementComponentFactory())
        ...
        .build();

class CustomLeftNavigationBadgeElementComponentFactory extends AbstractNavigationElementComponentFactory {
    @Override
    public NavigationElementComponent get(NavigatorNavigationElement element) {
        CustomNavigationBadgeButton button = new CustomNavigationBadgeButton(element.getCaption(), element.getIcon(), element.getBadgeHolder());
        element.setComponent(button);
        setNavigationClickListener(element);
        return button;
    }
}

class CustomNavigationBadgeButton extends NavigationBadgeButton {
    public CustomNavigationBadgeButton(String caption, Resource icon, DefaultBadgeHolder badgeHolder) {
        super(caption, icon, badgeHolder);
		// This is the crucial part where the Component used by the AppLayout Builder is manipulated
        getButton().setDescription(caption);
    }
}
53

Thank you Johannes for your response. This looks promissing, but we are adding items like this:

...{
layoutBuilder = AppLayout.getCDIBuilder(Behaviour.LEFT_RESPONSIVE_SMALL_NO_APP_BAR)
				.withNavigator(getNavigatorProducer())
				.withNavigationElementInfoProducer(new DefaultSpringNavigationElementInfoProducer())
				.withNavigationElementProvider(new CustomLeftNavigationBadgeElementComponentFactory())
				.withTitle(appContextService.getApplicationName())
				.withDesign(AppLayoutDesign.MATERIAL)
				...
}

private void add(Action action) {
		layoutBuilder.addClickable(action.getName(), action.getIcon().orElse(getDefaultIcon()), e -> action.execute(), map(action.getPosition()));
	}

And this doesn’t seem to be working … guess addClickable method is not affected by this custom factory?

Thank you

54

addClickable method is not affected by this custom factory?

This is correct. To make this work for addCLickable you will need to overwrite another factory which currently doesn’t seem to be accessible directly I will have to take a look at this in the evening.
Would you mind opening an issue on Github for this?

55

Would you mind opening an issue on Github for this?

Hi Johannes,
the issue is here: https://github.com/appreciated/vaadin-app-layout/issues/132

Thanks
Jiri

56

Jiri Slivarich:

Would you mind opening an issue on Github for this?

Hi Johannes,
the issue is here: https://github.com/appreciated/vaadin-app-layout/issues/132

Thanks
Jiri

Thank you very much Jiri. I managed to fix it rather quickly, 1.0.2 won’t have this issue anymore.

As soon as it is released, you can archive your requirement as follows:

AppLayoutComponent drawer = AppLayout.getDefaultBuilder(variant)
        ...
        .withClickableElementProvider(new CustomLeftClickableNavigationElementFactory())
        ...
        .build();
		
 class CustomLeftClickableNavigationElementFactory implements ComponentFactory<Component, ClickableNavigationElement> {
    @Override
    public Component get(ClickableNavigationElement element) {
        CustomNavigationButton button = new CustomNavigationButton(element.getName(), element.getIcon());
        button.addClickListener(element.getListener());
        return button;
    }
}

class CustomNavigationButton extends NavigationButton {
    public CustomNavigationButton(String name, Resource icon) {
        super(name, icon);
        setDescription(name);
    }
}
57

Hi Johannes,
now it works like a charm! Thank you very much.

J

58

hello, First I want to say what a good component and excellent initiative!

For the moment I would like to use this component with vaadin flow or mix router layout with UI, but I have not seen the way, will there be any way with this version 1.0.2?

59

Hi Johaness,
I have “another” issue that I can’t solve. I have combined App Layout with Vaadin boards. After successful widgetset compilation the main part of UI is missing. Only menu is Visible (incomplete) and no detail part.

I am currently using LEFT_RESPONSIVE_SMALL_NO_APP_BAR behavior.

I can send you “very basic” code which shows this issue. But I guess simple AppLayout with Vaadin Board addon will do the same. Can you check this please?

Thank you

Best regards
Jiri

60

José G Moyano C:
hello, First I want to say what a good component and excellent initiative!

For the moment I would like to use this component with vaadin flow or mix router layout with UI, but I have not seen the way, will there be any way with this version 1.0.2?

Version 1.* of the App Layout Addon is not compatible with Vaadin 10.
Try the recently released Version 2.*.