CODEWITHSUNDEEP
jsonsharepoint
RobC_CTL
RobC_CTL

Reputation: 33

SharePoint Online - People Column Customisation - Suppress the place holder image on a empty field

I have been trying to get a profile picture to appear in a modern list on SharePoint using the "People" column type, this works fine in classic SharePoint but doesn't in the modern list. So I've turned to customising the column using JSON and the example from here (same code below)

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + @currentField.email",
            "title": "@currentField.title"
          },
          "style": {
            "position": "relative",
            "top": "50%",
            "left": "50%",
            "width": "100%",
            "height": "auto",
            "margin-left": "-50%",
            "margin-top": "-50%"
          }
        }
      ]
    }
  ]
}

This works great with the exception that if the field is empty it gets populated with the default profile picture place holder image as you can see here

People column showing default place holders

My question is there any way I can suppress this image so if the field is empty it looks empty on the list view?

Thanks.

Upvotes: 0

Views: 434

Answers (1)

Lee
Lee

Reputation: 5493

Try this.

enter image description here

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "=if(length(@currentField.email)==0, '', '/_layouts/15/userphoto.aspx?size=S&accountname=' + @currentField.email)",
            "title": "=if(length(@currentField.email)==0,'',@currentField.Title)"
          },
          "style": {
            "position": "relative",
            "top": "50%",
            "left": "50%",
            "width": "100%",
            "height": "auto",
            "margin-left": "-50%",
            "margin-top": "-50%"
          }
        }
      ]
    }
  ]
}

Upvotes: 0

Related Questions