AML Tab Layout

Knowledge Checkpoint

A grasp of this concept will help you understand this documentation better: Dashboard Tabs

TabLayout is the value for the view parameter in a Dashboard when you want to split the dashboard into named tabs. Each tab holds a CanvasLayout (pixel-positioned).

Dashboard my_dashboard {
  // ... blocks ...

  view: TabLayout {
    tab detail: CanvasLayout {
      label: 'Detail'
      width: 1080
      height: 600
      block v2 { position: pos(0, 0, 1080, 600) }
    }
  }
}

Parameters

Parameter	Description
`label`	Optional display name for the tab container itself.
`tab <name>`	A named tab. Each tab takes a `CanvasLayout` as its body. Tab names must be unique within the layout.

Tab body types

CanvasLayout

CanvasLayout gives you pixel-precise control over block position and size. See AML CanvasLayout for the full parameter reference including width, height, grid_size, mobile, and block positioning with pos().

tab detail: CanvasLayout {
  label: 'Detail'
  width: 1080
  height: 800
  block v1 { position: pos(0, 0, 540, 400) }
  block v2 { position: pos(540, 0, 540, 400) }
}

Full example

A two-tab dashboard with a shared filter block:

Dashboard sales_overview {
  block f1: FilterBlock {
    label: 'Date range'
    type: 'date'
  }
  block v1: VizBlock {
    label: 'Revenue by month'
    viz: LineChart { dataset: ecommerce }
  }
  block v2: VizBlock {
    label: 'Orders by region'
    viz: BarChart { dataset: ecommerce }
  }
  {/* block t1: TextBlock {
    content: @md ## Notes;;
  } */}

  view: TabLayout {
    tab charts: CanvasLayout {
      label: 'Charts'
      width: 1080
      height: 500
      block f1 { position: pos(0, 0, 300, 60) }
      block v1 { position: pos(0, 70, 540, 400) }
      block v2 { position: pos(540, 70, 540, 400) }
    }
    {/* tab notes: LinearLayout {
      label: 'Notes'
      block t1
    } */}
  }
}

Parameters​

Tab body types​

CanvasLayout​

Full example​

See also​

Parameters

Tab body types

CanvasLayout

Full example

See also