List / Browse Layout

A clean browse screen skeleton with a toolbar, collapsible filter chips, and a scrollable gallery area. Simpler than the dashboard — just toolbar + content. Pure containers.

Easy 3 min 8 containers

Preview

Sections

Top Bar

Responsive title + action button (e.g. + New). Height: 56px mobile, 72px desktop.

Divider

1px horizontal rule below the top bar.

Toolbar

Search input + filter badge + view toggle in a horizontal row. Fixed 52px height.

Filter Chips

Collapsible chip area (Visible: ctxShowFilter). 40px height with horizontal chip layout.

Gallery Area

Scrollable main content region with responsive padding and centered max-width.

Gallery Content

Inner card container for the gallery, table, or card grid. Max-width 1200px, 12px border radius.

Responsive breakpoints

WidthLabelBehavior
< 640pxMobile12px padding, smaller title, compact toolbar spacing
640–1024pxTablet24px padding, full title size, comfortable toolbar
> 1024pxDesktopFull layout, content centered with max-width 1200px

YAML

Screens:
  scrBrowse:
    Properties:
      Fill: =RGBA(249, 250, 251, 1)
      OnVisible: |-
        =// Initialize your screen variables here
        UpdateContext({ctxShowFilter: 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:
                  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: ="Browse"
                        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: ="[+ New]"
                              Width: =60
            - 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)
            - cntToolbar:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Center
                  FillPortions: =0
                  Height: =52
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =8
                  LayoutMinHeight: =52
                  PaddingBottom: =8
                  PaddingLeft: =If(App.Width < 640, 12, 24)
                  PaddingRight: =If(App.Width < 640, 12, 24)
                  PaddingTop: =8
                  Width: =Parent.Width
                Children:
                  - lblSearchPlaceholder:
                      Control: Text@0.0.51
                      Properties:
                        FillPortions: =1
                        FontColor: =RGBA(107, 114, 128, 1)
                        Size: =11
                        Text: ="[search input]"
                  - lblFilterBadge:
                      Control: Text@0.0.51
                      Properties:
                        FontColor: =RGBA(107, 114, 128, 1)
                        Size: =11
                        Text: ="[filter]"
                        Width: =50
                  - lblViewToggle:
                      Control: Text@0.0.51
                      Properties:
                        FontColor: =RGBA(107, 114, 128, 1)
                        Size: =11
                        Text: ="[view]"
                        Width: =50
            - cntFilterChips:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Center
                  FillPortions: =0
                  Height: =40
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =6
                  LayoutMinHeight: =40
                  PaddingBottom: =4
                  PaddingLeft: =If(App.Width < 640, 12, 24)
                  PaddingRight: =If(App.Width < 640, 12, 24)
                  PaddingTop: =4
                  Visible: =ctxShowFilter
                  Width: =Parent.Width
                Children:
                  - lblChipsPlaceholder:
                      Control: Text@0.0.51
                      Properties:
                        FontColor: =RGBA(107, 114, 128, 1)
                        Size: =11
                        Text: ="[filter chips area]"
            - cntGalleryArea:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Center
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =12
                  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:
                  - cntGalleryContent:
                      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)
                        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:
                        - lblGalleryPlaceholder:
                            Control: Text@0.0.51
                            Properties:
                              FontColor: =RGBA(107, 114, 128, 1)
                              Size: =11
                              Text: ="[gallery / table / cards go here]"

How to use

  1. 1Copy the YAML above
  2. 2In Power Apps Studio, go to Tree View → Screens → paste the YAML
  3. 3The layout appears with placeholder labels in each slot
  4. 4Replace placeholders with your search input, filter chips, gallery, or data table
  5. 5Toggle ctxShowFilter to show/hide the filter chips row