SharePoint - JSON Code "User Profile Card"

Martin, Heidi (SE GP T SP PS) 571

Good morning,

I would like to insert an additional multiline test in this JSON code. How can help? Thank you!

User's image

This is the 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",
      "display": "flex",
      "flex-wrap": "wrap",
      "flex-direction": "column",
      "align-items": "center",
      "justify-content": "space-around",
      "min-width": "300px",
      "min-height": "286px",
      "border-radius": "8px",
      "margin-right": "10px",
      "margin-bottom": "10px",
      "box-shadow": "2px 2px 4px darkgrey"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "img",
            "style": {
              "display": "block",
              "height": "auto",
              "max-height": "96px",
              "max-width": "96px",
              "border-radius": "50%"
            },
            "attributes": {
              "src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])",
              "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.5rem"
            },
            "txtContent": "[$User.title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap"
            },
            "txtContent": "[$JobTitle]"
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-fontColor-magentaLight",
                  "iconName": "CreateMailRule",
                  "href": "='mailto:' + [$User.email] + '?body=Dear ' + [$User.title] + ',\r\n'",
                  "title": "Email"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom",
              "display": "=if([$LinkedIn]=='','none','')"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-fontColor-magentaLight",
                  "iconName": "LinkedInLogo",
                  "href": "=[$LinkedIn]",
                  "title": "LinkedIn"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom",
              "display": "=if([$Twitter]=='','none','')"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-fontColor-magentaLight",
                  "iconName": "ContactLink",
                  "href": "=[$Twitter]",
                  "title": "Twitter"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Yanli Jiang - MSFT 31,666 Reputation points Microsoft External Staff

2023-12-13T09:28:27.4433333+00:00

Hi, we are currently doing some research on this issue, will let you know as soon as possible.

7 answers

Martin, Heidi (SE GP T SP PS) 571 Reputation points

2023-12-14T11:09:19.22+00:00

@Yanli Jiang - MSFT

The spacing is great. But is it possible that the user and job title always stay at the same height, as soon as you have more text at the bottom, it shifts. It doesn't look so nice.

Unfortunately, not everything works. It doesn't show a photo for me, what could be the reason?

When I click on this icon, I get to the desired page, but my view in SharePoint is then gone.

Thank you for your help!
Please sign in to rate this answer.
Yanli Jiang - MSFT 31,666 Reputation points Microsoft External Staff

2023-12-19T09:38:54.0566667+00:00

Hi @Martin, Heidi (SE GP T SP PS) ,

Where there are problems, there were no problems before, right? This is weird, just inserting this code shouldn't cause this problem. Try using the initial code again to see if the same situation occurs. I will continue to conduct testing and will update here as soon as the results are available. Thank you for your understanding.

Martin, Heidi (SE GP T SP PS) 571 Reputation points

2023-12-19T09:42:55.8233333+00:00

@Yanli Jiang - MSFT
The passed from the beginning. I had done the test and when I went back to the list, some content was gone and an image never shows up. I'll wait, maybe they have a solution after all. Thank you for this!
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Yanli Jiang - MSFT 31,666 Microsoft External Staff

Hi @Martin, Heidi (SE GP T SP PS) ,

I tested it in my environment and the situation is as follows:

1,For the situation where the picture is not displayed, it is recommended that you change the code of the picture part to the following:

User's image

2,For adaptive text height, there is no way to achieve it in this code. Because the text font size, picture size, and spacing of each part are fixed, there is no way to adjust them for a certain card. This is a pity.

3,For the link disappearing after jumping, because I had no way to test Linkedin and Twitter, I used other connection tests, including emails, and there was no problem after the jump. I think this is not a code problem, please check if there are other factors.

Here is the complete code I used for testing, for your reference:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "display": "flex",
      "flex-wrap": "wrap",
      "flex-direction": "column",
      "align-items": "center",
      "justify-content": "space-around",
      "min-width": "300px",
      "min-height": "286px",
      "border-radius": "8px",
      "margin-right": "10px",
      "margin-bottom": "10px",
      "box-shadow": "2px 2px 4px darkgrey"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "img",
            "style": {
              "display": "block",
              "height": "auto",
              "max-height": "96px",
              "max-width": "96px",
              "border-radius": "50%"
            },
            "attributes": {
              "src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M'+'&username='+[$User.email], [$Picture])",
              "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.5rem"
            },
            "txtContent": "[$User.title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap",
              "margin-top": "20px"
            },
            "txtContent": "[$JobTitle]"
          },
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap",
              "margin-top": "20px",
              "margin-bottom": "20px"
            },
            "txtContent": "[$Info]"
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-fontColor-magentaLight",
                  "iconName": "CreateMailRule",
                  "href": "='mailto:' + [$User.email] + '?body=Dear ' + [$User.title] + ',\r\n'",
                  "title": "Email"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom",
              "display": "=if([$LinkedIn]=='','none','')"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-fontColor-magentaLight",
                  "iconName": "LinkedInLogo",
                  "href": "=[$LinkedIn]",
                  "title": "LinkedIn"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom",
              "display": "=if([$Twitter]=='','none','')"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-fontColor-magentaLight",
                  "iconName": "ContactLink",
                  "href": "=[$Twitter]",
                  "title": "Twitter"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Hope this helps.

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.

Martin, Heidi (SE GP T SP PS) 571 Reputation points

2024-01-08T06:17:49.71+00:00

Thank you so much! I will test it.

Share via

SharePoint - JSON Code "User Profile Card"

7 answers

Your answer