SharePoint - JSON Code "User Profile Card"

Question

Good morning,

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

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"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 1

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

If you want to add a multi-line text content, you can add the following code to the original code, like this:

          ………………
			{
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap"
            },
            "txtContent": "[$JobTitle]"
          },
           {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap"
            },
            "txtContent": "[$Info]"
          }
        ]
      },
………………

This is my test:

And the result:

Hope this is helpful.

---

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.

Answer 2

@Yanli Jiang - MSFT

Good morning,

Thank you! Unfortunately the code does not work for me.

What is wrong here?

{
  "$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.3rem"
            },
            "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",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap"
            },
            "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": "=[$Cosmos]",
                  "title": "Cosmos"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 3

Good morning,

Thank you! Unfortunately the code does not work for me.

What is wrong here?

{
  "$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.3rem"
            },
            "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",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap"
            },
            "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": "=[$Cosmos]",
                  "title": "Cosmos"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 4

@Yanli Jiang - MSFT

The new column worked! Thank you!

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

And it would be great if you could insert spacing (see picture).

Answer 5

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

You can add the margin-top parameter to the style of these fields to increase the spacing above the fields. The size can be filled in according to your needs. I made settings in the JobTitle and Info fields, this is the effect of my test:

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",
			  "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"
            },
            "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"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

You can also use the margin-bottom parameter, which increases the spacing below the field.

---

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.