Master-Detail Layout
A responsive master-detail screen skeleton with side-by-side list and detail panels. The list panel includes a search header and scrollable gallery; the detail panel has a header, scrollable body, and sticky footer. Panels stack on mobile.
Medium 5 min 10 containers
Preview
Sections
Top Bar
Responsive title + action buttons. Height: 56px mobile, 72px desktop.
List Panel
Left side panel (FillPortions=1). Contains search header and scrollable gallery area. Full width on mobile.
Search Header
Fixed 52px bar with search input placeholder and filter button placeholder.
Gallery Area
Scrollable list area for gallery items. Fills remaining height of the list panel.
Detail Panel
Right side panel (FillPortions=2). Hidden on mobile (Visible when App.Width >= 640).
Detail Header
Title + close/back button. Fixed 52px height with SpaceBetween justification.
Detail Body
Scrollable content area for detail fields, images, and related data.
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 variables here
UpdateContext({ctxSelectedItem: Blank()})
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:
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
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: ="Master-Detail"
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)
- cntMain:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
LayoutDirection: =If(App.Width < 640, LayoutDirection.Vertical, LayoutDirection.Horizontal)
Width: =Parent.Width
Children:
- cntListPanel:
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: =1
LayoutDirection: =LayoutDirection.Vertical
Children:
- cntListHeader:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
FillPortions: =0
Height: =52
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
LayoutMinHeight: =52
PaddingBottom: =8
PaddingLeft: =12
PaddingRight: =12
PaddingTop: =8
Children:
- lblSearchPlaceholder:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[search bar]"
- lblFilterPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[filter]"
Width: =50
- cntListArea:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
LayoutDirection: =LayoutDirection.Vertical
LayoutOverflowY: =LayoutOverflow.Scroll
PaddingBottom: =8
PaddingLeft: =12
PaddingRight: =12
PaddingTop: =8
Children:
- lblGalleryPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[scrollable gallery area]"
- cntDetailPanel:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
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:
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