How to trigger Power Automate from SPFx webpart and return result back to SPFx webpart?

Introduction:

In this blog, we will learn how we can trigger Power Automate from SPFx web part, fetch some data or perform any operation and return result back to SPFx web part.

Scenario:

We need to fetch data from API which was not accessible by SharePoint site due to CORS issue. So we created Power Automate which will triggered from SPFx web part, and this flow will fetch the data from API and return the result to SPFx web part.

Implementation:

Follow below steps to trigger Power Automate from SPFx web part and return result back to SPFx web part.

Step 1: First, we need to create Power Automate which will have trigger of When HTTP request is received.

Note: HTTP POST URL will be generated only when you Save the Power Automate.

Step 2: If we want to pass some data from SPFX web part to Power Automate, we need to specify JSON schema in Request Body JSON Schema. 

For example, we can use JSON Schema for Startdate and Enddate as below:

{

    "type": "object",

    "properties": {

        "Startdate": {

            "type": "string"

        },

        "Enddate": {

            "type": "string"

        }

    }

}

Step 3: Now, in Power Automate we need to action for Response at the end of the Power Automate which will return the response to SPFX web part.

Step 4: Now, you can save the flow and copy the HTTP POST URL from first action, which we will use this URL in SPFX web part.

Step 5: In a SPFX web part, first we need to import below namespaces.

import { HttpClient, HttpClientResponse, IHttpClientOptions} from '@microsoft/sp-http';

Step 6: Now, we will create a new method which will be called when we want to trigger Power Automate. So in that method, first we will create a body, which will pass data to Power Automate:

const body: string = JSON.stringify({

      'Startdate': '1-1-2023',

      'Enddate': 12-31-2023

 });

Step 7: Now, we will create header, which will be used when we trigger Power Automate:

const requestHeaders: Headers = new Headers();

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

Step 8: As we will be using HTTP request, we need to use body and headers in HTTPClient Options:

const httpClientOptions: IHttpClientOptions = {

      body: body,

      headers: requestHeaders

};

Step 9: Now we will trigger the flow using HTTP request as shown in below code:

 return this.props.context.httpClient.post(

      postURL, //This will be the URL which is generated in Power Automate

      HttpClient.configurations.v1,

      httpClientOptions)

      .then((response: HttpClientResponse): Promise<HttpClientResponse> => {

        return response.json();

  });

Note: Before we write above code, we need to create new property for context and we need to assign below value:

context: this.context

Step 10: Here is the full code snippet of the method which will trigger Power Automate:

private getMetricsData(StartDate: string, EndDate: string): Promise<HttpClientResponse> {

    const postURL = ""; // This will be the URL which is generated from Power Automate

    const body: string = JSON.stringify({

      'Startdate': StartDate,

      'Enddate': EndDate

    });

    const requestHeaders: Headers = new Headers();

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

    const httpClientOptions: IHttpClientOptions = {

      body: body,

      headers: requestHeaders

    };

    return this.props.context.httpClient.post(

      postURL,

      HttpClient.configurations.v1,

      httpClientOptions)

      .then((response: HttpClientResponse): Promise<HttpClientResponse> => {

        return response.json();

      });

  }

Step 11: Now when we call the method, it will trigger the Power Automate and return the result to SPFX web part. 

Conclusion:

This is how we can trigger Power Automate from SPFX web part and return the result back to SPFX web part. Hope this blog will be helpful for you!

If you have any questions you can reach out our SharePoint Consulting team here.