Triggering Microsoft Flow from SPFx Application

Problem:

Many SPFx applications use Microsoft Flow to perform various background activities. SPFx and Flow go hand in hand. Often when data is inserted or updated to a SharePoint list/library we might need to trigger a Microsoft flow to do additional jobs like send out a mail/update some other list with this data. Triggers can be written on the update action of a list/library to perform these actions in Microsoft Flow. But these triggers are not invoked immediately. Based on the flow plan and other internal constraints it can take up to 5 minutes to invoke the flow and make it run as this invocation is done by some internal Microsoft scheduler. So, there might be a delay between the foreground and background activities.

Solution:

The above-mentioned scenario can sometimes be annoying if one is expecting the background activity to be in immediate sync with the insert/update. So instead of waiting for the Microsoft Scheduler to invoke the flow one can invoke the flow directly from the SPFx application. In this way the background activities will be in sync with the fore ground activities and the background actions will take place immediately.

Steps to trigger Microsoft Flow from SPFx:

Create a sample Flow with a request trigger:

• While creating a new flow you need to choose Request trigger as shown:

Get URL of the created Flow:

• Open the request trigger in the flow and copy the flow URL as shown:

• This URL is needed in the SPFx application to trigger the flow.

Call the Flow from SPFx code

• In your SPFx solution you need to import the below mentioned in the. tsx page in a location from where you want to call the flow:

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

• Then add the below function in the appropriate place to invoke the flow:

public sendMail()
  {
    let flowURL="https://prod-50.westus.logic.azure.com:443/workflows...
    
    const body: string = JSON.stringify({
      'emailBody': "Test Mail"
    });

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

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

    console.log("Sending Email");

    return this.props.context.httpClient.post(
      flowURL,
      HttpClient.configurations.v1,
      httpClientOptions)
      .then((response: Response): Promise<HttpClientResponse> => {
        console.log("Email sent.");
        return response.json();
      })  .catch((e) => {
        
        console.log(e);});
  }

• The flow URL can be kept in a config file and read from there. In this example I have just hard coded it and provided a dummy URL.
• Also, in this sample I am just sending a mail. Other activities like updating list/library etc. can be done in the same way.

Run the sample App and receive the Email using gulp serve command

• On click of send Email button the flow gets triggered and the below mail is received.

• Once tested in local workbench you can deploy your SPFx application in a site page using gulp bundle and gulp package-solution and use it in your site.