region

The region container defines a secondary grid that can receive tiles via the in name placement syntax. This page consolidates the rules, options, and examples for show region, including headers, footers, and the special top and bottom regions.

Table of contents

Basic syntax

Use show region to create a named grid and place tiles inside it with in name.

overview = show region { ..4, ..7 }

show scalar "2024" { .., ..2 in overview } with 13370
show scalar "2025" { .., 4..5 in overview } with 42000

The in dash part is optional. When omitted, the tile is placed on the dashboard grid. The block uses { horizontal, vertical in region } coordinates. Horizontal coordinates range from 1 to 12. Vertical coordinates must specify a bottom edge, either as an exact line, ..bottom, or top..bottom. Once a script uses this block syntax, placements should keep using it rather than mixing it with legacy Excel-like coordinates.

Region identifiers and ordering

Region identifiers must be unique within a script and cannot be reassigned. It is recommended to define regions before the tiles that reference them, but the layout editor tolerates placing show region after those tiles.

show scalar "2024" { .., ..2 in overview } with 13370
show scalar "2025" { .., 4..5 in overview } with 42000

overview = show region { ..4, ..7 }

Regions cannot be nested inside other regions.

Headers and footers

Regions can include a header or footer by using show region .. with and adding header or footer inside the block. Only headers and footers are allowed inside that block. A region can contain at most one header and at most one footer. Header and footer statements do not take explicit placement.

For StyleCode, regions expose header { ... } and footer { ... } selectors. The text passed to header or footer becomes the corresponding blockTitle.

summary = show region { ..2, ..12 ; header { blockColor: orange } } with
  header "Yearly Revenue"
  footer "Reviewed weekly"

show scalar "2024" { .., ..2 in summary } with 13370
show scalar "2025" { .., 4..5 in summary } with 42000

Headers and footers consume space outside the inner grid. The header takes two rows and adds an empty row before the inner grid.

Use the header { ... } and footer { ... } selectors for advanced styling. In the example above, the header { blockColor: orange } selector styles the region header. The footer { ... } selector also accepts the StyleCode properties href and hrefTarget, which make the footer text clickable. See stylecode for the general StyleCode rules.

Card and nocard regions

Regions are cards by default, which adds padding around the inner grid. Use nocard to remove the card and its padding.

compact = show region { ..2, ..5 nocard }

show scalar "A" { .., ..2 in compact } with 1
show scalar "B" { .., 4..5 in compact } with 2

Headers and footers are not allowed in nocard regions.

Special regions

Every script provides dash (the default grid) plus two special regions: top and bottom. These regions are sticky, limited to 10 rows, and shrink to the content they contain.

show scalar "KPI" { 1, 1..2 in top } with 42
show label "Footer" { 1, 1..3 in bottom }

Use in top and in bottom exactly like in name with any other region. Tiles placed there stay attached to the top or bottom of the dashboard.

If no tile is placed in top or bottom, that region is not displayed. If top is empty, the dashboard shows the title and either a submit or slices tile.