Navigating between Views in Vaadin

Learn to set up a parent layout and navigate between child views.

So far in this tutorial series, you’ve built a Customer Relationship Management (CRM) application for listing and editing contacts. In this chapter, you add a dashboard view to the application. You also add a responsive application layout, with a header and a navigation sidebar that can be toggled on small screens.

Application layout with a header and a sidebar

Defining View Routes

You can make any Vaadin component a navigation target by adding an @Route("<path>") annotation. Routes can be nested by defining the parent layout in the annotation: @Route(value = "list", layout=MainLayout.class).

Creating the Parent Layout

The application should have:

a shared parent layout with two child views:

MainLayout: App Layout with header and navigation:
1. ListView: the default view, mapped to "".
2. DashboardView: mapped to "dashboard".
a responsive application layout and navigation links.

Begin by creating a new Java class named MainLayout in the views package with the following content. This is the shared parent layout of both views in the application.

package com.example.application.views;

import com.example.application.views.list.ListView;
import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.HighlightConditions;
import com.vaadin.flow.router.RouterLink;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class MainLayout extends AppLayout { // (1)

    public MainLayout() {
        createHeader();
        createDrawer();
    }

    private void createHeader() {
        H1 logo = new H1("Vaadin CRM");
        logo.addClassNames(
            LumoUtility.FontSize.LARGE, // (2)
            LumoUtility.Margin.MEDIUM);

        var header = new HorizontalLayout(new DrawerToggle(), logo ); // (3)

        header.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.CENTER); // (4)
        header.setWidthFull();
        header.addClassNames(
            LumoUtility.Padding.Vertical.NONE,
            LumoUtility.Padding.Horizontal.MEDIUM);

        addToNavbar(header); // (5)

    }

    private void createDrawer() {
        addToDrawer(new VerticalLayout( // (6)
                new RouterLink("List", ListView.class)  // (7)
        ));
    }
}

AppLayout is a Vaadin layout with a header and a responsive drawer.
Instead of styling the text with raw CSS, use Lumo Utility Classes shipped with the default theme.
DrawerToggle is a menu button that toggles the visibility of the sidebar.
Centers the components in the header along the vertical axis.
Adds the header layout to the application layout’s nav bar, the section at the top of the screen.
Wraps the router link in a VerticalLayout and adds it to the AppLayout drawer.
Creates a RouterLink with the text "List" and ListView.class as the destination view.

RouterLink automatically maintains highlight attribute in currently active the element, but there is no default styling for it. Add the following CSS to frontend/themes/flowcrmtutorial/styles.css to highlight the selected link.

a[highlight] {
    font-weight: bold;
    text-decoration: underline;
}

Lastly, in ListView, update the @Route mapping to use the new MainLayout.

@Route(value="", layout = MainLayout.class) // (1)
@PageTitle("Contacts | Vaadin CRM")
public class ListView extends VerticalLayout {
     ...
}

ListView still matches the empty path, but now uses MainLayout as its parent.

Run the application. You should now see a header and a sidebar on the list view.

Creating a Dashboard View

Next, create a new dashboard view. This view shows stats: the number of contacts in the system and a pie chart of the number of contacts per company.

Create a new Java class named DashboardView in the views package with the following content:

package com.example.application.views;

import com.example.application.data.service.CrmService;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.charts.Chart;
import com.vaadin.flow.component.charts.model.ChartType;
import com.vaadin.flow.component.charts.model.DataSeries;
import com.vaadin.flow.component.charts.model.DataSeriesItem;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

@Route(value = "dashboard", layout = MainLayout.class) // (1)
@PageTitle("Dashboard | Vaadin CRM")
public class DashboardView extends VerticalLayout {
    private final CrmService service;

    public DashboardView(CrmService service) { // (2)
        this.service = service;
        addClassName("dashboard-view");
        setDefaultHorizontalComponentAlignment(Alignment.CENTER); // (3)
        add(getContactStats(), getCompaniesChart());
    }

    private Component getContactStats() {
        Span stats = new Span(service.countContacts() + " contacts"); // (4)
        stats.addClassNames(
            LumoUtility.FontSize.XLARGE,
            LumoUtility.Margin.Top.MEDIUM);
        return stats;
    }

