Avatar group

Overlapping initials for up to four people plus a +N bubble, drawn as SVG in theme colours, with their names summed up next to it.

Overview

An avatar group, or facepile, shows who is involved without a list. The first four people get a circle with their initials in shades of the theme colour, each overlapping the one before with a white ring. A grey bubble counts the rest, and the text next to it names the first two: "Sara Peeters, Tom Janssens and 4 others".

The circles are one SVG image built with Power Fx, so they stay sharp at any size and need no code component. They show initials only; photos need separate avatar controls.

When to use

Cards and headers that show the team, the assignees or the people who saw something.
Places with little room, where a full list of names doesn't fit.

When not to use

When people need to pick or remove someone: use a people picker.
A single person: use the avatar control with their photo.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
Gallery	`2.15.0`
Image	`2.2.3`

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

- AvatarGroupRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =AvatarGroupTitle.Height + AvatarGroupRow.Height + 8 + 40
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =8
      PaddingBottom: =20
      PaddingLeft: =20
      PaddingRight: =20
      PaddingTop: =20
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(440, Parent.Width)
    Children:
      - AvatarGroupTitle:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
            Height: =22
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingBottom: =0
            PaddingTop: =0
            Size: =13
            Text: ="Inspection team"
            Wrap: =false
      - AvatarGroupPeople:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Team members"
            Height: =0
            Items: |
              =Table(
                  {Name: "Sara Peeters"},
                  {Name: "Tom Janssens"},
                  {Name: "An De Smet"},
                  {Name: "Lucas Maes"},
                  {Name: "Emma Claes"},
                  {Name: "Noah Wouters"}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            ShowScrollbar: =false
            TabIndex: =0
            Visible: =false
      - AvatarGroupRow:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =44
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =12
            LayoutMinHeight: =44
            LayoutMinWidth: =120
          Children:
            - AvatarGroupFaces:
                Control: Image@2.2.3
                Properties:
                  AccessibleLabel: =AvatarGroupNames.Text
                  Height: =40
                  Image: |
                    =With(
                        {
                            people: AvatarGroupPeople.AllItems,
                            colors: [App.Theme.Colors.Primary, App.Theme.Colors.Darker20, App.Theme.Colors.Darker40, App.Theme.Colors.Darker60]
                        },
                        With(
                            {shown: Min(4, CountRows(people)), extra: CountRows(people) - Min(4, CountRows(people))},
                            "data:image/svg+xml;utf8," & EncodeUrl(
                                "<svg xmlns='http://www.w3.org/2000/svg' width='" & (40 + 30 * (shown + If(extra > 0, 1, 0) - 1)) & "' height='40'>" &
                                Concat(
                                    Sequence(shown) As i,
                                    With(
                                        {name: Index(people, i.Value).Name, x: 20 + 30 * (i.Value - 1)},
                                        "<circle cx='" & x & "' cy='20' r='18' stroke='white' stroke-width='3' fill='" & Mid(JSON(Index(colors, i.Value).Value), 2, 7) & "'/>" &
                                        "<text x='" & x & "' y='25' text-anchor='middle' font-family='Segoe UI, sans-serif' font-size='13' font-weight='600' fill='white'>" &
                                        Upper(Left(name, 1) & Left(Last(Split(name, " ")).Value, 1)) & "</text>"
                                    )
                                ) &
                                If(
                                    extra > 0,
                                    "<circle cx='" & (20 + 30 * shown) & "' cy='20' r='18' stroke='white' stroke-width='3' fill='" & Mid(JSON(ColorFade(App.Theme.Colors.Darker70, 88%)), 2, 7) & "'/>" &
                                    "<text x='" & (20 + 30 * shown) & "' y='25' text-anchor='middle' font-family='Segoe UI, sans-serif' font-size='13' font-weight='600' fill='" & Mid(JSON(App.Theme.Colors.Darker70), 2, 7) & "'>+" & extra & "</text>",
                                    ""
                                ) &
                                "</svg>"
                            )
                        )
                    )
                  ImagePosition: =ImagePosition.Fit
                  LayoutMinHeight: =40
                  LayoutMinWidth: =40
                  TabIndex: =0
                  Width: =40 + 30 * (Min(5, AvatarGroupPeople.AllItemsCount) - 1)
            - AvatarGroupNames:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FillPortions: =1
                  Height: =40
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: |
                    =With(
                        {people: AvatarGroupPeople.AllItems},
                        If(
                            CountRows(people) <= 2,
                            Concat(people, Name, " and "),
                            First(people).Name & ", " & Index(people, 2).Name & " and " & (CountRows(people) - 2) & " others"
                        )
                    )
                  Wrap: =true

Make it yours

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

`Items` on `AvatarGroupPeople`

The people, one record each with a Name. This gallery is hidden; it only holds the list that the faces and the names read.

In the YAML

YAML

Items: |
  =Table(
      {Name: "Sara Peeters"},
      {Name: "Tom Janssens"},
      {Name: "An De Smet"},
      {Name: "Lucas Maes"},
      {Name: "Emma Claes"},
      {Name: "Noah Wouters"}
  )

Your version

YAML

Items: |
  =ForAll(Filter(TeamMembers, Team = varTeam.ID) As m, {Name: m.'Full name'})

`Text` on `AvatarGroupTitle`

What the group is.

In the YAML

YAML

Text: ="Inspection team"

Your version

YAML

Text: ="Assigned to"

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

Avatar group

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on AvatarGroupPeople

Text on AvatarGroupTitle

How to paste

When Studio flags a control version

`Items` on `AvatarGroupPeople`

`Text` on `AvatarGroupTitle`