Triggering Microsoft Flow from SPFx Application - Netwoven

Triggering Microsoft Flow from SPFx Application

By Debopoma Chaudhury  |  Published on September 17, 2019

Triggering Microsoft Flow from SPFx Application


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.


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:
Triggering Microsoft Flow from SPFx Application
Get URL of the created Flow:
  • Open the request trigger in the flow and copy the flow URL as shown:
Triggering Microsoft Flow from SPFx Application
  • 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="
    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");

      .then((response: Response): Promise<HttpClientResponse> => {
        console.log("Email sent.");
        return response.json();
      })  .catch((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
Triggering Microsoft Flow from SPFx Application
  • 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.

1 comment

  1. Now that HTTP Triggers and Actions are considered “Premium”, is there another way to trigger a Flow from SPFx with a different trigger?

Leave a comment

Your email address will not be published. Required fields are marked *

Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Unravel The Complex
Stay Connected

Subscribe and receive the latest insights

Netwoven Inc. - Microsoft Solutions Partner

Get involved by tagging Netwoven experiences using our official hashtag #UnravelTheComplex