0

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:

enter image description here

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:

enter image description here

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:

enter image description here

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):

enter image description here

This works (with either false or true) as long as I don't have the condition:

 "isBeakVisible": false,

So:

  1. True or false work to show or hide the beak when used outside of a condition
  2. The logic of the condition works to show or hide the hover content and field text
  3. 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"
        }
      }
    }
  ]
}

1 Answer 1

2

Referring to your previous JSON given here, try using below JSON for your requirements:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "display": "=if(@currentField == '', 'block', 'none')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "font-size": "12px",
        "display": "=if(@currentField == '', 'none', 'block')"
      },
      "txtContent": "=if(@currentField == '', '', '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"
        }
      }
    }
  ]
}

For more information, check this: SharePoint Online JSON formatting - Conditional Popup

4
  • I'm not sure I understand - this doesn't address the issue of hiding the beak when the hover isn't displayed, does it? I've updated the question to include the full JSON for reference.
    – Darryl
    Jun 9, 2021 at 17:58
  • I am not hiding the beak here because even if you hide the beak, there will be a small hover card shown when there is not value. So, I am creating a custom hover card conditionally. when there is a value in @currentField, it creates a div element with hover card & if there is no value, it creates simple span with @currentField (empty value). Just give it a try by replacing the show/hide conditions in my JSON with your conditions & let me know if this works for you. Jun 9, 2021 at 18:37
  • It worked! I just needed to remove the textContent in line 7 to get the result I wanted. Thanks!
    – Darryl
    Jun 10, 2021 at 15:33
  • Great, glad it helped you @Darryl !! Jun 10, 2021 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.