0

I have a Choice column in my SharePoint list, with these column choices set:

  • Niet verzonden
  • Aangevraagd
  • Goedgekeurd
  • Afgekeurd

What i am trying to accomplish is to create a button from that Choice column. So when the user clicks on that button a Power Automate flow wil be executed and displays a Microsoft Form. The choices above will be set by Power Automate depending on the choice the user makes in the Microsoft Form. The only think i need is to specify the choices of the choices column in the JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/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": {
    "cursor": "pointer",
    "min-height": "24px",
    "min-width": "130px",
    "display": "inline-flex",
    "align-items": "center",
    "text-overflow": "ellipsis",
    "overflow": "hidden",
    "white-space": "nowrap",
    "box-sizing": "border-box",
    "padding": "4px 8px 5px 8px",
    "margin": "9px 0px 9px 0px",
    "border-radius": "14px",
    "border-width": "=if(@currentField == 0, '1px', '0')",
    "border-style": "solid"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "OpenInNewWindow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "Send to Manager"
    }
  ]
}
2
  • Can you explain this: 1. Do you need separate button for each choice option? 2. Do you want to have single button to run flow AND show the current value of column before the button? Oct 20, 2023 at 13:49
  • Option 2 is what i mean :) Oct 20, 2023 at 13:52

1 Answer 1

1

Try using JSON like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Niet verzonden"
              ]
            },
            "sp-css-backgroundColor-BgCornflowerBlue sp-field-fontSizeSmall sp-css-color-CornflowerBlueFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Aangevraagd"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Goedgekeurd"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField",
                            ""
                          ]
                        },
                        "",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "@currentField",
                                "Afgekeurd"
                              ]
                            },
                            "sp-css-backgroundColor-BgCoral sp-field-fontSizeSmall sp-css-color-CoralFont",
                            "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField"
    },
    {
      "elmType": "button",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "style": {
        "cursor": "pointer",
        "min-height": "24px",
        "min-width": "130px",
        "display": "inline-flex",
        "align-items": "center",
        "text-overflow": "ellipsis",
        "overflow": "hidden",
        "white-space": "nowrap",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "margin": "9px 0px 9px 0px",
        "border-radius": "14px",
        "border-width": "=if(@currentField == 0, '1px', '0')",
        "border-style": "solid"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "OpenInNewWindow"
          },
          "style": {
            "padding-right": "6px"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Send to Manager"
        }
      ]
    }
  ]
}

Column settings:

enter image description here

Output:

enter image description here

2
  • 1
    Thanks :) it works great Oct 20, 2023 at 14:12
  • You're welcome, I am glad it worked for you! Oct 20, 2023 at 14:24

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.