2122 Views
3 minutes read
Categories
Office 365 SharePoint

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:
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="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
Triggering Microsoft Flow from SPFx Application
  • On click of send Email button the flow gets triggered and the below mail is received.
Triggering Microsoft Flow from SPFx Application
  • 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.
Debopoma Chaudhury

About Debopoma Chaudhury

Debopoma has around 8+ years of experience in Software Development. She has expertise in Estimation, Analysis, Design, Development and Testing using C#, Ext.JS, Angular JS, Bootstrap, jQuery and SQL. Also, she has exposure on Microsoft technologies using AJAX, Telerik Controls, Web Application in Visual Studio 2008, ASP.Net 4.0, Bryntum Gantt and hold proficiency in Regression Analysis, Agile Methodology, Test Execution and Test Documentation.

Debopoma did her Graduation in B.Tech (Computer Science Engineering ) from St. Thomas College in 2008 and was the Gold Medalist in her University WBUT.

Prior to joining Netwoven, she was working with Infosys and Kovair Pvt. Ltd, Kolkata as Team Lead.

A native of West Bengal, she is presently living in Kolkata with her spouse. During her leisure time, she loves singing, writing short stories and travelling.

LinkedinTwitterFacebook

1 reply on “Triggering Microsoft Flow from SPFx Application”

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 Reply

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