Dashboard Layout

The Dashboard Layout is a ready-made, responsive screen skeleton for Power Apps canvas apps: a top bar, a KPI row, a two-column content area (a wide chart panel plus a side panel) and a full-width table region. It is pure containers with no dependencies — paste it, then drop your PowerBlocks KPI cards, charts and data table into each region.

Power Apps locale:

Paste directly into Power Apps Studio

YAML source

# Dashboard Layout — PowerBlocks (FREE)
# Top bar + KPI row + a two-column content area (chart + side panel) + a table region.
# RESPONSIVE: this is a pure-container skeleton — no data, no dependencies.
# Drop your PowerBlocks components into each region. For breakpoints, add to
# Screen.OnVisible:  UpdateContext({ locIsMobile: Parent.Width < 768 })
# then switch the region X/Y/Width with If(locIsMobile, ...) to stack on small screens.

- DashboardLayout:
    Control: GroupContainer@1.3.0
    Variant: ManualLayout
    Properties:
      X: =0
      Y: =0
      Width: =Parent.Width
      Height: =Parent.Height
      Fill: =RGBA(10, 10, 10, 1)
    Children:
      - LoTopBar:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24
            Y: =24
            Width: =Parent.Width - 48
            Height: =56
            Fill: =RGBA(23, 31, 46, 1)
            RadiusTopLeft: =14
            RadiusTopRight: =14
            RadiusBottomLeft: =14
            RadiusBottomRight: =14
      - LoKpiRow:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24
            Y: =96
            Width: =Parent.Width - 48
            Height: =96
      - LoChart:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24
            Y: =208
            Width: =(Parent.Width - 48) * 0.62
            Height: =280
            Fill: =RGBA(23, 31, 46, 1)
            RadiusTopLeft: =14
            RadiusTopRight: =14
            RadiusBottomLeft: =14
            RadiusBottomRight: =14
      - LoSide:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24 + (Parent.Width - 48) * 0.62 + 16
            Y: =208
            Width: =(Parent.Width - 48) * 0.38 - 16
            Height: =280
            Fill: =RGBA(23, 31, 46, 1)
            RadiusTopLeft: =14
            RadiusTopRight: =14
            RadiusBottomLeft: =14
            RadiusBottomRight: =14
      - LoTable:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24
            Y: =504
            Width: =Parent.Width - 48
            Height: =Parent.Height - 528
            Fill: =RGBA(23, 31, 46, 1)
            RadiusTopLeft: =14
            RadiusTopRight: =14
            RadiusBottomLeft: =14
            RadiusBottomRight: =14

Common use cases

Analytics dashboards

Start every reporting screen from a consistent, balanced grid instead of placing controls by hand.

Home screens

Give your app a structured landing layout with room for KPIs and a primary visual.

Rapid prototyping

Lay out a screen in seconds, then fill the regions with real components.

How to use Dashboard Layout in Power Apps

1Click "Copy YAML" and paste the layout onto a blank screen.
2Add UpdateContext({ locIsMobile: Parent.Width < 768 }) to Screen.OnVisible for breakpoints.
3Drop your components into each region (KPI cards in the KPI row, a chart in the chart panel, the Data Table below).
4Adjust the region widths/positions to taste — they are plain containers.

Tip — Pair it with the Business Dashboard screen for a fully built example, or recolor the region fills with your Design System Kit tokens.

More layouts

FREE

Master-Detail Layout

FREE

List / Browse Layout