Formatting multiple values in people and group fields on SharePoint Online with JSON

Question

Wondering if anyone can help me out with figuring out the formatting my multiple values person field on my list. I cannot figure out how to space out the names of each individual under the "Maintenance Technicians"?

I tried using some other basic JSON to get the profile circles under "additional site staff", however it is not connecting to our Delve accounts?

So when you hover over it, you cannot pull up their profile.?

See current JSON below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "forEach": "personIterator in @currentField",
      "elmType": "div",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px",
        "display": "=if(loopIndex('personIterator') >= 3, 'none', '')"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
            "title": "[$personIterator.title]"
          },
          "style": {
            "position": "relative",
            "top": "50%",
            "left": "50%",
            "width": "100%",
            "height": "auto",
            "margin-left": "-50%",
            "margin-top": "-50%",
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') >= 2, 'none', '')"
          }
        },
        {
          "elmType": "div",
          "attributes": {
            "title": "=join(@currentField.title, ', ')",
            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
          },
          "style": {
            "width": "100%",
            "height": "100%",
            "text-align": "center",
            "line-height": "30px",
            "font-size": "14px",
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') == 2, '', 'none')"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "='+' + toString(length(@currentField) - (2))"
            }
          ]
        }
      ]
    }
  ]
}

Any help with the JSON coding or spacing out the names on the default setting?

Thanks!

Answer 1

We can use the JSON formatting below to achieve it. Note: Modify the "tenant" of "tenant-my.sharepoint.com" in JSON code below to make it works.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "min-height": "1.5em",
        "flex-direction": "column",
        "align-items": "flex-start"
    },
    "children": [       
        {
            "elmType": "div",
            "forEach": "person in @currentField",
            "style": {
                "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "flex",
                        "flex-direction": "row"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "attributes": {
                                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname='+ [$person.email]"
                            },
                            "style": {
                                "width": "3em",
                                "height": "3em",
                                "border-radius": "3em"
                            }
                        },
                        {
                            "elmType": "a",
                            "attributes": {
                                "href": "='https://tenant-my.sharepoint.com/PersonImmersive.aspx?accountname=i:0%23.f|membership|'+ [$person.email]",
                                "target":"_blank"
                            },
                            "style": {
                                "margin-left": "0.5em"
                            },
                            "children": [
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.title]",
                                    "style": {
                                        "font-size": "1.2em"
                                    }
                                } 
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Answer 2

I already experienced this issue weeks ago, and I managed to solve that using Column Formatting, here is the code JSON:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=join(@currentField.title, ', ')",
  "attributes": {
    "class": "=if(indexOf(join(@currentField.email,';'), @me) != -1, 'ms-fontColor-themePrimary ms-fontWeight-semibold', '')"
  }
}

you will get a person, separated with comma !

ps: it include also that the current user will find his name coloured in blue.

Source: sp-dev-list-formatting

Best regards.