Dashboard Layout
A responsive dashboard screen skeleton with a top bar, scrollable content area, KPI row, charts grid, lists row, and table section. Pure containers — no component dependencies.
Medium 5 min 12 containers
Preview
Sections
Top Bar
Responsive title + action buttons. Height: 56px mobile, 72px desktop. Padding adapts to screen width.
Divider
1px horizontal rule below the top bar. Width shrinks with responsive padding.
Scroll Area
The main content gutter. Scrolls vertically, centers children, max-width 1200px. 16px gap between sections.
KPI Row
4-slot horizontal row with LayoutWrap. Each slot is a bordered card (12px radius). Wraps to 2-per-row on mobile.
Charts Grid
Two cards side-by-side (3:2 ratio). Stacks vertically on mobile. Height adapts per breakpoint.
Lists Row
Two equal cards side-by-side. Stacks vertically on mobile.
Table Section
Full-width card for filters + data table. Fixed 500px height.
Responsive breakpoints
| Width | Label | Behavior |
|---|---|---|
| < 640px | Mobile | Single column, 12px padding, smaller title, stacked charts/lists |
| 640–1024px | Tablet | Two columns where applicable, 24px padding, full title size |
| > 1024px | Desktop | Full layout, max-width 1200px centered, 24px padding |
YAML
Screens:
scrDashboard:
Properties:
Fill: =RGBA(249, 250, 251, 1)
OnVisible: |-
=// Initialize your screen variables here
UpdateContext({ctxLoading: false})
Children:
- cntRoot:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =RGBA(249, 250, 251, 1)
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Vertical
Width: =Parent.Width
Children:
- cntTopBar:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderStyle: =BorderStyle.None
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Height: =If(App.Width < 640, 56, 72)
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =If(App.Width < 640, 8, 12)
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
LayoutMaxHeight: =If(App.Width < 640, 52, 60)
LayoutMinHeight: =If(App.Width < 640, 52, 60)
PaddingBottom: =8
PaddingLeft: =If(App.Width < 640, 12, 24)
PaddingRight: =If(App.Width < 640, 12, 24)
PaddingTop: =8
Children:
- lblPageTitle:
Control: Text@0.0.51
Properties:
AlignInContainer: =AlignInContainer.Stretch
FillPortions: =1
FontColor: =RGBA(17, 24, 39, 1)
Height: =42
Size: =If(App.Width < 640, 20, 28)
Text: ="Dashboard"
VerticalAlign: =VerticalAlign.Top
Weight: ='TextCanvas.Weight'.Semibold
Wrap: =false
- cntTopBarActions:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
LayoutMinWidth: =40
Children:
- lblPlaceholder_TopBarAction:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[actions go here]"
Width: =100
- rctDivider:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Fill: =RGBA(229, 231, 235, 1)
Height: =1
LayoutMinHeight: =1
Width: =Parent.Width - If(App.Width < 640, 12, 24)
- cntPageGutter:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =16
LayoutOverflowY: =LayoutOverflow.Scroll
PaddingBottom: =If(App.Width < 640, 12, 24)
PaddingLeft: =If(App.Width < 640, 12, 24)
PaddingRight: =If(App.Width < 640, 12, 24)
PaddingTop: =If(App.Width < 640, 12, 24)
Width: =Parent.Width
Children:
- lblSectionTitle:
Control: Text@0.0.51
Properties:
AlignInContainer: =AlignInContainer.Center
FontColor: =RGBA(75, 85, 99, 1)
Height: =42
PaddingLeft: =16
Size: =18
Text: ="Section Title"
VerticalAlign: =VerticalAlign.Bottom
Weight: ='TextCanvas.Weight'.Semibold
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 1200)
Wrap: =false
- cntKpiRow:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Height: =If(App.Width < 640, 200, 120)
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =12
LayoutWrap: =true
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 1200)
Children:
- cntKpiSlot1:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =1
Height: =96
LayoutMinWidth: =140
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblKpiPlaceholder1:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[KPI Card 1]"
- cntKpiSlot2:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =1
Height: =96
LayoutMinWidth: =140
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblKpiPlaceholder2:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[KPI Card 2]"
- cntKpiSlot3:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =1
Height: =96
LayoutMinWidth: =140
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblKpiPlaceholder3:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[KPI Card 3]"
- cntKpiSlot4:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =1
Height: =96
LayoutMinWidth: =140
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblKpiPlaceholder4:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[KPI Card 4]"
- cntChartsRow:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Height: =If(App.Width < 640, 700, 400)
LayoutDirection: =If(App.Width < 640, LayoutDirection.Vertical, LayoutDirection.Horizontal)
LayoutGap: =16
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 1200)
Children:
- cntChartSlotMain:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =3
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblChartPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[Main Chart — e.g. Bar Chart]"
- cntChartSlotSide:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =2
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblSideChartPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[Side Chart — e.g. Pie Chart]"
- cntListsRow:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =0
Height: =If(App.Width < 640, 600, 300)
LayoutDirection: =If(App.Width < 640, LayoutDirection.Vertical, LayoutDirection.Horizontal)
LayoutGap: =16
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 1200)
Children:
- cntListSlot1:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =1
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblListPlaceholder1:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[List 1 — e.g. Bar List]"
- cntListSlot2:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =1
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Children:
- lblListPlaceholder2:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[List 2 — e.g. Bar List]"
- cntTableSection:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =500
LayoutDirection: =LayoutDirection.Vertical
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 1200)
Children:
- lblTablePlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[Table Section — add Chips filter + Data Table here]"How to use
- 1Copy the YAML above
- 2In Power Apps Studio, go to Tree View → Screens → paste the YAML
- 3The layout appears with placeholder labels in each slot
- 4Replace placeholder labels with components from the Components library (KPI Cards, Charts, Data Table, etc.)
- 5Customize colors, padding, and heights to match your app's theme