Execute Power Automate Workflow from SPFx

In this article, you will learn about Execute Power Automate Workflow from SPFx.

Introduction

 
In many cases, we want the flow to be triggered by an event, such as an item added or updated. However, sometimes we would like to trigger the flow programmatically from our SPFx web part. For example, trigger an email from the web part on a button click.
 
In this article, we will explore how we can trigger Power automate (formerly MS Flow) workflow from SPFx web part.
 

Build Power Automate Workflow

 
We will start by building flow to send out an email. Later we will trigger it from the SPFx web part using the REST API call.
  1. Navigate to Power Automate in Office 365.
  2. From the left menu, click Create.
  3. Select “Instant flow”.
Execute Power Automate Workflow From SPFx
 
4. In the modal dialog, specify the flow name (e.g. QuickMailSend).
 
5. Select the trigger as “When an HTTP request is received”.
Execute Power Automate Workflow From SPFx 
 
6. Click Create.
 
7. The flow should get created as below.
 
Execute Power Automate Workflow From SPFx 
 
8. We want to compose email with information about email address, subject, and body. Our request body will look like as below:
  1. {  
  2.     "emailaddress":"someone@contoso.com",  
  3.     "emailSubject""Hello",  
  4.     "emailBody""Hello from Power Automate flow"  
  5. }  
9. Expand the activity “When a HTTP request is received”.
 
10. Click “Generate from sample”.
 
Execute Power Automate Workflow From SPFx 
 
11. In the pop up, add the above request body JSON schema.
Execute Power Automate Workflow From SPFx 
12. Click Done.
 
13. The request body json schema will be generated.
 
Execute Power Automate Workflow From SPFx 
 
14. Click “+ New step”.
 
15. Find an add an action “Send an email”.
 
Execute Power Automate Workflow From SPFx 
 
16. Click on the field in the form, to add JSON parameters (from the schema).
 
Execute Power Automate Workflow From SPFx 
 
17. Click “+ New step”.
 
18. Choose action “Response”.
 
 Execute Power Automate Workflow From SPFx
 
19. Click Save.
 
20. Note down the HTTP POST URL.
 
Execute Power Automate Workflow From SPFx

Test Flow with Soap UI

 
Download the SoapUI from here.
  1. Select Method as Post.
  2. Specify the endpoint as HTTP POST URL.
  3. Specify the header as Content-type with value application/JSON
  4. In the Body, specify the JSON.
Execute Power Automate Workflow From SPFx
 
5. Click Send.
6. The email should be sent out to specified email.

Develop SPFx Web Part to execute Power Automate Flow

 
Open a command prompt. Create a directory for the SPFx solution.
  1. md spfx-flow-email  
Navigate to the above created directory.
  1. cd spfx-flow-email  
Run the Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.
 
Execute Power Automate Workflow From SPFx
  
Once the scaffolding process is completed, lock down the version of the project dependencies by running below command.
  1. npm shrinkwrap  
In the command prompt type below command to open the solution in the code editor of your choice.
  1. code .   

Code the web part

 
Open the web part file at “src\webparts\flowEmailer\FlowEmailerWebPart.ts”.
 
Add below imports.
  1. import { IHttpClientOptions, HttpClientResponse, HttpClient } from '@microsoft/sp-http';  
Update render() method to include basic controls to input email address, subject, body, and button to send email.
  1. public render(): void {  
  2.   this.domElement.innerHTML = `  
  3.     <div class="${ styles.flowEmailer }">  
  4.       <div class="${ styles.container }">  
  5.         <div class="${ styles.row }">  
  6.           <div class="${ styles.column }">  
  7.             <span class="${ styles.title }">Welcome to SharePoint!</span>  
  8.             <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>  
  9.             <p class="${ styles.description }">${escape(this.properties.description)}</p>  
  10.               
  11.             <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
  12.               <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
  13.                 <span class="${styles.fixedTitle}">Email</span>                      
  14.                 <input type='textbox' name='txtEmail' id='txtEmail' class="form-control" value="" placeholder="" >  
  15.               </div>    
  16.             </div>   
  17.               
  18.             <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
  19.               <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
  20.                 <span class="${styles.fixedTitle}">Subject</span>                      
  21.                 <input type='textbox' name='txtSubject' id='txtSubject' class="form-control" value="" placeholder="" >  
  22.               </div>    
  23.             </div>  
  24.   
  25.             <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
  26.               <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
  27.                 <span class="${styles.fixedTitle}">Body</span>                
  28.                 <textarea rows="4" cols="50" name='txtBody' id='txtBody' class="form-control"></textarea>  
  29.               </div>    
  30.             </div>  
  31.   
  32.             <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
  33.               <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
  34.                 <button class="${styles.button} email-Button">    
  35.                   <span class="${styles.label}">Send email</span>    
  36.                 </button>  
  37.               </div>    
  38.             </div>  
  39.   
  40.           </div>  
  41.         </div>  
  42.       </div>  
  43.     </div>`;  
  44.   
  45.     this.domElement.querySelector('button.email-Button').addEventListener('click', () => { this._emailButtonClicked(); });  
  46. }  
Implement button click event to read user inputs and send an email.
  1. private _emailButtonClicked(): void {    
  2.   let emailAddress: string = (<HTMLInputElement>document.getElementById("txtEmail")).value;  
  3.   let emailSubject: string = (<HTMLInputElement>document.getElementById("txtSubject")).value;  
  4.   let emailBody: string = (<HTMLInputElement>document.getElementById("txtBody")).value;  
  5.   
  6.   this.sendEmail(emailAddress, emailSubject, emailBody);  
  7. }   
  8.   
  9. private sendEmail(emailAddress: string, emailSubject: string, emailBody: string): Promise<HttpClientResponse> {  
  10.   const postURL = "<Specify Power Automate Flow URL>";  
  11.   
  12.   const body: string = JSON.stringify({  
  13.     'emailaddress': emailAddress,  
  14.     'emailSubject': emailSubject,  
  15.     'emailBody': emailBody,  
  16.   });  
  17.   
  18.   const requestHeaders: Headers = new Headers();  
  19.   requestHeaders.append('Content-type''application/json');  
  20.   
  21.   const httpClientOptions: IHttpClientOptions = {  
  22.     body: body,  
  23.     headers: requestHeaders  
  24.   };  
  25.   
  26.   console.log("Sending Email");  
  27.   
  28.   return this.context.httpClient.post(  
  29.     postURL,  
  30.     HttpClient.configurations.v1,  
  31.     httpClientOptions)  
  32.     .then((response: HttpClientResponse): Promise<HttpClientResponse> => {  
  33.       console.log("Email sent.");  
  34.       return response.json();  
  35.     });  
  36. }  

Test the Web Part

  1. On the command prompt, type “gulp serve -nobrowser”.
  2. Open SharePoint site.
  3. Navigate to /_layouts/15/workbench.aspx
  4. Locate and add the web part (named FlowEmailer) to page.
Execute Power Automate Workflow From SPFx
 
5. Provide the email, subject, and body.
6. Verify the email from Outlook.
 
Execute Power Automate Workflow From SPFx

Summary

 
In this article, we explored the practical use case of triggering the Power Automate workflow from SPFx web part. The HTTP POST URL exposed by Power Automate flow can be triggered from SPFx web part using HttpClient.