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" } } }
Improve this question

2 Answers 2

Reset to default
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

Improve this answer
4
  • 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?!! Commented Jan 7, 2021 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! :) Commented Jan 7, 2021 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/… Commented Jan 7, 2021 at 10:34
  • 1
    Thanks Ganesh this works whether you include the popup tip or not! Commented Jan 8, 2021 at 5:00
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

Improve this answer
3
  • Comments are not for extended discussion; this conversation has been moved to chat. Commented Jan 7, 2021 at 10:13
  • @Toby Are you able to see a small blank pop up when you hover over the folder where description field is blank? Commented Jan 8, 2021 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. Commented Jan 8, 2021 at 4:59

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.