Record details list

A card of label and value pairs in two columns, one on phones, with copy buttons for values such as IDs, addresses and email addresses.

Overview

A read-only view of a record: a card with a title and an Edit button, and the fields as label and value pairs with a thin line under each. On screens wider than 520 pixels the fields sit in two columns; on a phone they stack in one.

Values that people tend to paste elsewhere, such as an ID, an address or an email address, get a copy button. It copies the value to the clipboard with Copy() and confirms with a notification.

When to use

The top of a detail screen, or inside a side panel.
Up to about twelve short fields.

When not to use

Fields people change: use a form section.
Long text such as notes: show it below the card as a paragraph.

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

- RecordDetailsRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =RecordDetailsHeader.Height + RecordDetailsGallery.Height + 8 + 36
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =8
      PaddingBottom: =16
      PaddingLeft: =20
      PaddingRight: =20
      PaddingTop: =20
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(760, Parent.Width)
    Children:
      - RecordDetailsHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =36
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =36
            LayoutMinWidth: =120
          Children:
            - RecordDetailsTitle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FillPortions: =1
                  FontWeight: =FontWeight.Semibold
                  Height: =28
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =16
                  Text: ="Inspection details"
                  Wrap: =false
            - RecordDetailsEdit:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: ="Edit details"
                  Appearance: =ButtonAppearance.Subtle
                  Height: =36
                  Icon: ="Edit"
                  LayoutMinHeight: =36
                  LayoutMinWidth: =72
                  OnSelect: =Notify("Edit (example only).", NotificationType.Information)
                  Size: =14
                  Text: ="Edit"
                  Width: =80
      - RecordDetailsGallery:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: =RecordDetailsTitle.Text
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =RoundUp(Self.AllItemsCount / If(Self.Width >= 520, 2, 1), 0) * Self.TemplateHeight
            Items: |
              =Table(
                  {Label: "Inspection ID", Value: "INS-1042", Copy: true},
                  {Label: "Status", Value: "In progress", Copy: false},
                  {Label: "Site", Value: "Warehouse Ghent", Copy: false},
                  {Label: "Address", Value: "Industrieweg 12, 9000 Ghent", Copy: true},
                  {Label: "Inspector", Value: "Sara Peeters", Copy: false},
                  {Label: "Email", Value: "sara.peeters@contoso.com", Copy: true},
                  {Label: "Planned for", Value: "Thursday 15 October 2026", Copy: false},
                  {Label: "Checklist", Value: "Fire safety v3", Copy: false}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =0
            TemplateSize: =64
            WrapCount: =If(Self.Width >= 520, 2, 1)
          Children:
            - RecordDetailsLabel:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =20
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =12
                  Text: =ThisItem.Label
                  Width: =Parent.TemplateWidth - 56
                  Wrap: =false
                  X: =0
                  Y: =10
            - RecordDetailsValue:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =RecordDetailsLabel.Text & " " & Self.Text
                  Height: =24
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =14
                  Text: =ThisItem.Value
                  Width: =Parent.TemplateWidth - 56
                  Wrap: =false
                  X: =0
                  Y: =30
            - RecordDetailsCopy:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: ="Copy " & RecordDetailsLabel.Text
                  Appearance: =ButtonAppearance.Subtle
                  Height: =32
                  Icon: ="Copy"
                  Layout: =ButtonLayout.IconOnly
                  OnSelect: |
                    =Copy(ThisItem.Value);
                    Notify(ThisItem.Label & " copied", NotificationType.Success)
                  Size: =14
                  Tooltip: ="Copy"
                  Visible: =ThisItem.Copy
                  Width: =32
                  X: =Parent.TemplateWidth - Self.Width - 16
                  Y: =18
            - RecordDetailsDivider:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =ColorFade(App.Theme.Colors.Darker70, 92%)
                  Height: =1
                  Width: =Parent.TemplateWidth - 16
                  X: =0
                  Y: =Parent.TemplateHeight - 1

Make it yours

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

`Items` on `RecordDetailsGallery`

One row per field, with its Label, its Value as text, and Copy set to true for values people paste elsewhere.

In the YAML

YAML

Items: |
  =Table(
      {Label: "Inspection ID", Value: "INS-1042", Copy: true},
      {Label: "Status", Value: "In progress", Copy: false},
      {Label: "Site", Value: "Warehouse Ghent", Copy: false},
      {Label: "Address", Value: "Industrieweg 12, 9000 Ghent", Copy: true},
      {Label: "Inspector", Value: "Sara Peeters", Copy: false},
      {Label: "Email", Value: "sara.peeters@contoso.com", Copy: true},
      {Label: "Planned for", Value: "Thursday 15 October 2026", Copy: false},
      {Label: "Checklist", Value: "Fire safety v3", Copy: false}
  )

Your version

YAML

Items: |
  =Table(
      {Label: "Inspection ID", Value: varInspection.Number, Copy: true},
      {Label: "Site", Value: varInspection.Site, Copy: false},
      {Label: "Planned for", Value: Text(varInspection.'Planned date', "dddd d mmmm yyyy"), Copy: false},
      {Label: "Inspector email", Value: varInspection.'Assigned to'.Email, Copy: true}
  )

`OnSelect` on `RecordDetailsEdit`

Where Edit goes.

In the YAML

YAML

OnSelect: =Notify("Edit (example only).", NotificationType.Information)

Your version

YAML

OnSelect: =EditForm(InspectionForm); Navigate(InspectionFormScreen, ScreenTransition.None)

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, RecordDetailsRoot, 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.

Record details list

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on RecordDetailsGallery

OnSelect on RecordDetailsEdit

How to paste

When Studio flags a control version

`Items` on `RecordDetailsGallery`

`OnSelect` on `RecordDetailsEdit`