SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Flow Status

This sample conditionally shows a button to launch a flow. Additional details are provided to customize the flow panel title and button. This provides context to users and is often far more meaningful than the default of 'Run Flow' which generally doesn't mean much to end users.

Get this format View on GitHub

Shared by Chris Kent
Updated Apr 15, 2022

Flow Status formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "ms-fontColor-neutralPrimary"
  },
  "children": [
    {
      "elmType": "button",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\":\"de11972a-5579-4ffa-be22-603ff6b16578\",\"headerText\":\"KILL KILL KILL\",\"runFlowButtonText\":\"NEIGH!\"}"
      },
      "attributes": {
        "class": "ms-bgColor-white ms-bgColor-themeTertiary--hover",
        "title": "Launch Flow"
      },
      "style": {
        "border-width": "1px",
        "outline": "none",
        "padding": "6px",
        "cursor": "pointer",
        "display": "=if([$Status]=='Not Started', 'flex', 'none')",
        "align-items": "center",
        "border-radius": "6px"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Play",
            "class": "ms-font-xl"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Request",
          "attributes": {
            "class": "ms-font-l"
          },
          "style": {
            "padding-left": "4px"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "=if([$Status]=='Not Started','none','inherit')",
        "position": "relative",
        "padding": "7px"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "=if(startsWith([$Status],'Pending'), 'VisioDiagram', if([$Status]=='Approved','Completed', 'ErrorBadge'))",
            "class": "ms-font-xl"
          }
        },
        {
          "elmType": "span",
          "attributes": {
            "class": "ms-font-l"
          },
          "style": {
            "padding-left": "4px"
          },
          "txtContent": "=if(startsWith([$Status],'Pending'), 'In Process', 'Completed')"
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "right": "0",
            "bottom": "0"
          },
          "customCardProps": {
            "openOnEvent": "hover",
            "isBeakVisible": true,
            "formatter": {
              "elmType": "div",
              "style": {
                "display": "flex",
                "padding": "12px",
                "flex-direction": "column"
              },
              "children": [
                {
                  "elmType": "svg",
                  "style": {
                    "width": "420px",
                    "height": "160px"
                  },
                  "children": [
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 94.498225,27.220933 1.699668,-1.718535 9.310607,9.310603 -9.310607,9.32947 -1.699668,-1.718535 6.383265,-6.383434 -33.880148,0.01887 v -2.417433 l 33.899838,-0.01887 z"
                      },
                      "style": {
                        "fill": "green"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 42.40407,94.520228 1.71853,1.699668 -9.3106,9.310604 -9.32947,-9.310604 1.71853,-1.699668 6.38344,6.383272 -0.0189,-33.880155 h 2.41743 l 0.0189,33.899835 z"
                      },
                      "style": {
                        "fill": "red"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "M 34.80251,0.020207 69.605013,34.822713 34.80251,69.625221 0,34.822713 Z"
                      },
                      "style": {
                        "fill": "=if([$Status]=='Pending Gate 1', 'yellow','gray')"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 23.8014,39.057905 q -1.42431,0.820664 -3.54043,0.820664 -2.34672,0 -3.70317,-1.295439 -1.34971,-1.302231 -1.34971,-3.581115 0,-2.292418 1.47858,-3.737136 1.47858,-1.444668 3.93384,-1.444668 1.5464,0 2.72652,0.427295 v 2.055023 q -1.12588,-0.651123 -2.75375,-0.651123 -1.36328,0 -2.22467,0.888503 -0.85459,0.881711 -0.85459,2.360339 0,1.498924 0.76643,2.319653 0.7732,0.82068 2.08226,0.82068 0.78676,0 1.24797,-0.223827 V 35.917588 H 19.6641 v -1.74987 h 4.13728 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 31.26271,39.709225 h -2.02795 v -0.997012 h -0.0271 q -0.69858,1.166569 -2.06864,1.166569 -1.01058,0 -1.59388,-0.569717 -0.57651,-0.576509 -0.57651,-1.532834 0,-2.021227 2.39414,-2.333106 l 1.88555,-0.250947 q 0,-1.13945 -1.23441,-1.13945 -1.24119,0 -2.36034,0.73929 v -1.614225 q 0.44764,-0.230604 1.22084,-0.406953 0.77998,-0.176348 1.41753,-0.176348 2.97065,0 2.97065,2.963918 z m -2.01434,-2.821514 v -0.467999 l -1.26154,0.162748 q -1.04449,0.135678 -1.04449,0.942758 0,0.366265 0.25095,0.603644 0.25774,0.230604 0.69181,0.230604 0.60364,0 0.98346,-0.413728 0.37981,-0.42052 0.37981,-1.05806 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 37.16889,39.627195 q -0.47477,0.250947 -1.4311,0.250947 -2.26535,0 -2.26535,-2.353449 v -3.180971 h -1.12588 v -1.580297 h 1.12588 v -1.498923 l 2.1364,-0.610421 v 2.109327 h 1.55997 v 1.580298 h -1.55997 v 2.807897 q 0,1.085195 0.86137,1.085195 0.33913,0 0.69858,-0.196692 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 44.55654,36.846368 h -4.5307 q 0.10853,1.512491 1.9059,1.512491 1.14624,0 2.01433,-0.542598 v 1.546403 q -0.9631,0.515462 -2.50274,0.515462 -1.68212,0 -2.61119,-0.92919 -0.92919,-0.935982 -0.92919,-2.604462 0,-1.729527 1.0038,-2.74014 1.00381,-1.010597 2.46879,-1.010597 1.51926,0 2.34672,0.902071 0.83425,0.90207 0.83425,2.44844 z m -1.98727,-1.315799 q 0,-1.492131 -1.20727,-1.492131 -0.51546,0 -0.89528,0.427296 -0.37304,0.427296 -0.45441,1.064835 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 54.39689,29.765513 v 9.943056 H 52.2605 v -7.528576 q -0.17635,0.156021 -0.42052,0.298426 -0.23738,0.135678 -0.50869,0.250947 -0.27129,0.108608 -0.56294,0.189916 -0.29165,0.07465 -0.57651,0.108444 v -1.804174 q 0.83425,-0.244171 1.57354,-0.623988 0.73929,-0.379817 1.33614,-0.834232 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 200.0138,27.211089 1.69966,-1.718534 9.31061,9.310602 -9.31061,9.32947 -1.69966,-1.718535 6.38326,-6.383433 -33.88015,0.01887 v -2.417433 l 33.89984,-0.01887 z"
                      },
                      "style": {
                        "fill": "green"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 147.91307,94.503822 1.71854,1.699668 -9.31061,9.3106 -9.32947,-9.3106 1.71854,-1.699668 6.38327,6.383268 -0.0189,-33.880151 h 2.41743 l 0.0189,33.899841 z"
                      },
                      "style": {
                        "fill": "red"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 140.31443,0.013247 34.8025,34.802507 -34.8025,34.802506 -34.80251,-34.802506 z"
                      },
                      "style": {
                        "fill": "=if([$Status]=='Pending Gate 2', 'yellow','gray')"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 129.31024,39.048061 q -1.42431,0.820664 -3.54043,0.820664 -2.34672,0 -3.70317,-1.295439 -1.34971,-1.302231 -1.34971,-3.581114 0,-2.292419 1.47858,-3.737137 1.47858,-1.444668 3.93384,-1.444668 1.54641,0 2.72653,0.427296 v 2.055023 q -1.12589,-0.651124 -2.75376,-0.651124 -1.36328,0 -2.22466,0.888503 -0.85459,0.881711 -0.85459,2.36034 0,1.498923 0.76642,2.319652 0.7732,0.820681 2.08226,0.820681 0.78677,0 1.24797,-0.223828 v -1.899165 h -1.94657 v -1.749871 h 4.13727 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 136.77008,39.699382 h -2.02796 v -0.997013 h -0.0271 q -0.69858,1.166569 -2.06864,1.166569 -1.01058,0 -1.59388,-0.569717 -0.57651,-0.576508 -0.57651,-1.532834 0,-2.021227 2.39414,-2.333106 l 1.88555,-0.250947 q 0,-1.13945 -1.23441,-1.13945 -1.24118,0 -2.36034,0.73929 v -1.614225 q 0.44764,-0.230604 1.22084,-0.406952 0.77998,-0.176349 1.41753,-0.176349 2.97065,0 2.97065,2.963919 z m -2.01434,-2.821514 v -0.468 l -1.26154,0.162748 q -1.0445,0.135679 -1.0445,0.942758 0,0.366266 0.25095,0.603645 0.25774,0.230603 0.69181,0.230603 0.60365,0 0.98346,-0.413728 0.37982,-0.42052 0.37982,-1.058059 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 142.6779,39.617351 q -0.47478,0.250947 -1.4311,0.250947 -2.26535,0 -2.26535,-2.353449 v -3.180971 h -1.12588 v -1.580297 h 1.12588 v -1.498923 l 2.1364,-0.61042 v 2.109327 h 1.55997 v 1.580297 h -1.55997 v 2.807897 q 0,1.085195 0.86136,1.085195 0.33913,0 0.69859,-0.196692 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 150.06391,36.836524 h -4.5307 q 0.10853,1.512491 1.90589,1.512491 1.14624,0 2.01434,-0.542597 v 1.546402 q -0.9631,0.515462 -2.50275,0.515462 -1.68211,0 -2.61119,-0.92919 -0.92919,-0.935982 -0.92919,-2.604462 0,-1.729527 1.00381,-2.74014 1.0038,-1.010597 2.46878,-1.010597 1.51927,0 2.34673,0.902071 0.83424,0.902071 0.83424,2.44844 z m -1.98727,-1.315798 q 0,-1.492132 -1.20727,-1.492132 -0.51546,0 -0.89528,0.427296 -0.37304,0.427296 -0.45442,1.064836 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 157.17265,37.922605 h 4.12367 v 1.776941 h -6.47039 v -0.732498 q 0,-0.746082 0.25095,-1.336159 0.25094,-0.596852 0.63076,-1.064835 0.37982,-0.474775 0.82746,-0.834248 0.45443,-0.366249 0.86136,-0.657899 0.4273,-0.305202 0.74607,-0.583285 0.32556,-0.278083 0.5426,-0.549373 0.22382,-0.278083 0.33233,-0.556166 0.10853,-0.284858 0.10853,-0.603644 0,-0.623988 -0.35268,-0.942758 -0.35268,-0.31877 -1.0784,-0.31877 -1.25476,0 -2.40103,0.997013 v -1.885549 q 1.26832,-0.82068 2.8622,-0.82068 0.73929,0 1.32257,0.196692 0.59008,0.189901 0.99703,0.549374 0.40696,0.359473 0.6172,0.874935 0.21704,0.508686 0.21704,1.13945 0,0.671467 -0.21026,1.193721 -0.20347,0.522254 -0.54938,0.949534 -0.33913,0.427295 -0.78677,0.786769 -0.44764,0.352697 -0.92919,0.685035 -0.32556,0.230603 -0.63076,0.461207 -0.29843,0.223811 -0.52903,0.447639 -0.2306,0.217036 -0.36625,0.427296 -0.13564,0.21026 -0.13564,0.40016 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 305.52116,27.201246 1.69967,-1.718535 9.3106,9.310603 -9.3106,9.329469 -1.69967,-1.718534 6.38327,-6.383434 -33.88015,0.01887 v -2.417433 l 33.89984,-0.01887 z"
                      },
                      "style": {
                        "fill": "green"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 253.41552,94.503822 1.71853,1.699668 -9.3106,9.3106 -9.32947,-9.3106 1.71853,-1.699668 6.38327,6.383268 -0.0189,-33.880151 h 2.41744 l 0.0189,33.899841 z"
                      },
                      "style": {
                        "fill": "red"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 245.82286,0.002806 34.80252,34.802507 -34.80252,34.802506 -34.8025,-34.802506 z"
                      },
                      "style": {
                        "fill": "=if([$Status]=='Pending Gate 3', 'yellow','gray')"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 234.81105,39.038217 q -1.42431,0.820664 -3.54043,0.820664 -2.34672,0 -3.70318,-1.295438 -1.34969,-1.302231 -1.34969,-3.581115 0,-2.292419 1.47856,-3.737136 1.47858,-1.444669 3.93385,-1.444669 1.5464,0 2.72652,0.427296 v 2.055023 q -1.1259,-0.651124 -2.75376,-0.651124 -1.36326,0 -2.22466,0.888503 -0.85457,0.881711 -0.85457,2.36034 0,1.498923 0.76641,2.319653 0.7732,0.82068 2.08225,0.82068 0.78677,0 1.24798,-0.223828 v -1.899165 h -1.94658 v -1.74987 h 4.13728 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 242.2758,39.689538 h -2.02795 v -0.997013 h -0.0271 q -0.6986,1.16657 -2.06864,1.16657 -1.01058,0 -1.59386,-0.569717 -0.57651,-0.576509 -0.57651,-1.532835 0,-2.021226 2.39413,-2.333105 l 1.88555,-0.250947 q 0,-1.13945 -1.23441,-1.13945 -1.24118,0 -2.36034,0.739289 v -1.614225 q 0.44764,-0.230603 1.22084,-0.406952 0.78,-0.176349 1.41754,-0.176349 2.97081,0 2.97081,2.963919 z m -2.01433,-2.821514 v -0.467999 l -1.26155,0.162748 q -1.04449,0.135678 -1.04449,0.942758 0,0.366265 0.25095,0.603644 0.25774,0.230604 0.69181,0.230604 0.60364,0 0.98346,-0.413728 0.37982,-0.42052 0.37982,-1.05806 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 248.18198,39.607508 q -0.47475,0.250947 -1.43108,0.250947 -2.26535,0 -2.26535,-2.353449 v -3.180971 h -1.12588 v -1.580297 h 1.12588 v -1.498924 l 2.1364,-0.61042 v 2.109327 h 1.55995 v 1.580297 h -1.55995 v 2.807897 q 0,1.085196 0.86137,1.085196 0.33913,0 0.69858,-0.196693 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 255.56471,36.826681 h -4.5307 q 0.10845,1.512491 1.9059,1.512491 1.14624,0 2.01433,-0.542598 v 1.546402 q -0.96312,0.515462 -2.50274,0.515462 -1.68212,0 -2.61119,-0.92919 -0.92919,-0.935982 -0.92919,-2.604461 0,-1.729527 1.0038,-2.74014 1.00381,-1.010597 2.46879,-1.010597 1.51927,0 2.34672,0.90207 0.83425,0.902071 0.83425,2.448441 z m -1.98726,-1.315799 q 0,-1.492131 -1.20728,-1.492131 -0.51546,0 -0.89528,0.427296 -0.37304,0.427295 -0.45443,1.064835 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 260.56856,39.37126 v -1.865204 q 0.97667,0.71217 2.27897,0.71217 0.82068,0 1.27509,-0.352697 0.46121,-0.352681 0.46121,-0.983445 0,-0.651124 -0.56972,-1.003805 -0.56294,-0.352697 -1.55318,-0.352697 h -0.90207 V 33.88432 h 0.83423 q 1.89917,0 1.89917,-1.261544 0,-1.186929 -1.45824,-1.186929 -0.97667,0 -1.89916,0.630763 v -1.74987 q 1.02415,-0.515462 2.38741,-0.515462 1.49213,0 2.31965,0.671467 0.83423,0.671451 0.83423,1.743144 0,1.905892 -1.93296,2.38741 v 0.03396 q 1.03092,0.128788 1.62779,0.752858 0.59686,0.617212 0.59686,1.519267 0,1.363278 -0.99703,2.15674 -0.99702,0.793545 -2.7536,0.793545 -1.5057,0 -2.44844,-0.488327 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 1.4e-4,104.16699 h 279.26394 v 31.62596 H 1.4e-4 Z"
                      },
                      "style": {
                        "fill": "red"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 102.82594,127.26672 v -14.58909 h 5.16824 q 7.7727,0 7.7727,7.11137 0,3.4082 -2.12623,5.44288 -2.11605,2.03468 -5.64631,2.03468 z m 3.28613,-11.91342 v 9.24793 h 1.6278 q 2.13639,0 3.34716,-1.2819 1.22084,-1.28189 1.22084,-3.48957 0,-2.08554 -1.21067,-3.27597 -1.20049,-1.20049 -3.37768,-1.20049 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 126.95761,127.26672 h -8.74935 v -14.58909 h 8.41369 v 2.67567 h -5.12755 v 3.24545 h 4.77153 v 2.66549 h -4.77153 v 3.33699 h 5.46321 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "M 142.44165,127.26672 H 139.125 l -6.01265,-9.16655 q -0.52903,-0.80372 -0.7325,-1.21067 h -0.0407 q 0.0814,0.77321 0.0814,2.36034 v 8.01682 h -3.10304 v -14.58909 h 3.54043 l 5.78887,8.88158 q 0.39679,0.60025 0.7325,1.19033 h 0.0407 q -0.0814,-0.50867 -0.0814,-2.00417 v -8.06768 h 3.10305 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 149.08611,127.26672 h -3.28614 v -14.58909 h 3.28614 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 161.14128,127.26672 h -8.74935 v -14.58909 h 8.41368 v 2.67567 h -5.12755 v 3.24545 h 4.77137 v 2.66549 h -4.77137 v 3.33699 h 5.46322 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 163.50211,127.26672 v -14.58909 h 5.16824 q 7.7727,0 7.7727,7.11137 0,3.4082 -2.12623,5.44288 -2.11605,2.03468 -5.64647,2.03468 z m 3.28614,-11.91342 v 9.24793 h 1.62779 q 2.13639,0 3.34716,-1.2819 1.22084,-1.28189 1.22084,-3.48957 0,-2.08554 -1.21067,-3.27596 -1.20049,-1.2005 -3.37768,-1.2005 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "attributes": {
                        "d": "m 317.61243,0 h 80.61445 v 103.55833 h -80.61445 z"
                      },
                      "style": {
                        "fill": "green"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 350.32611,32.787509 h -4.1509 l -4.25261,-6.338153 q -0.12206,-0.183141 -0.38661,-0.803733 h -0.0509 v 7.141886 h -3.28613 V 18.198421 h 3.28613 v 6.897763 h 0.0509 q 0.12206,-0.284858 0.40693,-0.813888 l 4.02884,-6.083859 h 3.91678 l -5.08686,6.958794 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "M 354.98543,32.787509 H 351.6993 V 18.198421 h 3.28613 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 366.97826,32.787509 h -8.68832 V 18.198421 h 3.28613 v 11.923596 h 5.40219 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 377.6422,32.787509 h -8.68832 V 18.198421 h 3.28613 v 11.923596 h 5.40219 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 350.32611,59.066734 h -4.1509 l -4.25261,-6.338152 q -0.12206,-0.183125 -0.38661,-0.803733 h -0.0509 v 7.141885 h -3.28613 V 44.477646 h 3.28613 v 6.897764 h 0.0509 q 0.12206,-0.284859 0.40693,-0.813888 l 4.02884,-6.083859 h 3.91678 l -5.08686,6.958794 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "M 354.98543,59.066734 H 351.6993 V 44.477646 h 3.28613 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 366.97826,59.066734 h -8.68832 V 44.477646 h 3.28613 v 11.923596 h 5.40219 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 377.6422,59.066734 h -8.68832 V 44.477646 h 3.28613 v 11.923596 h 5.40219 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 350.32611,85.365647 h -4.1509 l -4.25261,-6.338153 q -0.12206,-0.183124 -0.38661,-0.803733 h -0.0509 v 7.141886 h -3.28613 V 70.776559 h 3.28613 v 6.897764 h 0.0509 q 0.12206,-0.284875 0.40693,-0.813905 l 4.02884,-6.083859 h 3.91678 l -5.08686,6.958794 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "M 354.98543,85.365647 H 351.6993 V 70.776559 h 3.28613 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 366.97826,85.365647 h -8.68832 V 70.776559 h 3.28613 v 11.923596 h 5.40219 z"
                      }
                    },
                    {
                      "elmType": "path",
                      "style": {
                        "fill": "white"
                      },
                      "attributes": {
                        "d": "m 377.6422,85.365647 h -8.68832 V 70.776559 h 3.28613 v 11.923596 h 5.40219 z"
                      }
                    }
                  ]
                },
                {
                  "elmType": "a",
                  "attributes": {
                    "href": "@currentField",
                    "target": "_blank",
                    "title": "Requires flow ownership rights to access",
                    "class": "ms-fontColor-neutralSecondary ms-fontColor-themePrimary--hover"
                  },
                  "style": {
                    "text-decoration": "none"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "attributes": {
                        "iconName": "LockSolid"
                      }
                    },
                    {
                      "elmType": "span",
                      "txtContent": "Flow run details",
                      "style": {
                        "padding-left": "4px"
                      }
                    }
                  ]
                }
              ]
            }
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitiongeneric-flow-status.json

