LibraryMaster-Detail Layout
FREElayout
Master-Detail Layout
The Master-Detail Layout is a responsive screen skeleton for the classic list-plus-detail pattern: a top bar, a left list panel and a right detail/edit panel. It is pure containers with no dependencies — drop a gallery in the list, a form in the detail, and use a breakpoint to collapse to a single column on phones.
Power Apps locale:
Paste directly into Power Apps Studio
YAML source
# Master-Detail Layout — PowerBlocks (FREE)
# Top bar + a left list panel and a right detail/edit panel side by side.
# 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.
- MasterDetailLayout:
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:
- MdTopBar:
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
- MdList:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
X: =24
Y: =96
Width: =360
Height: =Parent.Height - 120
Fill: =RGBA(23, 31, 46, 1)
RadiusTopLeft: =14
RadiusTopRight: =14
RadiusBottomLeft: =14
RadiusBottomRight: =14
- MdDetail:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
X: =400
Y: =96
Width: =Parent.Width - 424
Height: =Parent.Height - 120
Fill: =RGBA(23, 31, 46, 1)
RadiusTopLeft: =14
RadiusTopRight: =14
RadiusBottomLeft: =14
RadiusBottomRight: =14
Common use cases
Record management
Pick a record on the left, view or edit it on the right — the standard back-office layout.
Inbox / queue screens
List items on the left and show the selected item's content on the right.
Settings screens
Categories on the left, the chosen category's options on the right.
How to use Master-Detail Layout in Power Apps
- 1Click "Copy YAML" and paste the layout onto a blank screen.
- 2Drop a gallery (e.g. the Data Table or Record Browser) into the list panel.
- 3Bind the detail panel to the gallery's Selected item (a form or labels).
- 4Add a breakpoint (locIsMobile) and stack the panels on small screens.
Tip — Set the detail panel to show an empty-state until a row is selected, so the screen never looks broken on first load.