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
Step 2: Next click on All Items and click on Format View to implement our customization code
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&[email protected]",
"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.
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.
Step 6: Here you can delete the item once you click on delete Icon.
Step 7: Here you can edit the Item, once you click on Edit icon.
Step 8: You can view the item, once you click on View Item.
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:
- How to Embed Facebook Page into SharePoint Online Modern Site Page
- SharePoint modern list column formatting examples
- Hide Browse and Page tab from page using CSS in SharePoint Online
- How to hide Notebook and Site contents from quick launch in SharePoint Online
- SharePoint online spfx script editor web part
- How to get the total number of users from SharePoint group using JSOM
- How to Create a Tiles View using SharePoint Online modern list view customization
Reference: for ms-bgcolor change , you can follow the below URL
- https://sharepoint-json-formatter.herokuapp.com/
- https://docs.microsoft.com/en-us/sharepoint/dev/design/themes-colors
- https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
- https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
This tutorial we learned how to create user profile card using SharePoint Online modern list view customization using JSON.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
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!
Thanks for the update. Let me check the code and update you soon.