How To Trigger MS Flow From SPFx Web Part And Return Result Back To SPFx Web Part

Introduction

In this article, we will learn how can we call MS Flow from the SPFx web part and have MS Flow return the result back to the SPFx web part.

Scenario

There was a third-party API, which we were not able to access from the SPFx web part because of some security reasons. API was accessible from MS Flow. So, we call API from MS Flow, triggered MS Flow from the SPFx web part, and return the result back to the SPFx web part.

Implementation - Set up MS Flow

Follow the below steps,

Step 1

Go to https://flow.microsoft.com/.

Step 2

Click on My Flows from the left panel and click on the New flow dropdown. Select the Instant cloud flow option as shown below screenshot.

Step 3

Now select When an HTTP request is received option and click on Create button.

Step 4

Now enter the request body in the JSON format for the parameters you need to pass from the SPFx web part.

Here I have copied sample JSON schema,

{
    "type": "object",
    "properties": {
        "FromDate": {
            "type": "string"
        },
        "ToDate ": {
            "type": "string"
        }
    }
}

Step 5

Now click on the add action button and add HTTP action.

Step 6

We will use HTTP action to call our third-party API. Now select Method, add URI, add headers and body in HTTP action.

Step 7

Now click on add new action for compose as shown in the below screenshot.

Step 8

Now in a compose action, select body from HTTP action as shown in the below screenshot.

Step 9

Now add a new action for the response.

Step 10

In a response action, select values as below,

Step 11

Now save the flow. Once you save the flow, you will be able to see the URL in the first action. Copy this URL, we will use this URL in our SPFx web part to trigger flow:

Setup SPFx web part

Follow the below steps,

Here my web part's name is Projects,

Step 1

In the props.ts file of your SPFx web part, declare a new property for context.

export interface IProjectsProps {
  description: string;
  context: any;
}

Step 2

Now in the projectsWebPart.ts file, assign current context to context property as below,

public render(): void {
    const element: React.ReactElement<IProjectsProps> = React.createElement(
      Projects,
      {
        description: this.properties.description,
        context: this.context
      }
    );

    ReactDom.render(element, this.domElement);
}

Step 3

Now in a projects.tsx file, we will trigger flow and get the response. So to call a flow, we will prepare a JSON string which we will use as a parameter while calling flow. In our flow above, we have two parameters, FromDate and ToDate. So we will generate a JSON string as below:

const body: string = JSON.stringify({
      'FromDate': FromDate,
      'ToDate': ToDate
});

Step 4

Then we will create a header as below,

const requestHeaders: Headers = new Headers();
    requestHeaders.append('Content-type', 'application/json');

Step 5

Now we will use post request using context.httpClient.post and use the URL which we get from flow as API.

Here is the final code to trigger flow and get the result as a response,

private getProjectsData(FromDate: string, ToDate: string): Promise<HttpClientResponse> {
    const postURL = "https://prod-150.westus.logic.azure.com:443/workflows/************/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=-***********";

    const body: string = JSON.stringify({
      'FromDate': FromDate,
      'ToDate': ToDate
    });

    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 6

The above method will return the response from the MS Flow.

Conclusion

This is how we can trigger MS Flow from the SPFx web part and return the result back to SPFx we part. I hope this article will be helpful for you!