Forum Discussion
Solved
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])"
}
]
}
]
}
]
}
]
}
}
Hongan1300 Without knowing exactly what error, you are getting, your json looks fine in my end. You want the category to be displayed in the mouse over, right?
If you get the same result as me (see screenshot), but it's just the value that's missing, it is probably because you need to add the column to the view. Views can not read column values, that are note added to the view.
2 Replies
Hongan1300 Without knowing exactly what error, you are getting, your json looks fine in my end. You want the category to be displayed in the mouse over, right?
If you get the same result as me (see screenshot), but it's just the value that's missing, it is probably because you need to add the column to the view. Views can not read column values, that are note added to the view.
- Sweet! The problem was the column wasn't being shown. thank you!!!
