Forum Discussion

RobOK's avatar
RobOK
Bronze Contributor
Sep 04, 2020

Lists - Person Column with profile face and name together

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?
Lists
RobOK's avatar
RobOK
Bronze Contributor
Sep 04, 2020

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. 

    • Fleur Williamson's avatar
      Fleur Williamson
      Copper Contributor
      Jun 16, 2021

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

      • ganeshsanap's avatar
        ganeshsanap
        MVP
        Jun 16, 2021

        Fleur Williamson RobOK 

        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.

Resources