JSON formatting to add hover + button (for action to trigger Flow)?

Question

I have a column that I've successfully set up to conditionally display a button with the ExecuteFlow action. It's working to do everything I need... be visible or hidden, display the correct label, appear in the correct color, and trigger the correct flow.

I would like to use the hover function, though, so that when the button is hidden, it explains to users which prerequisites are missing.

I just don't know much about JSON, so I've tried to add the hover code but nothing appears, and every other example I've seen uses it when the elmType is either Div or Span... not Button.

Can you help?

Here's my working column formatting. It takes care of the button, but does not add any hover functionality.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'Click to Send Request Proof Message', 'Click to Re-Send Request Proof Message'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'Click to Send Received Proof Message', 'Click to Re-Send Received Proof Message'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'Click to Send Cancelled Message', 'Click to Re-Send Cancelled Message'), 'No associated message to send')",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "=if(([$RequestStatus] == 'Requested Proof'),'{\"id\":\"cea60216-5abe-4170-bd1d-e00c6c7d6ddb\"}',if(([$RequestStatus] == 'Received Proof'), if(([$Period] == 'Next Year'), '{\"id\":\"3c8d3211-2cac-49e7-8767-49e986246a03\"}', '{\"id\":\"2e5281f3-5378-4a35-8e3d-700b74ea56c4\"}'), if(([$RequestStatus] == 'Cancelled'),'{\"id\":\"ca089b5b-ed8e-4e7b-9283-c7a41553e45a\"}','{\"id\":\"b8643251-b284-4089-ba29-d1223a179bc9\"}')))"
  },
  "style": {
    "background-color": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'green', 'darkblue'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'green', 'darkblue'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'green', 'darkblue'), 'orange')",
    "color": "white",
    "visibility": "=if(([$Period] == ''), 'hidden', if(([$Recipients] == ''), 'hidden', if([$Period] == 'Next Year', if(([$RequestStatus] == 'Received Proof' && [$ApprovedSchool] !='' && [$PreviouslyDesignatedSchool] !=''),'visible',if(([$RequestStatus] == 'Requested Proof'),'visible',if(([$RequestStatus] == 'Cancelled'),'visible','hidden'))),if([$Period] == 'Current Year', if(([$RequestStatus] == 'Received Proof' && [$ApprovedSchool] !='' && (toString([$TransferDate]) !='')),'visible', if(([$RequestStatus] == 'Requested Proof'),'visible', if(([$RequestStatus] == 'Cancelled'),'visible','hidden'))),'hidden'))))"
  }
}

The text I'd like to display for the hover is in the NotificationSummary field (calculated field), with a beak. I found this as a starting point, but don't know how to incorporate it:

{
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "@currentField",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "[$Description]",
      "style": {
        "font-size": "12px",
        "color": "green",
        "padding": "5px"
      }
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle": {
      "backgroundColor": "white"
    }
  }
}

(from Adding custom hover text using json to a SharePoint list column)

Please provide detailed information such as screenshot about the list view so that I could test it on my own. — Julie_MSFT, Commented May 28, 2021 at 9:32
@Julie_MSFT I'm not sure exactly where to start - I'm just using the All Items view, but I don't know if you're wondering about a list of the fields or the formatting settings on a column... there are many columns involved in the logic of when the button displays, how it looks, what it says, and which flow it triggers, but I don't know if any of those impact how to display a hover message. Sorry - not trying to be obtuse, but I'm not sure which info to provide... can you give me any more guidance? — Darryl, Commented May 28, 2021 at 21:04

Darryl · Accepted Answer · 2021-05-28 22:45:54Z

I used the code from @theChrisKent and unfortunately the "hover" part didn't work for me. There was one row, though, where I had tried adding text to the Send Notification field as part of my testing. When I tried the code I noticed that since the button wasn't showing for that row, the text I had added in my testing was displayed.

That got me thinking: if there are missing prerequisites, then why would I want to make someone hover to see those prerequisites? It would be cleaner just to display them without requiring another action from the user to view them. With that in mind, I just substituted the Notification Summary field in place of the currentField text, which was already working in the code from @theChrisKent.

