Create user profile card using SharePoint Online modern list view customization using JSON

In this SharePoint customization tutorial, we will discuss how to create a user profile card using SharePoint Online modern list view customization using JSON.

As we know in the year 2016, SharePoint online team released Modern List and Library experience in both SharePoint On-Premise and SharePoint Online. So now a day business recommends this feature for more benefits.

I am not using JSLink to customize our modern SharePoint list rather than, I am going forward to use JSON for an excellent user interface.

If we go in detail, there are many good features added in both modern lists and libraries but here I am using those called List View Customization.

SharePoint Online modern list view customization: Create User Profile Card

Step 1: I have created a SharePoint List called Employee Contact List and it contains the following column name.

  • Title- Single Line Text
  • Job Title-Single Line Text
  • Company -Single Line Text
  • E-Mail-Single Line Text
  • Home Phone -Single Line Text
  • Address -Single Line Text
  • City -Single Line Text
  • Pin-Single Line Text
SharePoint Online modern list view customization

Step 2: Next click on All Items and click on Format View to implement our customization code

SharePoint Online modern list view customization User Profile Card

Step 3: Next copy the below code and paste it inside code editor and click on Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "16px",
      "max-width": "600px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px lightblue"
    },
    "attributes": {
      "class": "ms-bgColor-themePrimary ms-fontColor-white"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "310px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "none"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "100px",
                  "height": "100px",
                  "overflow": "hidden",
                  "border-radius": "50%",
                  "margin-right": "8px"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "/_layouts/15/userphoto.aspx?size=M&username=rswain44@pikasha12.onmicrosoft.com",
                      "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
                    },
                    "style": {
                      "position": "relative",
                      "top": "50%",
                      "left": "50%",
                      "width": "100%",
                      "height": "auto",
                      "margin-left": "-50%",
                      "margin-top": "-50%"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "stretch",
              "max-width": "200px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$JobTitle]",
                    "style": {
                      "display": "=if([$JobTitle] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Company]",
                    "style": {
                      "display": "=if([$Company] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "row",
                  "flex-wrap": "wrap",
                  "align-items": "flex-end"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "display": "=if([$EMail] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-white ms-fontColor-white--hover",
                      "href": "='mailto:' + [$EMail] + '?body=Dear ' + [$Title] + ',\r\n'"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "iconName": "Mail",
                          "class": "ms-fontColor-white"
                        },
                        "style": {
                          "padding-right": "6px"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$EMail]"
                      }
                    ]
                  },
                  {
                    "elmType": "span",
                    "style": {
                      "display": "=if([$HomePhone] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-white"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "txtContent": "=if([$WorkAddress] == '', '', [$WorkAddress] + ', ') + if([$WorkCity] == '', '', [$WorkCity] + ', ') + if([$WorkState] == '', '', [$WorkState] + ' ') + if([$WorkZip] == '', '', [$WorkZip])",
                        "style": {
                          "display": "=if([$WorkCity] == '' && [$WorkState] == '' && [$WorkZip] == '', 'none', 'block')"
                        },
                        "attributes": {
                          "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-white"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "No address provided",
                        "style": {
                          "display": "=if([$WorkCity] == '' && [$WorkState] == '' && [$WorkZip] == '', 'block', 'none')"
                        },
                        "attributes": {
                          "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-white"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "max-width": "170px",
          "min-width": "120px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "display": "block"
                },
                "attributes": {
                  "class": "ms-fontWeight-semibold ms-fontSize-m"
                },
                "txtContent": "Comments:"
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$_Comments] == '', 'none', 'block')",
                  "padding-left": "8px"
                },
                "txtContent": "[$_Comments]",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-white"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$_Comments] == '', 'block', 'none')",
                  "padding-left": "8px"
                },
                "txtContent": "No Comments entered",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-white"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "none",
              "display": "flex",
              "flex-direction": "row-reverse",
              "flex-wrap": "nowrap"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "share"
                },
                "attributes": {
                  "title": "Share",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Share"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "delete"
                },
                "attributes": {
                  "title": "Delete",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Delete"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "attributes": {
                  "title": "Edit",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Edit"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "defaultClick"
                },
                "attributes": {
                  "title": "See more details",
                  "class": "ms-fontColor-white ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "ContactInfo"
                    }
                  }
                ]
              },
              {
                "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"
                    }
                  }
                ]
              },
              {
                "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([$Facebook]=='','none','')"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "class": "ms-fontColor-magentaLight",
                      "iconName": "FacebookLogo",
                      "href": "=[$Facebook]",
                      "title": "Facebook"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Step 4: Once I click on the Save button, My SharePoint List view got changed to different views which same as the below screenshot.

SharePoint Online modern list view customization example

Step 5: There are few icons added in the below which will redirect you to the respective page, once you click on it. Here You can share the Contact details.

Create user profile card using SharePoint Online modern list view

Step 6: Here you can delete the item once you click on delete Icon.

SharePoint Online modern list view customization User Profile Card

Step 7: Here you can edit the Item, once you click on Edit icon.

SharePoint Online modern list view customization using JSON

Step 8: You can view the item, once you click on View Item.

sharepoint modern list view customization

Also I have added Facebook, LinkedIn, and Twitter to redirect to the employee profile page.

This is all about customization of List View in SharePoint Modern List.

You can check out following tutorials:

Reference: for ms-bgcolor change , you can follow the below URL

This tutorial we learned how to create user profile card using SharePoint Online modern list view customization using JSON.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Great post! I love the customized profile card. Thanks for sharing this. Two small questions:

    1.) Why doesn’t

    “iconName”: “TwitterLogo” (instead of “ContactLink”)

    work in a List web part?

    It seems like “FacebookLogo” has the same issue when not directly navigated to the list in the custom view.

    2.) Similarly, why doesn’t

    “href”: “=’sip:’ + [$Person.email]”

    work for opening Teams/Skype for Business in a List web part, but

    “href”: “=’mailto:’ + [$Person.email]” works for opening the default mail client?

    In both cases, are these just not supported yet?

    Thanks in advance!

  • >