Using JSON to format SharePoint list view to generate "business card" view: three fields not rendering

Question

Desired result: photo on the left; name, role, team focus on the right.

Fields not rendering: Photo, Name, Role

List columns: Photo (image); Name (person or group); Role (single line of text); Team (choice); Focus (choice)

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "margin": "10px",
      "padding": "5px",
      "min-width": "340px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "img",
             "attributes": {
              "src": "[$Photo]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "padding": "5px",
          "margin": "auto"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Name]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Role]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Team]"
          },
  {
            "elmType": "div",
            "txtContent": "[$Focus]"
          }
        ]
      }
      
    ]
  }
}

Result of my code:

Thanks.

Answer 1

Hi @vrm ，

You have to use the [$Photo.serverRelativeUrl] instead of [$Photo] to get the image URL & show it using JSON Formatting.

Formatting a Person or group type column，Please refer to:https://www.expiscornovus.com/2022/04/10/formatting-a-person-or-group-type-column/

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

Here are my test results and Json code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "margin": "10px",
      "padding": "5px",
      "min-width": "340px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "150px",
              "height": "125px"
            },
            "attributes": {
              "src": "[$Photo.serverRelativeUrl]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "padding": "5px",
          "margin": "auto"
        },
        "children": [
          {
            "elmType": "div",
             "txtContent": "=substring([$Name.title], indexOf([$Name.title], ' ') + 1, indexOf([$Name.title] + '^', '^')) + ', ' + substring([$Name.title], 0, indexOf([$Name.title], ' '))"
          },
          {
            "elmType": "div",
            "txtContent": "[$Role]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Team]"
          },
          {
            "elmType": "div",
            "txtContent": "[$Focus]"
          }
        ]
      }
    ]
  }
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.