I have a SharePoint Online list with a number of reference columns: they need to be included in the view so that I can reference them in the JSON conditions in other columns, but the users don't usually need to see the values.
To keep them out of the way, I've formatted them so that, if they aren't null, they show "Hover to View" and then display the contents if the user hovers:
If they are null, then the text doesn't appear, and the hover box doesn't pop up, even if the user happens to have their mouse over the field. All of that is working correctly, but I can't seem to get rid of the hover "beak" in the same way, so even if the field doesn't display the hover box, it still shows the beak when the user has their mouse on the field:
The logic in the conditional formatting for the beak should be the same as for the hover box (if the box should appear, so should the beak; if the box shouldn't appear, the beak shouldn't either). This is the problem statement in the JSON:
"isBeakVisible": "=if(indexOf(@currentField,'No notifications') !=-1,false,if(indexOf(@currentField, 'Skip') !=-1, false,true))"
I know the conditional logic is correct because it works as expected to show or hide the text in the field (as well as the hover content):
"display": "=if(indexOf(@currentField,'No notifications') !=-1,'none',if(indexOf(@currentField, 'Skip') !=-1, 'none','inline-block'))"
SharePoint indicates a problem with the code for isBeakVisible
because it expects a Boolean value:
As far as I can tell, false or true are the values I should be using (without quotation marks - I've tried with and it doesn't solve the problem). If I change the statement to remove the condition it works correctly (you can see that the field is highlighted because my mouse is over it, but the beak doesn't show):
This works (with either false or true) as long as I don't have the condition:
"isBeakVisible": false,
So:
- True or false work to show or hide the beak when used outside of a condition
- The logic of the condition works to show or hide the hover content and field text
- When the condition for isBeakVisible outputs true or false it doesn't work because it isn't understood as a boolean value
How can I make the output of my condition a boolean value so that the formatting works as expected?
EDIT For reference, here's the full JSON statement:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "12px",
"background-color": "lightgrey",
"padding": "0px 0px 0px 5px"
},
"txtContent": "=if(indexOf(@currentField,'No notifications') !=-1,'',if(indexOf(@currentField, 'Skip') !=-1, '','Hover to View'))",
"customCardProps": {
"formatter": {
"elmType": "div",
"txtContent": "@currentField",
"style": {
"width": "300px",
"padding": "15px",
"word-break": "break-all",
"display": "=if(indexOf(@currentField,'No notifications') !=-1,'none',if(indexOf(@currentField, 'Skip') !=-1, 'none','inline-block'))"
}
},
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": "=if(indexOf(@currentField,'No notifications') !=-1,false,if(indexOf(@currentField, 'Skip') !=-1, false,true))",
"beakStyle": {
"backgroundColor": "white"
}
}
}
Update - Working Solution
Based on the suggestion from Ganesh Sanap I was able to hide the beak successfully. I had to remove the "txtContent": "@currentField", in line 8, or my text when the field was populated ("Hover to View") was displayed twice.
Here's the working code that hides the beak as well as the hover box if the field doesn't pass the conditions:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "12px",
"background-color": "lightgrey",
"padding": "0px 0px 0px 5px"
},
"children": [
{
"elmType": "span",
"style": {
"display": "=if(indexOf(@currentField,'No notifications') !=-1,'none',if(indexOf(@currentField, 'Skip') !=-1, 'none','block'))"
}
},
{
"elmType": "div",
"style": {
"font-size": "12px",
"display": "=if(indexOf(@currentField,'No notifications') !=-1, 'none', if(indexOf(@currentField, 'Skip') !=-1, 'none','block'))",
"background-color": "lightgrey"
},
"txtContent": "=if(indexOf(@currentField,'No notifications') !=-1,'',if(indexOf(@currentField, 'Skip') !=-1, '','Hover to View'))",
"customCardProps": {
"formatter": {
"elmType": "div",
"txtContent": "@currentField",
"style": {
"width": "400px",
"padding": "15px",
"word-break": "break-all"
}
},
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "white"
}
}
}
]
}