This is what I got:

So, the Send Notification field does what I need it to, even if it's not what I had originally intended:

If there is a notification available to be sent, it displays as a button, has a label to indicate which notification it would send, is colored to indicate if the notification is being sent for the first time or if the user would be re-sending it, and triggers the appropriate flow
If there is not a notification available to be sent, it displays the value from the Notification Summary field to tell the user why (for example, for "In Progress" or "Duplicate" items there is no associated message; for "Received Proof" items there is an associated message, but it requires the Period and the Approved School to be defined before it would be ready to send)

The Notification Summary field is just a calculated field with a mash-up of each of the individual fields that performs a test and displays either a relevant message or nothing, accordingly:

=CONCATENATE(NotificationStatusTest,NotificationRecipientsTest,NotificationPeriodTest,NotificationApprovedSchoolTest,NotificationOldNextYearTest,NotificationTransferDateTest)

In the end, I had to clean up the logic in my "test" fields (the ones that show the missing prerequisites) to make sure only the most relevant ones are displayed. For example, if a user wants to send a Proof Received notification, then they must have provided recipient email addresses. But if the status is one that doesn't have an associated notification, then it doesn't matter if the user has added the recipient email addresses or not... the only relevant notice to display is that there isn't a notification associated with that status.

This is the JSON I used for the column formatting, which just doesn't use the customCardProps but instead substitutes in the value of the NotificationSummary field for the txtContent:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'Click to Send Request Proof Message', 'Click to Re-Send Request Proof Message'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'Click to Send Received Proof Message', 'Click to Re-Send Received Proof Message'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'Click to Send Cancelled Message', 'Click to Re-Send Cancelled Message'), 'No associated message to send')",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "=if(([$RequestStatus] == 'Requested Proof'),'{\"id\":\"cea60216-5abe-4170-bd1d-e00c6c7d6ddb\"}',if(([$RequestStatus] == 'Received Proof'), if(([$Period] == 'Next Year'), '{\"id\":\"3c8d3211-2cac-49e7-8767-49e986246a03\"}', '{\"id\":\"2e5281f3-5378-4a35-8e3d-700b74ea56c4\"}'), if(([$RequestStatus] == 'Cancelled'),'{\"id\":\"ca089b5b-ed8e-4e7b-9283-c7a41553e45a\"}','{\"id\":\"b8643251-b284-4089-ba29-d1223a179bc9\"}')))"
      },
      "style": {
        "background-color": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'green', 'darkblue'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'green', 'darkblue'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'green', 'darkblue'), 'orange')",
        "color": "white",
        "display": "=if([$Period]=='' || [$Recipients]=='', 'none', if([$Period]=='Next Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && [$PreviouslyDesignatedSchool]!='', 'inherit', if([$RequestStatus] == 'Requested Proof' || [$RequestStatus] == 'Cancelled', 'inherit', 'none')), if([$Period]=='Current Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && toString([$TransferDate])!='', 'inherit', if([$RequestStatus]=='Requested Proof' || [$RequestStatus]=='Cancelled', 'inherit', 'none')), 'none')))"
      }
    },
    {
      "elmType": "div",
      "txtContent": "[$NotificationSummary]",
      "style": {
        "display": "=if([$Period]=='' || [$Recipients]=='', 'inherit', if([$Period]=='Next Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && [$PreviouslyDesignatedSchool]!='', 'none', if([$RequestStatus] == 'Requested Proof' || [$RequestStatus] == 'Cancelled', 'none', 'inherit')), if([$Period]=='Current Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && toString([$TransferDate])!='', 'none', if([$RequestStatus]=='Requested Proof' || [$RequestStatus]=='Cancelled', 'none', 'inherit')), 'inherit')))"
      }
    }
  ]
}

Awesome! I'm glad you've got something working. Thanks for taking the time to share it back with everyone! — theChrisKent, Commented May 29, 2021 at 14:50

theChrisKent · Accepted Answer · 2021-05-28 13:49:48Z

