Execute Power Automate Workflow from SPFx

md spfx-flow-email  

cd spfx-flow-email  

yo @microsoft/sharepoint  

Once the scaffolding process is completed, lock down the version of the project dependencies by running below command.

npm shrinkwrap  

In the command prompt type below command to open the solution in the code editor of your choice.

code

Code the web part

Open the web part file at “src\webparts\flowEmailer\FlowEmailerWebPart.ts”.

Add below imports.

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.

public render(): void {  
  this.domElement.innerHTML = `  
    <div class="${styles.flowEmailer}">  
      <div class="${styles.container}">  
        <div class="${styles.row}">  
          <div class="${styles.column}">  
            <span class="${styles.title}">Welcome to SharePoint!</span>  
            <p class="${styles.subTitle}">Customize SharePoint experiences using Web Parts.</p>  
            <p class="${styles.description}">${escape(this.properties.description)}</p>      
            <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
              <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
                <span class="${styles.fixedTitle}">Email</span>                      
                <input type='textbox' name='txtEmail' id='txtEmail' class="form-control" value="" placeholder="">  
              </div>    
            </div>                
            <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
              <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
                <span class="${styles.fixedTitle}">Subject</span>                      
                <input type='textbox' name='txtSubject' id='txtSubject' class="form-control" value="" placeholder="">  
              </div>    
            </div>  
            <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
              <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
                <span class="${styles.fixedTitle}">Body</span>                    
                <textarea rows="4" cols="50" name='txtBody' id='txtBody' class="form-control"></textarea>  
              </div>    
            </div>   
            <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">    
              <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
                <button class="${styles.button} email-Button">    
                  <span class="${styles.label}">Send email</span>    
                </button>  
              </div>    
            </div>   
          </div>  
        </div>  
      </div>  
    </div>`;  
  this.domElement.querySelector('button.email-Button').addEventListener('click', () => { this._emailButtonClicked(); });  
}

Implement button click event to read user inputs and send an email.

private _emailButtonClicked(): void {    
  let emailAddress: string = (<HTMLInputElement>document.getElementById("txtEmail")).value;  
  let emailSubject: string = (<HTMLInputElement>document.getElementById("txtSubject")).value;  
  let emailBody: string = (<HTMLInputElement>document.getElementById("txtBody")).value;  
  this.sendEmail(emailAddress, emailSubject, emailBody);   
}    
private sendEmail(emailAddress: string, emailSubject: string, emailBody: string): Promise<HttpClientResponse> {  
  const postURL = "<Specify Power Automate Flow URL>";  
  const body: string = JSON.stringify({  
    'emailaddress': emailAddress,  
    'emailSubject': emailSubject,  
    'emailBody': emailBody,  
  });  
  const requestHeaders: Headers = new Headers();  
  requestHeaders.append('Content-type', 'application/json');  
  const httpClientOptions: IHttpClientOptions = {  
    body: body,  
    headers: requestHeaders  
  };    
  console.log("Sending Email");  
  return this.context.httpClient.post(  
    postURL,  
    HttpClient.configurations.v1,  
    httpClientOptions)  
    .then((response: HttpClientResponse): Promise<HttpClientResponse> => {  
      console.log("Email sent.");  
      return response.json();  
    });  
}

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.
   
5. Provide the email, subject, and body.
6. Verify the email from Outlook.
   

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.