Master-Detail Layout
A responsive master-detail screen skeleton modeled on the Master-Detail template. A top bar with title + subtitle, a dedicated filter bar (search, chips, count, grid/list/table toggle), then side-by-side list and detail panels (1:2). The detail panel has a header, scrollable body, and sticky footer. Panels stack on mobile.
Medium 5 min 13 containers
Preview
Sections
Top Bar
Title + subtitle group on the left, action slot on the right (Visible when App.Width >= 1024). Height: 56px mobile, 72px desktop.
Filter Bar
Dedicated row spanning both panels: search input, category chips (FillPortions=1), record count, and a grid/list/table view toggle. Wraps on mobile.
Body
Holds the list and detail panels side by side (FillPortions 1:2). Switches to a vertical stack below 640px.
List Area
Left panel (FillPortions=1). Scrollable gallery slot for table / list / grid rows driven by gViewMode. Full width on mobile.
Detail Panel
Right panel (FillPortions=2). Hidden on mobile (Visible when App.Width >= 640). Vertical header / body / footer stack.
Detail Header
Detail title + close/back slot. Fixed 52px height with SpaceBetween justification.
Detail Body
Scrollable content area for detail fields, images, and related data. Fills remaining height.
Footer Actions
Sticky bottom bar (60px) with action buttons aligned to the right.
Responsive breakpoints
| Width | Label | Behavior |
|---|---|---|
| < 640px | Mobile | Single column, list panel only, detail panel hidden. Vertical layout. |
| 640–1024px | Tablet | Side-by-side panels (1:2 ratio). Detail panel visible. |
| > 1024px | Desktop | Full master-detail layout with comfortable panel widths. |
YAML
Screens:
scrMasterDetail:
Properties:
Fill: =RGBA(249, 250, 251, 1)
OnVisible: |-
=// Initialize your screen state
Set(gViewMode, "table");
Set(gSelItemID, 0);
UpdateContext({ctxSearch: "", ctxCategory: "All", ctxPanelOpen: 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(255, 255, 255, 1)
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
LayoutMinHeight: =If(App.Width < 640, 52, 60)
PaddingBottom: =8
PaddingLeft: =If(App.Width < 640, 12, 20)
PaddingRight: =If(App.Width < 640, 12, 20)
PaddingTop: =8
Children:
- cntTitleGroup:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
FillPortions: =1
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =2
Children:
- lblPageTitle:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(17, 24, 39, 1)
Size: =If(App.Width < 640, 18, 22)
Text: ="All Items"
Weight: ='TextCanvas.Weight'.Semibold
Wrap: =false
- lblPageSubtitle:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[record count · subtitle]"
Wrap: =false
- cntTopBarActions:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
FillPortions: =0
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
LayoutMinWidth: =40
Visible: =App.Width >= 1024
Children:
- lblActionPlaceholder_Top:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[Export] [+ Add]"
Width: =160
- cntFilterBar:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderStyle: =BorderStyle.None
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =If(App.Width < 640, 52, 44)
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =10
LayoutWrap: =true
PaddingBottom: =6
PaddingLeft: =If(App.Width < 640, 12, 20)
PaddingRight: =If(App.Width < 640, 12, 16)
PaddingTop: =6
Children:
- lblSearchPlaceholder:
Control: Text@0.0.51
Properties:
FillPortions: =0
FontColor: =RGBA(107, 114, 128, 1)
Height: =30
Size: =11
Text: ="[search input]"
Width: =If(App.Width < 640, 150, 220)
- lblChipsPlaceholder:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[category filter chips]"
- lblCountPlaceholder:
Control: Text@0.0.51
Properties:
FillPortions: =0
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[count]"
Visible: =App.Width >= 640
Width: =60
- lblViewTogglePlaceholder:
Control: Text@0.0.51
Properties:
FillPortions: =0
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[grid / list / table]"
Width: =116
- rctDivider:
Control: Rectangle@2.3.0
Properties:
BorderStyle: =BorderStyle.None
Fill: =RGBA(229, 231, 235, 1)
Height: =1
LayoutMinHeight: =1
Width: =Parent.Width
- cntBody:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
FillPortions: =1
LayoutDirection: =If(App.Width < 640, LayoutDirection.Vertical, LayoutDirection.Horizontal)
LayoutOverflowY: =LayoutOverflow.Scroll
Width: =Parent.Width
Children:
- cntListArea:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =1
LayoutDirection: =LayoutDirection.Vertical
LayoutOverflowY: =LayoutOverflow.Scroll
PaddingBottom: =8
PaddingLeft: =If(App.Width < 640, 12, 16)
PaddingRight: =If(App.Width < 640, 12, 16)
PaddingTop: =8
Children:
- lblGalleryPlaceholder:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[scrollable gallery — table / list / grid rows]"
- cntDetailPanel:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =If(App.Width < 640, 0, 1)
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =2
LayoutDirection: =LayoutDirection.Vertical
Visible: =App.Width >= 640
Children:
- cntDetailHeader:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
FillPortions: =0
Height: =52
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
LayoutMinHeight: =52
PaddingBottom: =8
PaddingLeft: =16
PaddingRight: =16
PaddingTop: =8
Children:
- lblDetailTitle:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(17, 24, 39, 1)
Size: =16
Text: ="[detail title]"
Weight: ='TextCanvas.Weight'.Semibold
- lblBackPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[close/back]"
Width: =70
- cntDetailBody:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
FillPortions: =1
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =12
LayoutOverflowY: =LayoutOverflow.Scroll
PaddingBottom: =16
PaddingLeft: =16
PaddingRight: =16
PaddingTop: =16
Children:
- lblDetailContentPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[scrollable detail content area]"
- cntDetailFooter:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(249, 250, 251, 1)
FillPortions: =0
Height: =60
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
LayoutJustifyContent: =LayoutJustifyContent.End
LayoutMinHeight: =60
PaddingBottom: =12
PaddingLeft: =16
PaddingRight: =16
PaddingTop: =12
Children:
- lblActionPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[action buttons]"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 your gallery, detail fields, and action buttons
- 5Customize colors, padding, and FillPortions to match your app’s theme