    private Chart getCompaniesChart() {
        Chart chart = new Chart(ChartType.PIE);

        DataSeries dataSeries = new DataSeries();
        service.findAllCompanies().forEach(company ->
            dataSeries.add(new DataSeriesItem(company.getName(), company.getEmployeeCount()))); // (5)
        chart.getConfiguration().setSeries(dataSeries);
        return chart;
    }
}

DashboardView is mapped to the "dashboard" path and uses MainLayout as a parent layout.
Takes CrmService as a constructor parameter and saves it as a field.
Centers the contents of the layout.
Calls the service to get the number of contacts.
Calls the service to get all companies, then creates a DataSeriesItem for each, containing the company name and employee count. The don’t care about the compilation error, the missing method is added in the next step.

Note

Vaadin Charts is a Commercial Component Set

Vaadin Charts is a collection of data visualization components that’s a part of the Vaadin Pro subscription. Vaadin Charts comes with a free trial that you can activate in the browser. All Vaadin Pro tools and components are free for students through the GitHub Student Developer Pack. In case you need an open source alternative for Vaadin Charts, check out the wide selection of community extensions via Vaadin Directory.

Open Company.java and add the following field and getter to get the employee count without having to fetch all the entities.

@Formula("(select count(c.id) from Contact c where c.company_id = id)") // (1)
private int employeeCount;

public int getEmployeeCount(){
    return employeeCount;
}

The Formula is a Hibernate feature that allows to specify SQL snippets to fetch special fields. The query gets the count of employees without needing to fetch all the employees. Note that in a bigger application you probably want to do this in some alternative way as all Company entity loads now triggers an additional SQL query, even though the employeeCount field is only needed in this DashboardView class.

Add the Dashboard View to the Main Layout Sidebar

Add a navigation link to DashboardView in the MainLayout drawer:

private void createDrawer() {
    private void createDrawer() {
        addToDrawer(new VerticalLayout(
                new RouterLink("List", ListView.class),
                new RouterLink("Dashboard", DashboardView.class)
        ));
    }
}

Build and run the application. You should now be able to navigate to the dashboard view and see stats on your CRM contacts. If you want to, go ahead and add or remove contacts in the list view to see that the dashboard reflects your changes.

In the next chapter, you secure the application by adding a log-in screen.

Download free e-book.
The complete guide is also available in an easy-to-follow PDF format.

Open in a
new tab

export class RenderBanner extends HTMLElement {
  connectedCallback() {
    this.renderBanner();
  }

  renderBanner() {
    let bannerWrapper = document.getElementById('tocBanner');

    if (bannerWrapper) {
      return;
    }

    let tocEl = document.getElementById('toc');

    // Add an empty ToC div in case page doesn't have one.
    if (!tocEl) {
      const pageTitle = document.querySelector(
        'main > article > header[class^=PageHeader-module--pageHeader]'
      );
      tocEl = document.createElement('div');
      tocEl.classList.add('toc');

      pageTitle?.insertAdjacentElement('afterend', tocEl);
    }

    // Prepare banner container
    bannerWrapper = document.createElement('div');
    bannerWrapper.id = 'tocBanner';
    tocEl?.appendChild(bannerWrapper);

    // Banner elements
    const text = document.querySelector('.toc-banner-source-text')?.innerHTML;
    const link = document.querySelector('.toc-banner-source-link')?.textContent;

    const bannerHtml = `<div class='toc-banner'>
          <a href='${link}'>
            <div class="toc-banner--img"></div>
            <div class='toc-banner--content'>${text}</div>
          </a>
        </div>`;

    bannerWrapper.innerHTML = bannerHtml;

    // Add banner image
    const imgSource = document.querySelector('.toc-banner-source .image');
    const imgTarget = bannerWrapper.querySelector('.toc-banner--img');

    if (imgSource && imgTarget) {
      imgTarget.appendChild(imgSource);
    }
  }
}

52AFFD31-EA40-4AEF-B60F-E3BB6E5A8379

Documentation