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
Playground environment
- Visit Holistics Playground
- Check the code setup in
ecomax_overview.page.aml
,ecomax_users.page.aml
, andecomax_components.aml
- Visit Playground’s Reporting to test them
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.