How to Add Buttons to SharePoint Lists for Instant Flows

C
Collab365 TeamEditorialPublished Mar 30, 2026
2,633

At a Glance

Target Audience
SharePoint Admins, Power Automate Developers
Problem Solved
SharePoint Integrate menu fails to launch flows from list items in non-default environments, blocking ALM and production automation.
Use Case
Automating actions like approvals or notifications on SharePoint list items (e.g., event submissions) across dev/test/prod environments.
<p>Most teams build their first automated workflows in the Default environment. It is easy. You select a SharePoint list item, click the &quot;Integrate&quot; dropdown, and trigger a flow.</p> <p>Then your organization grows up.</p> <p>You realize you need proper Application Lifecycle Management. You start migrating from the default environment to dedicated Test and Production environments.</p> <p>And suddenly, everything breaks.</p> <p>The native &quot;For a selected item&quot; trigger is strictly tied to the Default environment. If you move your flow to Production, that handy integration menu vanishes. This is a known limitation of SharePoint.</p> <p></p> <p>(You can read the full documentation here).</p> <p>Your users are left confused. They want to select a row and instantly fire off an approval or generate a document. They do not care about your environment strategy. They just want their button back.</p> <p>You do not need to buy expensive third-party tools to fix this. You just need to build your own button.</p> <p>We use this exact method in our Collab365 Events Solution to handle submissions. It is clean, it is user-friendly, and it completely bypasses the environment restriction.</p> <p></p> <p>Here is the exact process to build a custom button that triggers any flow from any environment directly inside your SharePoint list.</p> <h3 id="step-1-the-calculated-column-strategy">Step 1: The Calculated Column Strategy</h3><p>First, you need a place for your button to live.</p> <p>Create a new column in your SharePoint list. Choose &quot;Calculated Column&quot; as the type. Why calculated? Because calculated columns do not appear in the default Edit form. This means your users cannot accidentally overwrite your button code when they are updating a row.</p> <p></p> <h3 id="step-2-the-json-formatting">Step 2: The JSON Formatting</h3><p>This is where people usually panic. Do not let the word JSON scare you. You do not need to be a developer. You just need to copy, paste, and tweak a few values.</p> <p>Using declarative customization, you can format that blank calculated column into a highly visible action button.</p> <p>Here is the exact code snippet to generate an &quot;Approve&quot; button:</p> <pre><code class="hljs language-json"><span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;$schema&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;elmType&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;button&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;customRowAction&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;executeFlow&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;actionParams&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;{\&quot;id\&quot;:\&quot;v1/ddadabc3-74e7-e647-a887-d54bebea26a6/16946751-28fa-4c6f-8200-c57896d29a9c\&quot;}&quot;</span> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;attributes&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;class&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;ms-fontColor-themePrimary ms-fontColor-themeDarker--hover&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;title&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Approve&quot;</span> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;style&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;border&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;1px solid #4CAF50&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;background-color&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;#4CAF50&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;color&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;white&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;cursor&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;pointer&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;border-radius&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2px&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;padding&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;5px 10px&quot;</span> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;children&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;elmType&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;span&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;attributes&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;iconName&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Flow&quot;</span> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;style&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;padding-right&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;6px&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;font-size&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;14px&quot;</span> <span class="hljs-punctuation">}</span> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;elmType&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;span&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;txtContent&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Approve&quot;</span><span class="hljs-punctuation">,</span> <span class="hljs-attr">&quot;style&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <span class="hljs-attr">&quot;vertical-align&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;middle&quot;</span> <span class="hljs-punctuation">}</span> <span class="hljs-punctuation">}</span> <span class="hljs-punctuation">]</span> <span class="hljs-punctuation">}</span> </code></pre><p>Paste this directly into the column formatting window.</p> <p></p> <p></p> <h3 id="step-3-connecting-the-flow-id">Step 3: Connecting the Flow ID</h3><p>Look closely at the JSON above. There is one line that matters more than anything else:</p> <p><code>&quot;actionParams&quot;: &quot;{\&quot;id\&quot;:\&quot;v1/ddadabc3-73e7-e637-a885-e54bebea26a6/16946751-28fa-4c6f-8200-c57896d29a9c\&quot;}&quot;</code></p> <p>That long string of numbers is the Flow Identifier. You need to replace my ID with yours.</p> <p>To find it, navigate to your specific environment and open the flow details page. Click &quot;Export Flow&quot; and select the &quot;Get Flow Identifier&quot; option. If you are using solutions to export as a package, the process is identical.</p> <p>Copy your unique ID, paste it into the JSON, and save.</p> <p>You are done.</p> <p>You now have a clean, idiot-proof button sitting right inside your list. It triggers the correct flow in the correct environment every single time. It is not flashy. It is just a rock-solid process that works.</p>