1

I have a SharePoint list with a button that has conditional logic to trigger a flow. It works (conditions display or hide it as needed as well as adjusting color and label as needed), but it doesn't look great.

enter image description here

I realize that I can do some minor formatting in the button (make the background color less dramatic, for example), but I'm wondering if it's possible to have an email icon that the user could click to trigger the flow, instead of the big button.

Here's my JSON formatting for the field:

{
  "$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\",\"headerText\":\"Request Proof Notification\",\"runFlowButtonText\":\"Send Now\"}',if(([$RequestStatus] == 'Received Proof'), if(([$Period] == 'Next Year'), '{\"id\":\"3c8d3211-2cac-49e7-8767-49e986246a03\",\"headerText\":\"Received Proof Notification\",\"runFlowButtonText\":\"Send Now\"}', '{\"id\":\"2e5281f3-5378-4a35-8e3d-700b74ea56c4\",\"headerText\":\"Received Proof Notification\",\"runFlowButtonText\":\"Send Now\"}'), if(([$RequestStatus] == 'Cancelled'),'{\"id\":\"ca089b5b-ed8e-4e7b-9283-c7a41553e45a\",\"headerText\":\"Cancelled Notification\",\"runFlowButtonText\":\"Send Now\"}','{\"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')))"
      }
    }
  ]
}

Is there a way to use an icon instead of a button, but retain the "action" and "actionParams" and associate them with that icon to launch the flow?

Update: Working Solution

Thanks to Ganesh I was able to get the icon displayed... I wasn't able to get it within the button, but adding the span before the button element still helps, and I removed the border and background color on the button since the icon prompts the user to action. I also added code to change the cursor to a pointer when over the button text.

Here's the new, cleaner look:

enter image description here

And here's the code to get that result:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Mail"
      },
      "style": {
        "padding-right": "6px",
        "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": "button",
      "txtContent": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'Send Request Proof Message', 'Re-Send Request Proof Message'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'Send Received Proof Message', 'Re-Send Received Proof Message'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'Send Cancelled Message', 'Re-Send Cancelled Message'), 'No associated message to send')",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "=if(([$RequestStatus] == 'Requested Proof'),'{\"id\":\"cea60216-5abe-4170-bd1d-e00c6c7d6ddb\",\"headerText\":\"Request Proof Notification\",\"runFlowButtonText\":\"Send Now\"}',if(([$RequestStatus] == 'Received Proof'), if(([$Period] == 'Next Year'), '{\"id\":\"3c8d3211-2cac-49e7-8767-49e986246a03\",\"headerText\":\"Received Proof Notification\",\"runFlowButtonText\":\"Send Now\"}', '{\"id\":\"2e5281f3-5378-4a35-8e3d-700b74ea56c4\",\"headerText\":\"Received Proof Notification\",\"runFlowButtonText\":\"Send Now\"}'), if(([$RequestStatus] == 'Cancelled'),'{\"id\":\"ca089b5b-ed8e-4e7b-9283-c7a41553e45a\",\"headerText\":\"Cancelled Notification\",\"runFlowButtonText\":\"Send Now\"}','{\"id\":\"b8643251-b284-4089-ba29-d1223a179bc9\"}')))"
      },
      "style": {
        "font-size": "12px",
        "cursor": "pointer",
        "border": "none",
        "background-color": "white",
        "color": "=if(([$RequestStatus] == 'Requested Proof'), if(([$LogProofRequested] == ''), 'darkgreen', 'darkblue'), if(([$RequestStatus] == 'Received Proof'), if(([$LogProofReceived] == ''), 'green', 'darkblue'), if(([$RequestStatus] == 'Cancelled'), if(([$LogCancelled] == ''), 'green', 'darkblue'), 'orange')",
        "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')))"
      }
    }
  ]
}
Improve this question

1 Answer 1

Reset to default
3

You will require button element to use action and actionParams.

However, you can add children elements to button element to add icon & text (if required).

Example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "It's Flow Time!"
    }
  ]
}

Output:

enter image description here

Reference: Create a button to launch a Flow for the selected item

Improve this answer
4
  • Hi @Darryl, did you try this? Is it working for you?
    – Ganesh Sanap - MVP
    Commented Jun 11, 2021 at 15:50
  • I'm having trouble figuring out where to add the iconName property. I have "children" in my main div, but do I need to add one into my elmType: button section as well? And I have 2 div elmTypes but no span elmType... do I need to add a span into one of my divs? Or replace a div with a span? Sorry - I don't have a CSS background so I'm struggling a bit with this part.
    – Darryl
    Commented Jun 11, 2021 at 17:27
  • This is up to you. If you want to show the icon inside button, you have to add children element into button element & the span is used just to add the icon. So, create a span element as a children into button element & set iconName inside attributes property of span element to the name of icon you want to show.
    – Ganesh Sanap - MVP
    Commented Jun 11, 2021 at 17:42
  • 1
    Thanks! I couldn't get the icon to display when putting the span with the icon inside the button element, but was able to get it to appear before the button (almost as good - the only drawback is I need to have my "display" condition run once for the button and once for the icon, and the icon isn't clickable, but it's still a big improvement.
    – Darryl
    Commented Jun 15, 2021 at 19:50

Your Answer

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

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