Start a Power Automate Flow from a Javascript button in SharePoint

Power Automate has a connector that allows a Flow to trigger from an HTTP request. This is useful when you need to trigger a Flow from an external system or when you want to pass parameters to the Flow. This blog explains how to pull it all together. Note this is a premium connection.

In this example, I want to read the URL Query String from the SharePoint page and use the parameter as an input into a Flow. For example, reading the parameter from a URL in this format. https://…/sites/SitePages/ScriptTest.aspx?q=testing123

Parameters are passed to Flow in a JSON package. In the example below, I use this very simple payload.

{
"searchquery":"theQueryValue"
}

I created a test Flow that tiggers when an HTTP request is recieved, parses the JSON received and populates the result in a Compose action. When the Flow runs you can see the output in the Compose action to prove everything is working as expected.

Using an ‘Instant Cloud Flow‘, choose the HTTP request trigger.

Choose the ‘Use sample payload to generate schema’ and use the example payload above. Use the same schema of generated in the HTTP request is received action as the schema for the Parse JSON action.

In the HTTP Trigger Action, copy the HTTP POST URL and then use Postman to test. Note: You can use the free version of Postman, but a registration is required.

Select ‘Post’ from the drop down
In the Body, choose ‘raw’ and paste your JSON schema

Now if you click ‘Send’, Postman will send the request to the URL and start the Flow. Check the run history in Power Automate to see if it worked.

Once this is working we get to the last part of the process. Postman will automatically generate Javascript code that you can use. Click the Code Snippet option and then change the code to ‘Javascript – Fetch’. Copy the resulting code to you editor of choice.

You need to add a couple of things to read the command line and format the code for use in the ‘Modern Script Editor‘ webpart.

<button onclick="RunPowerAutomateFlow()">Download Files</button>

<script type="text/javascript">

var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");

const urlParams = new URLSearchParams(location.search);

for (const value of urlParams.values()) {
    var QueryValue = value;
}

var raw = "{\r\n\"searchquery\":" + "\"" + QueryValue +"\"" + "\r\n\}";
// alert(rawparam);


var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};


function RunPowerAutomateFlow()
{	
	alert("running now");
fetch("https://prod-18.australiasoutheast.logic.azure.com:443/workflows/22f9324242bdfb4cc09abe83efb3bacd41/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=fCY4K-Wztgjb35WpXKD7ndmwYuiOgf9coxxaupIKc0A4", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
}

</script>

In SharePoint, create a Modern Page and insert a Modern Script Editor webpart. Insert the code above into the webpart and publish the page.

In the URL for the page add a parameter to the end e.g. https://…/sites/SitePages/ScriptTest.aspx?q=testing123

Now click the button and check the run history in Power Automate. Check the Compose action to see if the parameter from SharePoint passed to Power Automate correctly.