JSON for a Choice Column to display Value
I am trying to display the value in the column “Category” which is a choice column in the section
“children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “[$Icon]”
}
},
{
“elmType”: “div”,
“txtContent”: “[$Category]”
}
]
},
{
“elmType”: “div”,
“txtContent”: “= ‘This category represents: ‘ + [$Category]”,
“style”: {
“margin-top”: “10px”
}
}
]
}
}
}
Here’s my entire code
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json”,
“width”: 300,
“height”: 450,
“hideSelection”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“width”: “95%”,
“height”: “95%”,
“border”: “1px solid”,
“box-shadow”: “0 3.2px 7.2px 0”,
“border-radius”: “6px”,
“display”: “flex”,
“flex-direction”: “column”,
“justify-content”: “center”
},
“attributes”: {
“class”: “ms-fontColor-neutralTertiaryAlt”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“width”: “70%”,
“display”: “flex”,
“flex-direction”: “row-reverse”,
“height”: “30px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“position”: “relative”,
“display”: “flex”,
“justify-content”: “center”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“width”: “50px”,
“height”: “50px”,
“border-radius”: “50%”,
“border”: “2px solid”,
“z-index”: “2”,
“display”: “flex”,
“justify-content”: “center”,
“align-items”: “center”,
“font-size”: “28px”
},
“attributes”: {
“class”: “ms-bgColor-themePrimary ms-fontColor-white”,
“iconName”: “[$Icon]”,
“title”: “[$Category]”
},
“customCardProps”: {
“openOnEvent”: “hover”,
“directionalHint”: “rightCenter”,
“isBeakVisible”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“max-height”: “300px”,
“padding”: “1px 1px 5px 20px”,
“display”: “flex”,
“flex-direction”: “column”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“padding”: “5px”,
“font-weight”: “bold”,
“font-size”: “20px”,
“display”: “flex”,
“align-items”: “center”,
“flex-direction”: “row”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “[$Icon]”
}
},
{
“elmType”: “div”,
“txtContent”: “[$Category]”
}
]
},
{
“elmType”: “div”,
“txtContent”: “= ‘This category represents: ‘ + [$Category]”,
“style”: {
“margin-top”: “10px”
}
}
]
}
}
},
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“top”: “45px”,
“z-index”: “1”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“width”: “40px”,
“height”: “20px”
},
“attributes”: {
“class”: “ms-bgColor-themePrimary”
}
},
{
“elmType”: “div”,
“style”: {
“border-left”: “20px solid”,
“border-right”: “20px solid”,
“border-bottom”: “10px solid transparent”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary”
}
}
]
}
]
}
]
},
{
“elmType”: “img”,
“style”: {
“width”: “150px”,
“height”: “150px”,
“border-radius”: “50%”,
“border”: “1px solid”
},
“attributes”: {
“src”: “=getUserImage([$To.email], ‘L’)”,
“class”: “ms-fontColor-neutralTertiaryAlt”
},
“defaultHoverField”: “[$To]”
},
{
“elmType”: “div”,
“txtContent”: “[$To.title]”,
“style”: {
“font-size”: “15px”,
“padding”: “5px”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
}
},
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “column”,
“width”: “85%”,
“height”: “65%”,
“overflow”: “hidden”,
“margin-top”: “5px”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
},
“children”: [
{
“elmType”: “div”,
“txtContent”: “[$RecognitionTitle]”,
“style”: {
“font-weight”: “bold”,
“font-size”: “23px”
}
},
{
“elmType”: “div”,
“txtContent”: “[$Description]”,
“style”: {
“margin-top”: “10px”
}
}
]
},
{
“elmType”: “div”,
“txtContent”: “= ‘From: ‘ + [$From.title]”,
“defaultHoverField”: “[$From]”,
“style”: {
“width”: “90%”,
“display”: “flex”,
“flex-direction”: “row-reverse”,
“height”: “40px”,
“align-items”: “center”,
“overflow”: “hidden”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
}
},
{
“elmType”: “div”,
“txtContent”: “= ‘Submitted On: ‘ + toLocaleDateString([$Date])”,
“style”: {
“width”: “90%”,
“display”: “flex”,
“flex-direction”: “row-reverse”,
“height”: “40px”,
“align-items”: “center”,
“overflow”: “hidden”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
}
},
{
“elmType”: “div”,
“style”: {
“width”: “90%”,
“display”: “flex”,
“justify-content”: “space-between”,
“font-size”: “16px”,
“margin-top”: “0px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”,
“align-items”: “center”,
“cursor”: “pointer”,
“padding”: “1px 1px 3px 5px”,
“border-radius”: “1px”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary ms-fontColor-themeDark–hover ms-bgColor-themeLighter–hover”
},
“customRowAction”: {
“action”: “setValue”,
“actionInput”: {
“Likes”: “=if(indexOf([$Likes.email] , @me) > -1 , removeFrom([$Likes.email] , @me) , appendTo([$Likes.email] , @me) )”
}
},
“customCardProps”: {
“openOnEvent”: “hover”,
“directionalHint”: “rightCenter”,
“isBeakVisible”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“max-height”: “300px”,
“padding”: “1px 1px 5px 20px”,
“display”: “flex”,
“flex-direction”: “column”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“padding”: “5px”,
“font-weight”: “bold”,
“font-size”: “20px”,
“display”: “flex”,
“align-items”: “center”,
“flex-direction”: “row”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “HeartFill”
}
},
{
“elmType”: “div”,
“txtContent”: “=length([$Likes])”
}
]
},
{
“elmType”: “div”,
“children”: [
{
“forEach”: “personIterator in [$Likes]”,
“elmType”: “div”,
“style”: {
“margin-bottom”: “5px”,
“display”: “flex”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “img”,
“style”: {
“width”: “32px”,
“height”: “32px”,
“border-radius”: “50%”,
“margin-right”: “5px”
},
“attributes”: {
“src”: “=getUserImage([$personIterator.email], ‘S’)”,
“title”: “[$personIterator.title]”
}
},
{
“elmType”: “span”,
“txtContent”: “[$personIterator.title]”
}
]
}
]
}
]
}
},
“children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “=if(indexOf([$Likes.email] , @me) > -1 , ‘HeartFill’ , ‘Heart’ )”
}
},
{
“elmType”: “div”,
“txtContent”: “=length([$Likes])”
}
]
}
]
}
]
}
]
}
}
I am trying to display the value in the column “Category” which is a choice column in the section “children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “[$Icon]”
}
},
{
“elmType”: “div”,
“txtContent”: “[$Category]”
}
]
},
{
“elmType”: “div”,
“txtContent”: “= ‘This category represents: ‘ + [$Category]”,
“style”: {
“margin-top”: “10px”
}
}
]
}
}
}Here’s my entire code{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json”,
“width”: 300,
“height”: 450,
“hideSelection”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“width”: “95%”,
“height”: “95%”,
“border”: “1px solid”,
“box-shadow”: “0 3.2px 7.2px 0”,
“border-radius”: “6px”,
“display”: “flex”,
“flex-direction”: “column”,
“justify-content”: “center”
},
“attributes”: {
“class”: “ms-fontColor-neutralTertiaryAlt”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“width”: “70%”,
“display”: “flex”,
“flex-direction”: “row-reverse”,
“height”: “30px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“position”: “relative”,
“display”: “flex”,
“justify-content”: “center”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“width”: “50px”,
“height”: “50px”,
“border-radius”: “50%”,
“border”: “2px solid”,
“z-index”: “2”,
“display”: “flex”,
“justify-content”: “center”,
“align-items”: “center”,
“font-size”: “28px”
},
“attributes”: {
“class”: “ms-bgColor-themePrimary ms-fontColor-white”,
“iconName”: “[$Icon]”,
“title”: “[$Category]”
},
“customCardProps”: {
“openOnEvent”: “hover”,
“directionalHint”: “rightCenter”,
“isBeakVisible”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“max-height”: “300px”,
“padding”: “1px 1px 5px 20px”,
“display”: “flex”,
“flex-direction”: “column”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“padding”: “5px”,
“font-weight”: “bold”,
“font-size”: “20px”,
“display”: “flex”,
“align-items”: “center”,
“flex-direction”: “row”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “[$Icon]”
}
},
{
“elmType”: “div”,
“txtContent”: “[$Category]”
}
]
},
{
“elmType”: “div”,
“txtContent”: “= ‘This category represents: ‘ + [$Category]”,
“style”: {
“margin-top”: “10px”
}
}
]
}
}
},
{
“elmType”: “div”,
“style”: {
“position”: “absolute”,
“top”: “45px”,
“z-index”: “1”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“width”: “40px”,
“height”: “20px”
},
“attributes”: {
“class”: “ms-bgColor-themePrimary”
}
},
{
“elmType”: “div”,
“style”: {
“border-left”: “20px solid”,
“border-right”: “20px solid”,
“border-bottom”: “10px solid transparent”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary”
}
}
]
}
]
}
]
},
{
“elmType”: “img”,
“style”: {
“width”: “150px”,
“height”: “150px”,
“border-radius”: “50%”,
“border”: “1px solid”
},
“attributes”: {
“src”: “=getUserImage([$To.email], ‘L’)”,
“class”: “ms-fontColor-neutralTertiaryAlt”
},
“defaultHoverField”: “[$To]”
},
{
“elmType”: “div”,
“txtContent”: “[$To.title]”,
“style”: {
“font-size”: “15px”,
“padding”: “5px”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
}
},
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “column”,
“width”: “85%”,
“height”: “65%”,
“overflow”: “hidden”,
“margin-top”: “5px”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
},
“children”: [
{
“elmType”: “div”,
“txtContent”: “[$RecognitionTitle]”,
“style”: {
“font-weight”: “bold”,
“font-size”: “23px”
}
},
{
“elmType”: “div”,
“txtContent”: “[$Description]”,
“style”: {
“margin-top”: “10px”
}
}
]
},
{
“elmType”: “div”,
“txtContent”: “= ‘From: ‘ + [$From.title]”,
“defaultHoverField”: “[$From]”,
“style”: {
“width”: “90%”,
“display”: “flex”,
“flex-direction”: “row-reverse”,
“height”: “40px”,
“align-items”: “center”,
“overflow”: “hidden”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
}
},
{
“elmType”: “div”,
“txtContent”: “= ‘Submitted On: ‘ + toLocaleDateString([$Date])”,
“style”: {
“width”: “90%”,
“display”: “flex”,
“flex-direction”: “row-reverse”,
“height”: “40px”,
“align-items”: “center”,
“overflow”: “hidden”
},
“attributes”: {
“class”: “ms-fontColor-neutralSecondary”
}
},
{
“elmType”: “div”,
“style”: {
“width”: “90%”,
“display”: “flex”,
“justify-content”: “space-between”,
“font-size”: “16px”,
“margin-top”: “0px”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“display”: “flex”,
“flex-direction”: “row”,
“align-items”: “center”,
“cursor”: “pointer”,
“padding”: “1px 1px 3px 5px”,
“border-radius”: “1px”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary ms-fontColor-themeDark–hover ms-bgColor-themeLighter–hover”
},
“customRowAction”: {
“action”: “setValue”,
“actionInput”: {
“Likes”: “=if(indexOf([$Likes.email] , @me) > -1 , removeFrom([$Likes.email] , @me) , appendTo([$Likes.email] , @me) )”
}
},
“customCardProps”: {
“openOnEvent”: “hover”,
“directionalHint”: “rightCenter”,
“isBeakVisible”: true,
“formatter”: {
“elmType”: “div”,
“style”: {
“max-height”: “300px”,
“padding”: “1px 1px 5px 20px”,
“display”: “flex”,
“flex-direction”: “column”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“padding”: “5px”,
“font-weight”: “bold”,
“font-size”: “20px”,
“display”: “flex”,
“align-items”: “center”,
“flex-direction”: “row”
},
“attributes”: {
“class”: “ms-fontColor-themePrimary”
},
“children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “HeartFill”
}
},
{
“elmType”: “div”,
“txtContent”: “=length([$Likes])”
}
]
},
{
“elmType”: “div”,
“children”: [
{
“forEach”: “personIterator in [$Likes]”,
“elmType”: “div”,
“style”: {
“margin-bottom”: “5px”,
“display”: “flex”,
“align-items”: “center”
},
“children”: [
{
“elmType”: “img”,
“style”: {
“width”: “32px”,
“height”: “32px”,
“border-radius”: “50%”,
“margin-right”: “5px”
},
“attributes”: {
“src”: “=getUserImage([$personIterator.email], ‘S’)”,
“title”: “[$personIterator.title]”
}
},
{
“elmType”: “span”,
“txtContent”: “[$personIterator.title]”
}
]
}
]
}
]
}
},
“children”: [
{
“elmType”: “div”,
“style”: {
“margin-right”: “5px”
},
“attributes”: {
“iconName”: “=if(indexOf([$Likes.email] , @me) > -1 , ‘HeartFill’ , ‘Heart’ )”
}
},
{
“elmType”: “div”,
“txtContent”: “=length([$Likes])”
}
]
}
]
}
]
}
]
}
} Read More
