AML HTML Layout

Knowledge Checkpoint

A grasp of this concept will help you understand this documentation better: HTML Layout

HTMLLayout is a value for the view parameter in a Dashboard. Instead of positioning blocks with pixel coordinates, you write HTML and CSS directly to structure the dashboard, and drop blocks into the markup using the <h-block> web component.

Dashboard sales_overview {
  // ... blocks ...

  view: HTMLLayout {
    content: @html
      <div style="display: flex; gap: 16px;">
        <h-block name="revenue_chart" />
        <h-block name="region_filter" />
      </div>
    ;;
  }
}

Parameters

Parameter	Description
content	The HTML markup for the layout. Written as a @html ... ;; string. May contain any valid HTML and inline CSS.

Placing blocks

Use the <h-block> web component to render a block inside the HTML markup. The name attribute must match the block identifier declared in the dashboard.

<h-block name="block_id" />

Each block is rendered with its default UI (chart, table, filter, text) fully styled. You don't need to specify size or position - the block adapts to the space its container provides.

Every block declared in the dashboard should appear somewhere in the content markup. Blocks not referenced by an <h-block> element won't be displayed.

Layout with CSS

Use standard CSS (flexbox, grid, inline styles, <style> tags) to arrange containers. There is no pos() function and no fixed canvas dimensions.

view: HTMLLayout {
  content: @html
    <style>
      .dashboard { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
      .charts    { display: flex; flex-direction: column; gap: 12px; }
    </style>
    <div class="dashboard">
      <div>
        <h-block name="region_filter" />
      </div>
      <div class="charts">
        <h-block name="revenue_chart" />
        <h-block name="orders_chart" />
      </div>
    </div>
  ;;
}

Full example

For real-world examples, see the HTML Layout examples.

Dashboard sales_overview {
  title: 'Sales Overview'

  block heading: TextBlock {
    content: @md # Sales Overview ;;
  }

  block revenue_chart: VizBlock { ... }
  block region_filter: CustomControlBlock { ... }

  interactions: [
    FilterInteraction {
      from: 'region_filter'
      to: [ CustomMapping { block: 'revenue_chart' } ]
    }
  ]

  view: HTMLLayout {
    content: @html
      <div>
        <h-block name="heading" />
        <h-block name="region_filter" />
        <h-block name="revenue_chart" />
      </div>
    ;;
  }
}

See also

• AML Dashboard: full dashboard syntax including blocks, interactions, and settings
• AML Canvas Layout: a single free-form canvas page with pixel-based positioning
• AML Tab Layout: tabbed canvas dashboard