SharePoint Online : Show comments on List Formatting JSON.
Following source code will display List item comments count and button to open comments with edit item.
Source Code :
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"height": "50px",
"width": "285px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"height": "100%",
"width": "15%"
},
"children": [
{
"elmType": "div",
"style": {
"border-width": "2px",
"border-style": "solid",
"height": "60px"
},
"attributes": {
"class": "ms-borderColor-neutralSecondary"
}
},
{
"elmType": "div",
"style": {
"height": "60px",
"width": "20px",
"border-radius": "50%",
"cursor": "pointer",
"outline": "none",
"background-color": "black"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
}
},
{
"elmType": "div",
"style": {
"border-width": "2px",
"border-style": "solid",
"height": "60px"
},
"attributes": {
"class": "ms-borderColor-neutralSecondary"
}
}
]
},
{
"elmType": "div",
"style": {
"font-size": "20px",
"width": "50%",
"text-align": "left",
"cursor": "pointer",
"color": "#34A4E3"
},
"txtContent": "[$Title]",
"customCardProps": {
"directionalHint": "rightCenter",
"isBeakVisible": true,
"openOnEvent": "click",
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"height": "700px",
"width": "850px",
"position": "static",
"top": "auto"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"height": "50px",
"width": "100%",
"color": "white",
"font-size": "20px",
"display": "flex",
"align-items": "center",
"padding-left": "40px",
"background-color": "#34A4E3"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
}
},
{
"elmType": "a",
"attributes": {
"href": "[$pict]",
"target": "_blank"
},
"children": [
{
"elmType": "img",
"style": {
"height": "95%",
"width": "95%",
"margin-top": "10px"
},
"attributes": {
"src": "[$pict]",
"title": "[$Title]"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
"title": "Open Comment"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "OpenPane",
"class": "ms-font-xxl"
}
} ,
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": { "float": "left",
"padding": "10px"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontSize-m"
},
"children": [
{
"elmType": "span",
"style": {
"padding-right": "10px",
"float": "left"
},
"attributes": {
"iconName": "Comment"
}
},
{
"elmType": "span",
"txtContent": "=if([$_CommentCount] == '' , 0 ,[$_CommentCount]) "
}
]
}
]},
{
"elmType": "div",
"txtContent": "[$Description]",
"style": {
"height": "80%",
"width": "85%",
"padding-top": "20px"
}
}
]
}
}
}
]
}
}
