Tabs

BETA FEATURE

This is a Beta feature. The documentation and feature may change rapidly.

Introduction

What are Tabs?

Tabs (in Canvas Dashboard) let you combine multiple, connected dashboards into a single interface with easy-to-use tab navigation.

Key benefits include better content organization, more intuitive navigation, and improved performance by loading content per tab.

Use-cases

Use Tabs when you have:

• Consolidate related content: Multiple related dashboards that users typically view together (e.g., executive overview + departmental details, different time periods, high-level summary to detailed breakdown)
• Tailor views for different audiences: Present data through different lenses in separate tabs - such as marketing performance, sales metrics, or operational details.
• A large dashboard that needs better performance (split content into tabs to improve loading times and reduce resource usage)

High-level understanding

Tab concept

Conceptually, Tabs provide a distinct dashboard layout option (called Tablayout), allowing you to organize your analytics blocks within a tabbed structure.

Important

Visually, a dashboard built with a TabLayout and containing only one tab will appear similar to a CanvasLayout dashboard. The fundamental difference lies in their underlying syntax and design purpose:

• CanvasLayout: Built for single-page dashboards, ideal when all content fits on one screen.
• TabLayout: Built for managing and displaying multiple pages of content, even if you start with just one tab.

Interactions in a tabbed dashboard

Since it is a layout option, all analytics blocks within a tabbed dashboard remain connected. This enables powerful cross-tab interactions, such as mapping a filter in Tab A to a visualization in Tab B.

By default, interactions (like filters) are automatically enabled only between blocks within the same tab to optimize initial user experience and performance. For scenarios requiring broader control, you can easily manually enable cross-tab interactions to link elements across different tabs.

Performance in a tabbed dashboard

Using Tabs helps optimize performance, especially for large and complex dashboards. Here's how Tabs are designed to improve performance:

• On-Demand Loading: Only the tabs that users actually open are loaded (no preloading), which reduces database queries and helps you save on query runs that count toward your subscription usage.
• Smart Caching: Tabs prioritize cached data from both front-end and back-end, only running fresh queries when cached data isn't available to reduce load times and query usage.

How-to

Create tabs

You can create a new tab either:

• Via GUI: Look for the "New Tab" button (or Plus (+) icon button at the top pane of your dashboard, next to the dashboard title.
• Via code: In your code editor, add TabLayout {} to define the dashboard view as a tab layout. Note that editing a dashboard via code is only available in Development. See more details about Syntax here.
  

Customize tabs styling (to be supported)

Currently, tabs use a default styling that appears consistently across all dashboards, regardless of the selected Theme.

Mobile experience

Tabs are fully responsive on mobile devices. You can customize the mobile display settings for each tab individually. For detailed mobile optimization guidance, see our Mobile Responsive Canvas Dashboard documentation.

Sync block

Sync block is a unique and powerful feature exclusive to tabbed dashboards. It allows you to maintain consistent content across multiple tabs.

When you configure a block as a sync block, updating one instance automatically reflects the change across all other linked tabs. This is ideal for common elements like date filters, key metrics, or standard headers that must remain uniform throughout your tabbed dashboard.

How-to

When copying and pasting any block between tabs using Ctrl/Cmd + C and Ctrl/Cmd + V you can choose between two options: Paste as copy, and Paste and sync.

Paste as Copy:

• Creates an independent copy of the original block.
• Changes to this copy won't affect the original block.

Paste and Sync:

• Creates a synchronized copy of the original block.
• Any changes to the original block or its copies will sync across all tabs.

Syntax

Here's the basic code structure for creating a tabbed dashboard:

Dashboard ecommerce {
  title: 'Ecommerce dashboard with Tabs'
  description: ''
  
  // Define your dashboard view as TabLayout to enable tabs
  view: TabLayout {
    label: 'View 1'
    // Define each tab as a separate CanvasLayout
    tab tab1: CanvasLayout {
      label: 'Products'
      height: 1100
      grid_size: 20
      
      // List of blocks included in this tab
      // Note: This section only defines block positioning and layering
      // The actual block content is defined outside the view property using separate block definitions
      block v1 {
          position: pos(900, 120, 300, 100)
        layer: 7}
      block v2 {...}
      block v3 {...}
      block v4 {...}
      block v5 {...}
      block f1 {...}
      block f2 {...}
      block t1 {...}
      
      // Mobile layout configuration for this tab
      mobile {
        mode: 'manual'
          block v1
          block v2
          block v3
          block v4
          block v5
          block f1
          block f2
          block t1
      }
     }
     // Add additional tabs here following the same structure
    tab tab2: CanvasLayout { ... }
  }

// Block definitions go here (outside the view property)
block v1 { ... }
block v2 { ... }
...

FAQs

1. Can I convert my existing normal dashboard to tabbed dashboard?

   Yes, you can easily convert any existing dashboard to use tabs. Simply click the "New Tab" button at the top of your dashboard, or add TabLayout {} in the code editor. Your existing content will become the first tab. See Create tabs for detailed instructions.

2. Is there a limit to the number of tabs I can add to a dashboard?

   There is no hard limit on the number of tabs you can create per dashboard. However, for optimal performance and user experience, we recommend keeping dashboard to under 10 tabs and no more than 100 blocks in total.

3. What happens to synced blocks if I delete the original tab?

   Synced blocks don't have an "original" - all synced instances are equal. When you delete a tab containing synced blocks, only the blocks in that tab are removed. The remaining synced blocks in other tabs continue to work and sync normally.