Side panel

A drawer that slides over the screen from the right with a dimmed backdrop, title, close button, record details, notes and footer actions.

Overview

A side panel shows the details of a record without leaving the list. It covers the screen with a dimmed backdrop and opens a full-height white panel on the right: a title and subtitle with a close button, a list of labels and values, a notes section, and Close and primary buttons in a footer.

The panel shows and hides with the context variable locSidePanelOpen. It is 440 pixels wide, or the full width on a phone, and the body takes the height between the header and the footer.

When to use

Previewing a record from a list or board, with one or two actions for it.
Short edit forms that people fill in without losing their place in the list.

When not to use

Long forms or content people spend a while on: give it its own screen.
Asking people to confirm something: use a confirm dialog.

Before you paste

Something that opens the panel, for example a gallery row with OnSelect: UpdateContext({locSidePanelOpen: true}). Until then it stays hidden.
Paste it directly on the screen, last, so it covers everything else. Inside a container it only covers that container.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
ModernButton	`1.0.0`
Gallery	`2.15.0`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- SidePanelRoot:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(15, 23, 42, 0.35)
      Height: =Parent.Height
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
      RadiusTopLeft: =0
      RadiusTopRight: =0
      Visible: =locSidePanelOpen
      Width: =Parent.Width
    Children:
      - SidePanelPanel:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.ExtraBold
            Fill: =Color.White
            Height: =Parent.Height
            LayoutDirection: =LayoutDirection.Vertical
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
            RadiusTopLeft: =0
            RadiusTopRight: =0
            Width: =Min(440, Parent.Width)
            X: =Parent.Width - Self.Width
            Y: =0
          Children:
            - SidePanelHeader:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =80
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =12
                  LayoutMinHeight: =80
                  LayoutMinWidth: =120
                  PaddingLeft: =24
                  PaddingRight: =16
                Children:
                  - SidePanelHeading:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        DropShadow: =DropShadow.None
                        FillPortions: =1
                        Height: =50
                        LayoutDirection: =LayoutDirection.Vertical
                        LayoutGap: =2
                        LayoutMinHeight: =50
                        LayoutMinWidth: =80
                      Children:
                        - SidePanelTitle:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              AlignInContainer: =AlignInContainer.Stretch
                              FontWeight: =FontWeight.Semibold
                              Height: =28
                              LayoutMinHeight: =0
                              LayoutMinWidth: =60
                              PaddingBottom: =0
                              PaddingLeft: =0
                              PaddingTop: =0
                              Size: =18
                              Text: ="Fire safety audit"
                              Wrap: =false
                        - SidePanelSubtitle:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              AlignInContainer: =AlignInContainer.Stretch
                              Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                              Height: =20
                              LayoutMinHeight: =0
                              LayoutMinWidth: =60
                              PaddingBottom: =0
                              PaddingLeft: =0
                              PaddingTop: =0
                              Size: =13
                              Text: ="INS-1042 · Warehouse Ghent"
                              Wrap: =false
                  - SidePanelClose:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: ="Close panel"
                        Appearance: =ButtonAppearance.Subtle
                        Height: =36
                        Icon: ="Dismiss"
                        Layout: =ButtonLayout.IconOnly
                        LayoutMinHeight: =36
                        LayoutMinWidth: =36
                        OnSelect: |
                          =UpdateContext({locSidePanelOpen: false})
                        Size: =14
                        Tooltip: ="Close"
                        Width: =36
            - SidePanelDividerTop:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  DropShadow: =DropShadow.None
                  Fill: =ColorFade(App.Theme.Colors.Darker70, 90%)
                  FillPortions: =0
                  Height: =1
                  LayoutMinHeight: =1
                  LayoutMinWidth: =0
            - SidePanelBody:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =8
                  LayoutMinHeight: =0
                  LayoutMinWidth: =120
                  PaddingBottom: =16
                  PaddingLeft: =24
                  PaddingRight: =24
                  PaddingTop: =16
                Children:
                  - SidePanelDetails:
                      Control: Gallery@2.15.0
                      Variant: Vertical
                      Properties:
                        AccessibleLabel: ="Inspection details"
                        AlignInContainer: =AlignInContainer.Stretch
                        BorderThickness: =0
                        FillPortions: =0
                        Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
                        Items: |
                          =Table(
                              {Label: "Status", Value: "In progress"},
                              {Label: "Site", Value: "Warehouse Ghent"},
                              {Label: "Inspector", Value: "Sara Peeters"},
                              {Label: "Due date", Value: "Thursday 15 October"},
                              {Label: "Checklist", Value: "8 of 12 checks done"}
                          )
                        LayoutMinHeight: =0
                        LayoutMinWidth: =120
                        ShowScrollbar: =false
                        TabIndex: =0
                        TemplatePadding: =0
                        TemplateSize: =40
                      Children:
                        - SidePanelDetailLabel:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                              Height: =30
                              PaddingLeft: =0
                              Size: =13
                              Text: =ThisItem.Label
                              Width: =120
                              Wrap: =false
                              X: =0
                              Y: =5
                        - SidePanelDetailValue:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =SidePanelDetailLabel.Text & " " & Self.Text
                              Height: =30
                              PaddingLeft: =0
                              Size: =14
                              Text: =ThisItem.Value
                              Width: =Parent.TemplateWidth - 120
                              Wrap: =false
                              X: =120
                              Y: =5
                  - SidePanelNotesLabel:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        FontWeight: =FontWeight.Semibold
                        Height: =40
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingTop: =16
                        Size: =14
                        Text: ="Notes"
                        Wrap: =false
                  - SidePanelNotes:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        AutoHeight: =true
                        Color: =ColorFade(App.Theme.Colors.Darker70, 30%)
                        FillPortions: =0
                        Height: =60
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        PaddingLeft: =0
                        Size: =14
                        Text: ="Two extinguishers in hall B were moved behind pallets. Ask the site manager to clear the access before the follow-up visit."
            - SidePanelDividerBottom:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  DropShadow: =DropShadow.None
                  Fill: =ColorFade(App.Theme.Colors.Darker70, 90%)
                  FillPortions: =0
                  Height: =1
                  LayoutMinHeight: =1
                  LayoutMinWidth: =0
            - SidePanelFooter:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =72
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =8
                  LayoutJustifyContent: =LayoutJustifyContent.End
                  LayoutMinHeight: =72
                  LayoutMinWidth: =120
                  PaddingLeft: =24
                  PaddingRight: =24
                Children:
                  - SidePanelCancel:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        Appearance: =ButtonAppearance.Secondary
                        Height: =40
                        LayoutMinHeight: =40
                        LayoutMinWidth: =96
                        OnSelect: |
                          =UpdateContext({locSidePanelOpen: false})
                        Size: =14
                        Text: ="Close"
                        Width: =100
                  - SidePanelPrimary:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        Appearance: =ButtonAppearance.Primary
                        Height: =40
                        LayoutMinHeight: =40
                        LayoutMinWidth: =96
                        OnSelect: |
                          =Notify("Open the inspection (example only).", NotificationType.Information);
                          UpdateContext({locSidePanelOpen: false})
                        Size: =14
                        Text: ="Open inspection"
                        Width: =148

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Text` on `SidePanelTitle`

The name of the record the panel shows. Do the same for SidePanelSubtitle.

In the YAML

YAML

Text: ="Fire safety audit"

Your version

YAML

Text: =InspectionsGallery.Selected.Title

`Items` on `SidePanelDetails`

The label and value pairs. Values are text, so format dates and numbers.

In the YAML

YAML

Items: |
  =Table(
      {Label: "Status", Value: "In progress"},
      {Label: "Site", Value: "Warehouse Ghent"},
      {Label: "Inspector", Value: "Sara Peeters"},
      {Label: "Due date", Value: "Thursday 15 October"},
      {Label: "Checklist", Value: "8 of 12 checks done"}
  )

Your version

YAML

Items: |
  =Table(
      {Label: "Status", Value: InspectionsGallery.Selected.Status},
      {Label: "Site", Value: InspectionsGallery.Selected.Site},
      {Label: "Due date", Value: Text(InspectionsGallery.Selected.'Due date', "dddd d mmmm")}
  )

`Text` on `SidePanelNotes`

Longer text; the panel's body grows to fit it.

In the YAML

YAML

Text: ="Two extinguishers in hall B were moved behind pallets. Ask the site manager to clear the access before the follow-up visit."

Your version

YAML

Text: =InspectionsGallery.Selected.Notes

`OnSelect` on `SidePanelPrimary`

The main action for the record.

In the YAML

YAML

OnSelect: |
  =Notify("Open the inspection (example only).", NotificationType.Information);
  UpdateContext({locSidePanelOpen: false})

Your version

YAML

OnSelect: |
  =UpdateContext({locSidePanelOpen: false});
  Navigate(InspectionScreen, ScreenTransition.None)

`Fill` on `SidePanelRoot`

The dimmed backdrop. It is hard-coded because the theme has no transparent colour; darken or lighten it to suit your theme.

In the YAML

YAML

Fill: =RGBA(15, 23, 42, 0.35)

Your version

YAML

Fill: =RGBA(0, 0, 0, 0.25)

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, SidePanelRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Side panel

Overview

When to use

When not to use

Before you paste

Controls used

YAML

Make it yours

Text on SidePanelTitle

Items on SidePanelDetails

Text on SidePanelNotes

OnSelect on SidePanelPrimary

Fill on SidePanelRoot

How to paste

When Studio flags a control version

`Text` on `SidePanelTitle`

`Items` on `SidePanelDetails`

`Text` on `SidePanelNotes`

`OnSelect` on `SidePanelPrimary`

`Fill` on `SidePanelRoot`