Vaadin Navigation

Vaadin 6 / 7 / 8
1

Hi,
I am using Vaadin 8.4.2. My app has a login screen and navigation similar to the QuickTickets Dashboard demo:
https://demo.vaadin.com/dashboard/

The menu items from the demo are:
https://demo.vaadin.com/dashboard/#!dashboard
https://demo.vaadin.com/dashboard/#!sales
https://demo.vaadin.com/dashboard/#!transactions
https://demo.vaadin.com/dashboard/#!reports
https://demo.vaadin.com/dashboard/#!schedule

The navigator will change the right side of the screen and the menu on the left stays the same.

I need to add a sign up screen that allow users to sign up for my application. How can I achieve this?
Ideally, I would like to have a URL like e.g
https://demo.vaadin.com/dashboard/#!signup
or https://demo.vaadin.com/dashboard/signup

I cannot seem to figure out how I can add a sign up page that is independent from the navigation menu.
How can I handle pages that are independent from navigation menu?

Cheers,
Bjoern

2

Typically adding Views to a Navigator doesn’t have anything to do with menu items; have you read the docs about Navigator yet? https://vaadin.com/docs/v8/framework/advanced/advanced-navigator.html

-Olli

3

Hi Olli,

Thanks for your reply. I used the QuickTickets navigation as an example for my app (it is my first Vaadin project). The way it is implemented is that every menu item correlates to a view and the navigator handles the switching between the views.

I had a look at the docs you mentioned. The alternative would be to implement just 3 views (Login, Signup and MainView).

The MainView is then reponsible to display subviews e.g. /mainview/sales by reading the parameter manually.

I think I was just confused because the way the navigation is done in the QuickTickets demo does not fit what I wanted to achieve.

Bjoern

4

Right, QuickTickets does not maybe always have the best way of doing things for all scenarios. Sounds like you’re on the right track with the MainView idea, although you don’t need to read the fragment manually, you can leave that to the Navigator.