1

I've created a custom view that includes a popup description of each file in my SharePoint library.

This works well when I'm within a sub-folder that has a list of files, but when I navigate to the main list of sub-folders within the library the custom formatting continues and a blank pop up appears because the folders don't have descriptions.

Is there a way to use conditional formatting so that the pop-up only appears for rows that have text in the description column?

This is my code currently:

{
  "elmType": "div",
  "style": {
    "font-size": "16px",
    "color": "white"
  },
  "txtContent": "@currentField",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "[$Description]",
      "style": {
        "font-size": "14px",
        "padding": "10px",
        "width": "500px",
        "color": "black",
        "background-color": "white"
      }
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}
0

You cannot show/hide customCardProps conditionally. You have to show/hide the element where you added customCardProps. So, you need to create two elements and show/hide them based on value of Description field.

Try below JSON code, it should work for you:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "16px",
    "color": "white"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "display": "=if([$Description] == '', 'block', 'none')"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "style": {
        "display": "=if([$Description] == '', 'none', 'block')"
      },
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "txtContent": "[$Description]",
          "style": {
            "font-size": "14px",
            "padding": "10px",
            "width": "500px",
            "color": "black",
            "background-color": "white"
          }
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
  ]
}

Microsoft documentation: Use column formatting to customize SharePoint

Update from comments:

You can refer to the column formatting JSON schema at: https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json

You can see that there is no style property supported for customCardProps:

enter image description here

5
  • You can add style to customCardProps, the OP already uses it! and I also have tried it on my side and it's working as expected! so Have you tried my solution before saying you can't?!! – Mohamed El-Qassas MVP Jan 7 at 9:09
  • Yes, I tried your solution and it is still showing blank popup (Did you really tried it on your site?). And I didn't say we cannot apply style to customCardProps. I am saying that we cannot make it show/hide conditionally (You have to hide the element where you added customCardProps like I did in my solution). And the style you are referring is applied to div element inside customCardProps not applied directly to customCardProps. Hope that helps! :) – Ganesh Sanap Jan 7 at 9:59
  • Whoever blindly downvoted my solution should try it on their site OR can refer to the my updated answer OR can refer to the Microsoft official JSON schema and see that style property is not supported for customCardProps at: developer.microsoft.com/json-schemas/sp/v2/… – Ganesh Sanap Jan 7 at 10:34
  • 1
    Thanks Ganesh this works whether you include the popup tip or not! – Toby Jan 8 at 5:00
  • Great, glad it helped you. Please upvote and accept it as an answer so that it will help others with similar question in future. – Ganesh Sanap Jan 8 at 5:01
1

Try to check if the description is not empty using the below condition in customCardProps

"display": "=if(([$Description] ==''),'none','block')"

Full JSON

{
  "elmType": "div",
  "style": {
    "font-size": "16px",
    "color": "black"
  },
  "txtContent": "@currentField",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "[$Description]",
      "style": {
        "font-size": "14px",
        "padding": "10px",
        "width": "500px",
        "color": "black",
        "background-color": "white",
        "display": "=if(([$Description] ==''),'none','block')"
      }
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

Output

enter image description here

5
  • Comments are not for extended discussion; this conversation has been moved to chat. – Mohamed El-Qassas MVP Jan 7 at 10:13
  • Exactly what I needed, thank you very much! – Toby Jan 8 at 2:39
  • @Toby Are you able to see a small blank pop up when you hover over the folder where description field is blank? – Ganesh Sanap Jan 8 at 3:41
  • @GaneshSanap So I just realised this solution only works if you don't include the popup tip (which I had since decided I didn't want) - "isBeakVisible": false. If you include the tip then it still appears. – Toby Jan 8 at 4:59
  • +1 for animated image – Fabio Jan 8 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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