List View formatting is a new feature set in SharePoint Online which lets you style the list and library views the way you like using JSON.
In this blog, you will get to see the implementation of an example step-by-step.
Brace yourself!
The example is about creating a contact card details of an employee in the organisation.
> Create a SharePoint list with following list columns as internal name: Note: Only Title field is mandatory
Title - Single line of text
JobTitle - Single line of text
Company - Single line of text
Email - Single line of text
Phone - Single line of text
StreetAddress - Single line of text
City - Single line of text
State - Single line of text
ZipCode - Single line of text
Notes - Multiple lines of text
Picture - Hyperlink
MapsPicture - Hyperlink
> Create few entries in the SharePoint list with the above column details. For Picture and MapsPicture column entries, you can create a document library to store the desired profile pictures and maps pictures.
> After you have created the entries, open up the Format current view as shown below:
> Select the following drop down values as shown below:
> Paste the below code in the JSON formatting box:
{
"$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": "930px",
"border-radius": "8px",
"box-shadow": "4px 4px 8px darkgrey"
},
"attributes": {
"class": "ms-bgColor-neutralLighter"
},
"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": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])",
"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-neutralPrimary"
}
},
{
"elmType": "span",
"txtContent": "[$JobTitle]",
"style": {
"display": "=if([$JobTitle] == '', 'none', 'block')"
},
"attributes": {
"class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
}
},
{
"elmType": "span",
"txtContent": "[$Company]",
"style": {
"display": "=if([$Company] == '', 'none', 'block')"
},
"attributes": {
"class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
}
}
]
},
{
"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-neutralPrimary ms-fontColor-themePrimary--hover",
"href": "='mailto:' + [$Email] + '?body=Dear ' + [$Title] + ',\r\n'"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Mail",
"class": "ms-fontColor-themePrimary"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "[$Email]"
}
]
},
{
"elmType": "span",
"style": {
"display": "=if([$Phone] == '', 'none', 'block')",
"width": "100%"
},
"attributes": {
"class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Phone",
"class": "ms-fontColor-themePrimary"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "[$Phone]"
}
]
}
]
}
]
}
]
},
{
"elmType": "div",
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "stretch",
"max-width": "310px",
"min-width": "205px",
"margin-top": "8px"
},
"children": [
{
"elmType": "div",
"style": {
"flex-grow": "1",
"text-align": "center"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "='https://www.google.com/maps/place/' + if([$StreetAddress] == '', '', [$StreetAddress] + ',') + if([$City] == '', '', [$City] + ',') + if([$State] == '', '', [$State]) + if([$ZipCode] == '', '', ' ' + [$ZipCode]) + '/'",
"target": "_blank"
},
"style": {
"height": "60px",
"width": "60px"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "[$MapsPicture]"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"flex-grow": "1",
"text-align": "center"
},
"children": [
{
"elmType": "span",
"txtContent": "[$StreetAddress]",
"style": {
"display": "=if([$StreetAddress] == '', 'none', 'block')"
},
"attributes": {
"class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary"
}
},
{
"elmType": "span",
"txtContent": "=if([$City] == '', '', [$City] + ', ') + if([$State] == '', '', [$State] + ' ') + if([$ZipCode] == '', '', [$ZipCode])",
"style": {
"display": "=if([$City] == '' && [$State] == '' && [$ZipCode] == '', 'none', 'block')"
},
"attributes": {
"class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary"
}
},
{
"elmType": "span",
"txtContent": "No address provided",
"style": {
"display": "=if([$City] == '' && [$State] == '' && [$ZipCode] == '', 'block', 'none')"
},
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"max-width": "310px",
"min-width": "155px"
},
"children": [
{
"elmType": "div",
"style": {
"flex-grow": "1"
},
"children": [
{
"elmType": "span",
"style": {
"display": "block"
},
"attributes": {
"class": "ms-fontWeight-semibold ms-fontSize-m"
},
"txtContent": "Notes:"
},
{
"elmType": "span",
"style": {
"display": "=if([$Notes] == '', 'none', 'block')",
"padding-left": "8px"
},
"txtContent": "[$Notes]",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
}
},
{
"elmType": "span",
"style": {
"display": "=if([$Notes] == '', 'block', 'none')",
"padding-left": "8px"
},
"txtContent": "No notes entered",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
}
}
]
},
{
"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-neutralPrimary ms-fontColor-themePrimary--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-neutralPrimary 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-neutralPrimary ms-fontColor-themePrimary--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-neutralPrimary ms-fontColor-themePrimary--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "ContactInfo"
}
}
]
}
]
}
]
}
]
}
> Below snapshot is the output of the above steps:
> Additionally this format takes advantage of CSS flex box to make it responsive:
Hope you find this useful.
Sharing is Caring!
Thanks for reading!
Comments