You can have customCardProps (hover panel) for a button element. However, if the element is hidden then the hover panel won't show. To conditionally show elements, create a parent element and then set expressions on the children elements to control when they show.

Your format might look something like this:

{
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'Click to Send Request Proof Message', 'Click to Re-Send Request Proof Message'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'Click to Send Received Proof Message', 'Click to Re-Send Received Proof Message'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'Click to Send Cancelled Message', 'Click to Re-Send Cancelled Message'), 'No associated message to send')",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "=if(([$RequestStatus] == 'Requested Proof'),'{\"id\":\"cea60216-5abe-4170-bd1d-e00c6c7d6ddb\"}',if(([$RequestStatus] == 'Received Proof'), if(([$Period] == 'Next Year'), '{\"id\":\"3c8d3211-2cac-49e7-8767-49e986246a03\"}', '{\"id\":\"2e5281f3-5378-4a35-8e3d-700b74ea56c4\"}'), if(([$RequestStatus] == 'Cancelled'),'{\"id\":\"ca089b5b-ed8e-4e7b-9283-c7a41553e45a\"}','{\"id\":\"b8643251-b284-4089-ba29-d1223a179bc9\"}')))"
      },
      "style": {
        "background-color": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'green', 'darkblue'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'green', 'darkblue'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'green', 'darkblue'), 'orange')",
        "color": "white",
        "display": "=if([$Period]=='' || [$Recipients]=='', 'none', if([$Period]=='Next Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && [$PreviouslyDesignatedSchool]!='', 'inherit', if([$RequestStatus] == 'Requested Proof' || [$RequestStatus] == 'Cancelled', 'inherit', 'none')), if([$Period]=='Current Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && toString([$TransferDate])!='', 'inherit', if([$RequestStatus]=='Requested Proof' || [$RequestStatus]=='Cancelled', 'inherit', 'none')), 'none')))"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "style": {
        "display": "=if([$Period]=='' || [$Recipients]=='', 'inherit', if([$Period]=='Next Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && [$PreviouslyDesignatedSchool]!='', 'none', if([$RequestStatus] == 'Requested Proof' || [$RequestStatus] == 'Cancelled', 'none', 'inherit')), if([$Period]=='Current Year', if([$RequestStatus]=='Received Proof' && [$ApprovedSchool]!='' && toString([$TransferDate])!='', 'none', if([$RequestStatus]=='Requested Proof' || [$RequestStatus]=='Cancelled', 'none', 'inherit')), 'inherit')))"
      },
      "customCardProps": {
        "openOnEvent": "hover",
        "formatter": {
          "elmType": "div",
          "txtContent": "[$NotificationSummary]"
        }
      }
    }
  ]
}

I simplified your display condition but didn't evaluate any of the other expressions.

In the format above, we are basically drawing a container div and then conditionally showing either a button or a div element with a hover panel. We do this by using the display property and reversing the logic between the two children.

Let me know if any of that is unclear. Good luck!

Thanks! To make sure I understand a first div is the overall container, with two children: button and second div. Button: most of the original logic is unchanged, but for the display I don't use "visible" and "hidden"; I "inherit" the visible state of the parent div if I want it to show, or use "none" if I don't. Hover: I could use the inverse of the display logic used for the button. But since I already have logic for when my NotificationSummary field is populated, I may also just be able to check if that's empty or not, and "inherit" if that field has text or "none" Is that right? — Darryl, Commented May 28, 2021 at 21:00
Oh, one more question: where I had more nested if statements, you have ||. Does that work like "or" in JSON? — Darryl, Commented May 28, 2021 at 21:08
Yes, the || is an or operator and should make making these nasty if statements at least a little easier. — theChrisKent, Commented May 29, 2021 at 14:48

Stack Exchange Network

JSON formatting to add hover + button (for action to trigger Flow)?

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
sharepoint-online
json-formatting
button
hover-panel
or ask your own question.

Linked

Hot Network Questions

JSON formatting to add hover + button (for action to trigger Flow)?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged sharepoint-onlinejson-formattingbuttonhover-panel or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
sharepoint-online
json-formatting
button
hover-panel
or ask your own question.