Change Pill Hover Messages
Hi there,
I have a column that has 5 choices that can be selected which are displayed as pills and can have more than one selected.
I would like to conditionally format the pills so that when they are hovered over they would display the appropriate part numbers for each hardware version.
e.g.
v2.5 when hovered would display:
29604, 29605, 29606, 29607, 29608
my plan was to use a customProp and in the textContent use conditional formatting to modfiy the message based on the pill selected.
like below:
textContent: “=if([$__INTERNAL__] == ‘v2.5’, ‘29604….’, ‘fail’)”
However $__INTERNAL always renders as an empty text field and I’m not sure why. Is there a different variable I should be using to select the textContent from the pill box in this field?
Below is my json file.
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“style”: {
“flex-wrap”: “wrap”,
“display”: “flex”
},
“children”: [
{
“forEach”: “__INTERNAL__ in @currentField”,
“elmType”: “div”,
“style”: {
“box-sizing”: “border-box”,
“padding”: “4px 8px 5px 8px”,
“overflow”: “hidden”,
“text-overflow”: “ellipsis”,
“display”: “flex”,
“border-radius”: “16px”,
“height”: “24px”,
“align-items”: “center”,
“white-space”: “nowrap”,
“margin”: “4px 4px 4px 4px”
},
“attributes”: {
“class”: {
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.5”
]
},
“sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2”
]
},
“sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2 MWMII”
]
},
“sp-css-backgroundColor-BgGold sp-css-color-GoldFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.2”
]
},
“sp-css-backgroundColor-BgCoral sp-css-color-CoralFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.3”
]
},
“sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont”,
“sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary”
]
}
]
}
]
}
]
}
]
}
},
“children”: [
{
“elmType”: “span”,
“style”: {
“overflow”: “hidden”,
“text-overflow”: “ellipsis”,
“padding”: “0 3px”
},
“txtContent”: “[$__INTERNAL__]”,
“customCardProps”: {
“formatter”: {
“elmType”: “div”,
“txtContent”: “if([$__INTERNAL__] == ‘v2.5’, ‘pass’, ‘fail’)”,
“style”: {
“font-size”: “12px”,
“color”: “green”,
“padding”: “5px”
}
},
“openOnEvent”: “hover”,
“directionalHint”: “bottomCenter”,
“isBeakVisible”: true,
“beakStyle”: {
“backgroundColor”: “white”
}
},
“attributes”: {
“class”: {
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.5”
]
},
“sp-css-color-CornflowerBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2”
]
},
“sp-css-color-MintGreenFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2 MWMII”
]
},
“sp-css-color-GoldFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.2”
]
},
“sp-css-color-CoralFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.3”
]
},
“sp-css-color-DustRoseFont”,
“”
]
}
]
}
]
}
]
}
]
}
}
}
]
}
]
}
Hi there,I have a column that has 5 choices that can be selected which are displayed as pills and can have more than one selected. I would like to conditionally format the pills so that when they are hovered over they would display the appropriate part numbers for each hardware version. e.g.v2.5 when hovered would display:29604, 29605, 29606, 29607, 29608 my plan was to use a customProp and in the textContent use conditional formatting to modfiy the message based on the pill selected. like below: textContent: “=if([$__INTERNAL__] == ‘v2.5’, ‘29604….’, ‘fail’)” However $__INTERNAL always renders as an empty text field and I’m not sure why. Is there a different variable I should be using to select the textContent from the pill box in this field? Below is my json file. {
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“style”: {
“flex-wrap”: “wrap”,
“display”: “flex”
},
“children”: [
{
“forEach”: “__INTERNAL__ in @currentField”,
“elmType”: “div”,
“style”: {
“box-sizing”: “border-box”,
“padding”: “4px 8px 5px 8px”,
“overflow”: “hidden”,
“text-overflow”: “ellipsis”,
“display”: “flex”,
“border-radius”: “16px”,
“height”: “24px”,
“align-items”: “center”,
“white-space”: “nowrap”,
“margin”: “4px 4px 4px 4px”
},
“attributes”: {
“class”: {
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.5”
]
},
“sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2”
]
},
“sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2 MWMII”
]
},
“sp-css-backgroundColor-BgGold sp-css-color-GoldFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.2”
]
},
“sp-css-backgroundColor-BgCoral sp-css-color-CoralFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.3”
]
},
“sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont”,
“sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary”
]
}
]
}
]
}
]
}
]
}
},
“children”: [
{
“elmType”: “span”,
“style”: {
“overflow”: “hidden”,
“text-overflow”: “ellipsis”,
“padding”: “0 3px”
},
“txtContent”: “[$__INTERNAL__]”,
“customCardProps”: {
“formatter”: {
“elmType”: “div”,
“txtContent”: “if([$__INTERNAL__] == ‘v2.5’, ‘pass’, ‘fail’)”,
“style”: {
“font-size”: “12px”,
“color”: “green”,
“padding”: “5px”
}
},
“openOnEvent”: “hover”,
“directionalHint”: “bottomCenter”,
“isBeakVisible”: true,
“beakStyle”: {
“backgroundColor”: “white”
}
},
“attributes”: {
“class”: {
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.5”
]
},
“sp-css-color-CornflowerBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2”
]
},
“sp-css-color-MintGreenFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2 MWMII”
]
},
“sp-css-color-GoldFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.2”
]
},
“sp-css-color-CoralFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$__INTERNAL__]”,
“v2.3”
]
},
“sp-css-color-DustRoseFont”,
“”
]
}
]
}
]
}
]
}
]
}
}
}
]
}
]
} Read More