Adding navigation between dashboards

Want to let users switch between dashboards easily?

You can create a navigation bar right within your canvas dashboard to help users self-serve and navigate between different views.

Here’s how to build one for your dashboards

How to implement

1. Create a Reusable Navigation component

Create a file ecomax_components.aml with the function below.

Note: For dashboard links (e.g., /dashboards/v4/1099511664777-ecomax-users), please go to the reporting tab to find your dashboard URL.

Func ecomax_nav (activeItem: String) {
  TextBlock {
    content: @md
    <style>
      ul.ecomax_nav {
        list-style-type: none;
        padding-left: 0;
        color: white; 
        font-size: 18px; 
        line-height: 3; 
      }
      .ecomax_nav a {
        color: white;
      }
      .ecomax_nav a:hover {
        text-decoration: none;
        font-weight: bold;
      }
      .active-item {
        font-weight: 700; 
        border-bottom: 1px solid white;
      }
    </style>
    <ul class="ecomax_nav">
      <li><a class=" ${if (activeItem == 'Overview') { 'active-item' } else {''} } " href="/dashboards/v4/1099511664128-ecomax">Overview</a></li>
      <li><a class=" ${if (activeItem == 'Users') { 'active-item' } else {''} } "  href="/dashboards/v4/1099511664777-ecomax-users">Users</a></li>
      <li>Revenue</li>
      <li>Products</li>
    </ul>;;
  }
}

2. Add the component to your dashboards

Create a block that references the ecomax_nav() function created above for each dashboard.

Add to dashboard ecomax_overview.page.aml


block nav: demo.ecomax_nav('Overview')

Add to dashboard ecomax_users.page.aml


block nav: demo.ecomax_nav('Users')

Our sample implementation

GitHub repository

GitHub - holistics/playground

Playground environment

Notes: The transition would be smoother once we develop the layout or tab features in the canvas dashboard. Feel free to share your use cases below.

6 Likes