Mastering HTTP Triggers in Power Automate
Tags: powerautomate, powerfuldevs, powerplatform, tutorial
Published: 2023-05-17 19:28:54

HTTP triggers in Power Automate provide a valuable functionality for initiating flows in various scenarios such as retrieving or submitting data to an external system. HTTP trigger flows become particularly useful when an existing connector lacks a specific trigger point. Additionally, these HTTP triggers are handy when data needs to be passed from an external application/third-party applications and other services like SharePoint.

In other words, if you want to trigger your flow from a connector that's not available in Power Automate, this technique is the way to go.

---


#Scenario

I created an SPFx extension that I named 'Suggestion Box', and I want to be able to trigger a Power Automate flow from this SPFx application.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/265qdysja7szhl69ya51.png)


---



## **Instant flow - Trigger**
Select "When an HTTP request is received" trigger

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz2hl3fv1jr4dvbkm0v4.png)

Click on 'Use sample payload to generate schema' to create a JSON structure for passing the data. Once done, it will automatically generate the Request Body JSON Schema, and you can select the 'Post' method.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2kwqc5a19vqekc9hkdb.png)

_Click "Done" and the JSON schema will be generated._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd3ncsw3yzz1n3k3vtjd.png)

When this endpoint is triggered, it requires three properties: siteUrl, pageTitle, and suggestionBody

## **Action**
 Specifically for my application, I want the flow to send me the suggestionBody via email.
And now, if we look at the Dynamic content, we can see that we have the siteUrl, pageTitle, and suggestionBody variables.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xogpo5aaqaosect6spa5.png)

Click "Save" and the "HTTP POST URL" will be created

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzzbwmr5k7sqxgxd86um.png)
_Add a new step "Response"-ation select cthe "Body" property from the dynamic content_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7fada4uh97jrdle2fpk.png)

## **Test the HTTP request with Postman**

- Select POST as method

- Copy the HTTP POST URL you got when you saved the flow and specify the endpoint

- Create a JSON sample in the body

- Add header: Content-type=application/json
_Send the request and check your email_



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3l28i0m1j5lxq1r0n5lc.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xytif6ymb5dbwsn6588g.png)

##**Invoke the Power Automate flow from SPFx solution**
####Import the following code snippet in your tsx file:
`import { HttpClient, HttpClientResponse, IHttpClientOptions } from '@microsoft/sp-http';`
_It will import the necessary modules (HttpClient, HttpClientResponse and IHttpClientOptions) from the @microsoft/sp-http package._
#### Add the following function to trigger the Power Automate flow
_Note: Replace the "postURL" with the actual HTTP POST URL generated in your trigger._


```
async function sendSuggestion(
siteUrl: string, 
pageTitle: string, 
suggestionBody: string
): Promise<HttpClientResponse> {

		const postURL = <PASTE HERE HTTP POST URL>;

		const body: string = JSON.stringify({
			siteUrl: siteUrl,
			pageTitle: pageTitle,
			suggestionBody: suggestionBody,
		  });

		  const requestHeaders: Headers = new Headers();

		  requestHeaders.append('Content-type', 'application/json');

		  const httpClientOptions: IHttpClientOptions = {
			body: body,
			headers: requestHeaders,
		  };

		  console.log("Sending Suggestion");

		  return props.context.httpClient.post(
			postURL,
			HttpClient.configurations.v1,
			httpClientOptions
		  ).then((response: HttpClientResponse): Promise<HttpClientResponse> => {

			console.log("Suggestion sent.");

			return response.json();

		  });
		}
```
		

####Voilà!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgw3mld9dxi0bffye15b.png)
_On click of "Save Suggestion"-button it triggers the Power Automate flow and the below mail is received._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3mmgwrrp2qejgu9suex.png)
Now you can use Power Automate to create custom HTTP triggers that can be invoked by your application whenever needed. 

_Let me know in the comments below about your experiences integrating it into your workflows_