Activity feed

A card with recent events as a timeline, each with an initials avatar, what happened, on what, and how long ago.

Overview

Recent events as a small timeline: an avatar per event joined by a thin line, a sentence for what happened and a muted line with the subject and the time. The card is at most 480 pixels wide and as tall as its events.

The connecting line hides on the last row through an IsLast flag that the gallery's Items adds, so the rows themselves stay plain data.

When to use

A side panel on a dashboard or record screen with the last five or so events.
Showing who did what, when people work on the same records.

When not to use

A full audit trail with filters: use a table or a separate screen.
Events without a person attached, where the avatar adds nothing.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
ModernButton	`1.0.0`
Gallery	`2.15.0`
ModernAvatar	`1.1.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

- ActivityFeedRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =ActivityFeedHeader.Height + ActivityFeedGallery.Height + 12 + 40
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =12
      PaddingBottom: =20
      PaddingLeft: =20
      PaddingRight: =20
      PaddingTop: =20
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(480, Parent.Width)
    Children:
      - ActivityFeedHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =32
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutMinHeight: =32
            LayoutMinWidth: =120
          Children:
            - ActivityFeedTitle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FillPortions: =1
                  FontWeight: =FontWeight.Semibold
                  Height: =32
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  Size: =16
                  Text: ="Recent activity"
                  Wrap: =false
            - ActivityFeedViewAll:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Subtle
                  Height: =32
                  LayoutMinHeight: =32
                  LayoutMinWidth: =72
                  OnSelect: =Notify("Open the activity log", NotificationType.Information)
                  Size: =13
                  Text: ="View all"
                  Width: =80
      - ActivityFeedGallery:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Recent activity"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
            Items: |
              =With(
                  {
                      rows: Table(
                          {Name: "Sara Peeters", Action: "completed", Target: "Fire safety audit", When: "12 min ago"},
                          {Name: "Tom Janssens", Action: "reported an issue on", Target: "Emergency lighting test", When: "1 h ago"},
                          {Name: "An De Smet", Action: "uploaded 4 photos to", Target: "Forklift inspection", When: "3 h ago"},
                          {Name: "Lucas Maes", Action: "was assigned", Target: "Ladder certification", When: "Yesterday"}
                      )
                  },
                  ForAll(Sequence(CountRows(rows)), Patch(Index(rows, Value), {IsLast: Value = CountRows(rows)}))
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =0
            TemplateSize: =64
          Children:
            - ActivityFeedLine:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =ColorFade(App.Theme.Colors.Darker70, 88%)
                  Height: =Parent.TemplateHeight - 32
                  Visible: =!ThisItem.IsLast
                  Width: =2
                  X: =15
                  Y: =38
            - ActivityFeedAvatar:
                Control: ModernAvatar@1.1.0
                Properties:
                  AccessibleLabel: =ThisItem.Name
                  Badge: =PresenceBadge.None
                  Height: =32
                  Image: =Blank()
                  Name: =ThisItem.Name
                  Width: =32
                  X: =0
                  Y: =4
            - ActivityFeedText:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Height: =44
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =2
                  Width: =Parent.TemplateWidth - 44
                  X: =44
                  Y: =2
                Children:
                  - ActivityFeedWhat:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        Height: =22
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        PaddingBottom: =0
                        PaddingTop: =0
                        Size: =14
                        Text: =ThisItem.Name & " " & ThisItem.Action
                        Wrap: =false
                  - ActivityFeedDetail:
                      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
                        PaddingTop: =0
                        Size: =13
                        Text: =ThisItem.Target & " · " & ThisItem.When
                        Wrap: =false

Make it yours

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

`Items` on `ActivityFeedGallery`

The events, newest first. Put your table in rows; the rest adds an IsLast flag so the timeline line stops at the last event.

In the YAML

YAML

Items: |
  =With(
      {
          rows: Table(
              {Name: "Sara Peeters", Action: "completed", Target: "Fire safety audit", When: "12 min ago"},
              {Name: "Tom Janssens", Action: "reported an issue on", Target: "Emergency lighting test", When: "1 h ago"},
              {Name: "An De Smet", Action: "uploaded 4 photos to", Target: "Forklift inspection", When: "3 h ago"},
              {Name: "Lucas Maes", Action: "was assigned", Target: "Ladder certification", When: "Yesterday"}
          )
      },
      ForAll(Sequence(CountRows(rows)), Patch(Index(rows, Value), {IsLast: Value = CountRows(rows)}))
  )

Your version

YAML

Items: |
  =With(
      {
          rows: ForAll(
              FirstN(Sort(AuditLog, Created, SortOrder.Descending), 5),
              {Name: 'Created By'.DisplayName, Action: Action, Target: Inspection.Title, When: Text(Created, "d mmm, hh:mm")}
          )
      },
      ForAll(Sequence(CountRows(rows)), Patch(Index(rows, Value), {IsLast: Value = CountRows(rows)}))
  )

`Text` on `ActivityFeedTitle`

The card heading.

In the YAML

YAML

Text: ="Recent activity"

Your version

YAML

Text: ="What happened today"

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

Activity feed

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on ActivityFeedGallery

Text on ActivityFeedTitle

How to paste

When Studio flags a control version

`Items` on `ActivityFeedGallery`

`Text` on `ActivityFeedTitle`