Updated on Nov 29 2022
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "a",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-neutralPrimary",
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"float": "left",
"width": "210px",
"height": "200px",
"text-decoration": "none",
"margin-right": "10px",
"box-shadow": "2px 3px 6px 1px #969696",
"-webkit-box-shadow": "2px 3px 6px 1px #969696"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"flex-direction": "column",
"align-items": "stretch"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "[$IconImage.serverRelativeUrl]",
"title": "[$Title]",
"alt": "[$Title]"
},
"style": {
"width": "210px",
"height": "151px"
},
"children": [
{
"elmType": "span",
"txtContent": "[$Title]",
"style": {
"margin-bottom": "-3px",
"height": "50px",
"padding-left": "8px",
"padding-top": "8px",
"font-size": "14px"
}
}
]
}
]
}
]
}
}
Updated on Nov 27 2022
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideListHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"float": "left",
"padding-bottom": "10px",
"background-color": "aliceblue",
"min-width": "320px",
"width": "100%",
"margin-right": "10px",
"margin-bottom": "10px",
"min-height": "75px"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "img",
"style": {
"display": "block",
"width": "45px",
"height": "auto",
"border-radius": "50%",
"padding-left": "5px"
},
"attributes": {
"src": "='/_layouts/15/userphoto.aspx?size=S&username=' + [$Person.email]"
}
}
]
},
{
"elmType": "div",
"style": {
"text-align": "left",
"padding": "5px",
"width": "75%",
"padding-left": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"font-weight": "500",
"font-size": "1.5rem"
},
"txtContent": "[$Person.title]"
},
{
"elmType": "div",
"style": {
"font-weight": "500",
"font-size": "1.1em",
"overflow": "hidden",
"max-width": "280px",
"white-space": "nowrap"
},
"txtContent": "[$JobTitle]"
},
{
"elmType": "div",
"txtContent": "[$PhoneNumber]"
}
],
"defaultHoverField": "[$Person]"
}
]
}
}
FAQ
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"hideListHeader": true,
"groupProps": {
"headerFormatter": {
"elmType": "div",
"attributes": {
"class": "sp-row-card"
},
"style": {
"color": "black",
"background-color": "#FAF9F9",
"flex-grow": "1",
"display": "flex",
"flex-direction": "row",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"flex-wrap": "nowrap",
"overflow": "auto",
"margin": "1px 4px 4px 1px"
},
"children": [
{
"elmType": "img",
"style": {
"max-width": "24px",
"max-height": "24px",
"margin-top": "2px",
"border-radius": "2px"
}
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "bold",
"font-size": "15px"
},
"txtContent": "@group.fieldData.displayValue"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"justify-content": "center"
}
}
]
}
]
}
},
"rowFormatter": {
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt"
},
"style": {
"justify-content": "start",
"color": "ms-fontColor-Primary",
"display": "flex",
"padding": "1px 8px 5px 20px",
"border-radius": "6px",
"max-width": "905px",
"margin": "1px 4px 4px 60px"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left",
"font-weight": "500",
"font-size": "13px"
},
"children": [
{
"elmType": "span",
"style": {
"margin-top": "8px",
"padding-left": "1px",
"color": "crimson"
},
"attributes": {
"class": "ms-fontSize-m",
"iconName": "Lightbulb"
}
},
{
"elmType": "span",
"attributes": {
"class": "sp-row-listPadding"
},
"txtContent": "Answer",
"style": {
"font-weight": "500",
"color": "darkgreen",
"padding-left": "4px"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"txtContent": "[$Answer]",
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "center",
"max-width": "900px",
"min-width": "205px",
"margin-top": "8px",
"margin-bottom": "8px"
}
},
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"txtContent": "Show more",
"attributes": {
"class": "sp-row-button"
},
"style": {
"display": "=if([$ShowMore] == 'Yes', 'block', 'none')",
"margin-bottom": "8px",
"color": "white",
"background-color": "#0077DB"
}
}
]
}
]
}
}
Quick Links in Tiles View
Below are the fields required
- Title
- Icon – Single line of Text
- URL – hyperlink
- IsActive – Yes/No
- IconImage – Image field
Create a new view and use the below code to format the view.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"text-decoration": "none",
"float": "left",
"min-width": "90px",
"max-width": "90px",
"padding-right": "10px"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"width": "100%",
"text-decoration": "none"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-neutralPrimary"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"min-height": "85px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"style": {
"padding":"5px",
"font-size": "12px",
"font-weight": "700"
},
"txtContent": "[$Title]"
},
{
"elmType": "img",
"attributes": {
"src": "[$IconImage.serverRelativeUrl]"
},
"style": {
"width": "25px"
}
}
]
}
]
}
]
}
]
}
}
Quick Links – Icon and Text
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"text-decoration": "none",
"float": "left",
"min-width": "90px",
"max-width": "90px",
"padding-right": "10px"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"width": "100%",
"text-decoration": "none"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-neutralPrimary"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"min-height": "85px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "0 auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
},
"style": {
"font-size": "25px",
"margin-top": "10px"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"style": {
"padding":"5px",
"font-size": "12px",
"font-weight": "700"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
]
}
}
Quick Link – Icon and Text side by side
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"text-decoration": "none",
"max-width": "200px",
"padding-right": "10px"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"width": "100%",
"text-decoration": "none"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-neutralPrimary"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"min-height": "40px",
"margin-top": "10px",
"border": "1px solid #CCC"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"float": "left",
"align-items": "flex-start"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
},
"style": {
"font-size": "25px",
"display": "flex",
"margin": "auto",
"margin-left": "10px",
"margin-right": "5px"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"style": {
"padding":"5px",
"font-size": "12px",
"font-weight": "700",
"margin": "auto"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
]
}
}
Knowledge Share 