SharePoint List Formatting
Back to form formats
Form formattingSharePoint Online

Person circle Header

This sample demonstrates how to display multiple selected persons from existing field in the header.

Get this format View on GitHub

Shared by André Lage
Updated Feb 17, 2023

Person circle Header formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Form header
Download JSON
{
  "elmType": "div",
  "children": [
    {
      "forEach": "personIterator in [$Contacts]",
      "elmType": "div",
      "style": {
        "padding": "20px 5px",
        "position": "relative",
        "left": "=if(loopIndex('personIterator') == 0, '0px',if(loopIndex('personIterator') % 2, '-'+ (28*Number(loopIndex('personIterator'))) +'px','-'+ (28*Number(loopIndex('personIterator'))) +'px'))"
      },
      "children": [
        {
          "elmType": "img",
          "defaultHoverField": "[$personIterator]",
          "attributes": {
            "src": "=getUserImage([$personIterator.email], 'M')",
            "title": "[$personIterator.title]",
            "class": "sp-card-userThumbnail"
          },
          "style": {
            "position": "absolute",
            "border-radius": "50%",
            "margin": "18px 18px",
            "box-shadow": "rgba(0, 0, 0, 0.15) 4.95px 4.95px 4.6px",
            "display": "=if(length([$Approvers]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
          }
        },
        {
          "elmType": "div",
          "style": {
            "border-top-left-radius": "110px",
            "border-top-right-radius": "110px",
            "border-bottom": 0,
            "width": "108px",
            "height": "54px",
            "background-color": "=if((loopIndex('personIterator') % 2)==0,'','rgba(0, 0, 0, 0.2)')"
          },
          "attributes": {
            "class": "=if((loopIndex('personIterator') % 2)==0,'ms-bgColor-themePrimary','')"
          }
        },
        {
          "elmType": "div",
          "style": {
            "border-bottom-left-radius": "110px",
            "border-bottom-right-radius": "110px",
            "border-bottom": 0,
            "width": "108px",
            "height": "54px",
            "background-color": "=if((loopIndex('personIterator')  % 2)==1,'','rgba(0, 0, 0, 0.2)')"
          },
          "attributes": {
            "class": "=if((loopIndex('personIterator')  % 2)==1,'ms-bgColor-themePrimary','')"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "relative",
            "width": "100%",
            "text-overflow": "ellipsis",
            "white-space": "nowrap",
            "overflow": "hidden",
            "text-align": "center",
            "top": "=if((loopIndex('personIterator') % 2)==0,'0px','-130px')"
          },
          "txtContent": "[$personIterator.title]"
        }
      ]
    }
  ]
}
View sourceLink to this definitionperson-circle-header.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /children/0/children/1/style/border-bottom must be object
  • /children/0/children/1/style/border-bottom must be string
  • /children/0/children/1/style/border-bottom must match a schema in anyOf

From the contributor

How to use this sample

Summary

This sample demonstrates how to display multiple selected persons from existing field in the header. The values of the Contacts column are displayed in the header with visual circle process desing and switching color position.

screenshot of the sample

Form requirements

Type Internal Name Required
Person (Allow multiple selections) Contacts Yes

Sample

Solution Author(s)
person-circle-header.json Andre Lage

Version history

Version Date Comments
1.0 February 17, 2023 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.