Articles

Working with person field in column formatting json

Working with person field in column formatting json

In This article we will learn how to format person field in SharePoint online. If you don’t have Visual Studio Code, Please download it from https://code.visualstudio.com/download.

 

Although you can use any editor but I prefer this as it give intelligence.


Next, in this example, I suppose that we have a list named products having a person  field named Responsible. We will do formatting and use hover cards on this field.

 

You can also learn basics of column formatting in below articles.

In this article we will learn

  • How to format person field in SharePoint online
  • Showing hover card in person field in Column formatting
  • Working with multi selection person field in column formatting json

How to format person field in SharePoint online

Create a json file anywhere on your computer and open it in visual studio code and start by typing below content.

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
 }

Please note that if you are working on SharePoint Server 2019 then use https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json schema instead

You can write your json directly in the column >> column settings >> format this column >> advanced mode. But it will be better if you write with an editor which provides intelligence.

 

Person field have following properties.

{
   "id": "1",
   "title": "John Smith",
   "email": "john@contoso.com",
   "sip": "john@contoso.com",
   "picture": "https://contoso.sharepoint.com/john_contoso_com_MThumb.jpg?t=123456",
   "department":"Human Resources",
   "jobTitle":"HR Manager"
}

We can use any field in the way we want for example, Here is how email can be used.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "txtContent":"@currentField.email"
}

You can copy the json and paste in advanced mode as suggested above and click on preview to see changes immediately. In this case field will start showing email. Lets show image and title both as below.

{
        "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
        "debugMode": true,
        "elmType": "img",
        "attributes": {
            "src":"='/_layouts/15/userphoto.aspx?size=S&accountname='+@currentField.email",
            "title":"@currentField.title"
        }
        
    }

It will show image which is little large, you need to apply some style to show it properly.

 {
        "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
        "debugMode": true,
        "elmType": "img",
        "attributes": {
            "src":"='/_layouts/15/userphoto.aspx?size=S&accountname='+@currentField.email",
            "title":"@currentField.title"
        },
       "style":{ "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
       }
        
    }

Showing hover card in person field in Column formatting 

Now lets suppose that we want to display person image, title along with hover card then we can create a div and one children will div will be above anchor and other will display title along with hover card as below.

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

Working with multi selection person field in column formatting json

In case you need to work with multiselection people fields then process of rendering one user will be similar. We need to use  forEach to loop through each user. For example,

{
        "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
        "debugMode": true,
         "elmType": "div",
         "children": [
            {
                "elmType": "div",
                "txtContent": "=length(@currentField)",
                "style": {
                    "border-radius": "1.5em",
                    "height": "1.5em",
                    "min-width": "1.5em",
                    "color": "white",
                    "text-align": "center",
                    "position": "absolute",
                    "top": "0",
                    "right": "1em",
                    "background-color": "=if(length(@currentField) == 0, '#ddd', '#aaa'"
                }
            },
            {
                "elmType": "div",
                "forEach": "person in @currentField",
                "style": {
                        "justify-content": "center",
                        "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
                },
                "children": [
                    {
                        "elmType": "div",
                        "style": {
                            "display": "flex",
                            "flex-direction": "row",
                            "justify-content": "center"
                        },
                        "children": [
                            {
                                "elmType": "img",
                                "attributes": {
                                    "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$person.email]",
                                    "title":"[$person.title]"
                                },
                                "style":{ 
                                    "width": "32px",
                                    "height": "32px",
                                    "overflow": "hidden",
                                    "border-radius": "50%",
                                    "margin": "2px"
                                }
                            },
                            {
                                "elmType": "span",
                                "txtContent":"[$person.title]"
                            }
                        ]
                       
                     }
                ]
            }
             
         ]
       
        
    }

In the top div we have two children's, first is showing number of users in person column and second children is creating a loop with forEach. Then in the children we have  reused column formatting json we developed


SharePoint Online
SharePoint Column Formatting

Would you like to see your article here on tutorialsinhand. Join Write4Us program by tutorialsinhand.com

About the Author
Mukesh Tiwari
Always ready to learn new technologies, A problem solver, exhibit to do attitude. Having around 10+ years of experience of development and management skills. I believe don't just set random goals but right goals suited for you.
Page Views :    Published Date : Aug 14,2020  
Please Share this page

Related Articles

Like every other website we use cookies. By using our site you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Learn more Got it!