Lists - Person Column with profile face and name together

[Rob O'Keefe]

How do you format a List column to have both an icon and a name? Is there sample JSON to do this? Does it require two columns?

[#2]

@Rob O'Keefe if it's just a single line of text column you can do this with the following JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "sp-field-severity--good"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "12px 4px"
      },
      "attributes": {
        "iconName": "Emoji2"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

which gives the following result (in the StaffMember column):

If you have a Person column type then things get more complicated and I'll need to investigate what the JSON for that would be.

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
If I've answered your question or solved your problem, please mark this question as answered. This helps others who have the same question find a solution quickly via the forum search. If you liked my response, please consider giving it a thumbs up. Thanks.

[#3]

@RobElliott 

Thanks for fast reply! Sorry my original wording probably threw you off... i meant the small face circle from someone's O365 profile (i used the word icon, but i guess maybe it is avatar?). [I edited the post title to be more clear]

So I am thinking a Person column, not text, which i think is complicated.

In some of the previews they have face and name if it is one person, and if it is multiple people just the row of faces. That might be in Planner List view that I saw that. That would be more advanced obviously. 

[#4]

You can find best list formatting samples here:
- https://github.com/pnp/sp-dev-list-formatting
- https://pnp.github.io/sp-dev-list-formatting/

[#5]

@Juan Carlos González Martín Thanks! I have been through those and found one to show the profile image but not BOTH the profile image and name togetehr in one column. 

This page is where i found the profile image:

https://pnp.github.io/sp-dev-list-formatting/groupings/columntype/ 

[#6]

@Rob O'Keefe I know it has been a year... however the new Microsoft List templates, have column formatting with image and name.  Try the Issue Tracker.

[#7]

@Fleur Williamson @Rob O'Keefe 

You can use below JSON code to format single selection person column:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "img",
            "style": {
                "width": "72px",
                "height": "72px",
                "overflow": "hidden",
                "border-radius": "50%",
                "margin": "2px"
            },
            "attributes": {
                "src": "='/_layouts/15/userphoto.aspx?size=M&accountname=' + @currentField.email",
                "title": "@currentField.title"
            }
        },
        {
            "elmType": "span",
            "style": {
                "vertical-align": "middle",
                "margin-left": "2px",
                "font-size": "20px"
            },
            "txtContent": "@currentField.title"
        }
    ],
    "defaultHoverField": "@currentField"
}

Output:

You can find more details & explanation at: Customise person column with JSON 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.