From the contributor

How to use this sample

Summary

screenshot of the sample

This sample conditionally shows a button to launch a flow. Additional details are provided to customize the flow panel title and button. This provides context to users and is often far more meaningful than the default of "Run Flow" which generally doesn't mean much to end users.

screenshot of the flow panel

Power Automate flow instance URL

The associated Power Automate flow uses an expression to build a URL that will point to the exact instance of the flow. This is very helpful for finding exactly which run applies to a list item (the alternative is to open each flow and check the details). The expression used is:

concat('https://flow.microsoft.com/manage/environments/', workflow()?['tags']['environmentName'],'/flows/',workflow()?['name'],'/runs/',workflow()?['run']['name’])

This expression can be used in any flow.

In this sample, both the status and the flow url are updated (the flow url field is where the format is applied). This allows the format to turn off the launch flow button for items that are already in progress and provide a link to the exact instance for any troubleshooting.

screenshot of the Flow actions

Flow Diagram

The process status shown in the hover card was created in Visio and saved as an SVG. The HTML to Formatter tool was used to quickly convert the SVG into a format and that was adapted to add the conditional logic for fill colors.

View requirements

  • This format expects to be applied to a text column where the value of the field is the flow instance URL (see above).
Type Internal Name Required
Choice Status Yes

The Status column is using these values (but you use different values, just update the format accordingly):

  • Not Started
  • Pending Gate 1
  • Pending Gate 2
  • Pending Gate 3
  • Approved
  • Rejected

Sample

Solution Author(s)
generic-flow-status.json Chris Kent

Version history

Version Date Comments
1.0 April 15, 2022 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Keep exploring

More formats like this

Missing Information Callout

The Missing Information Callout column formatter provides a clear, accessible visual indicator when a SharePoint list column contains no value.

Explore format

Version Status and Approval Flow Button

Formats the SharePoint Version column as a combined status badge and approval flow trigger. Major versions (published) display a greyed-out non-clickable card. Minor versions display version status and a Submit for Approval button that triggers a Power Automate flow.

Explore format

Publishing Status

Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages

Explore format