Send Emails in SPFx Using SP Utility – The Easy Way!

Overview : 

Sending emails is one of the most common functionalities in enterprise-level SharePoint solutions. From notifying users to triggering alerts and approvals, email communication is crucial. 

Luckily, with SharePoint Framework (SPFx) and the PnP JS library, you can send rich HTML emails directly using sp.utility.sendEmail—without needing Power Automate, a backend API, or Third-party tools. 

In this blog, I will guide you step-by-step on how to send formatted emails in SPFx using the powerful yet simple sp.utility.sendEmail method. 

Prerequisites : 

Before we dive into the code, make sure you have the following ready: 

• SPFx solution created using Yeoman generator. 
  
• PnP JS (@pnp/sp) library installed in your solution. 
  
• Appropriate permission granted to the current user for sending emails.  

Install PnP JS : 

If you haven’t already, run the following command in your solution directly: 

npm install @pnp/sp @pnp/logging @pnp/common @pnp/odata --save

Import Required Modules : 

At the top of your component or service file. 

import { sp } from "@pnp/sp";

import "@pnp/sp/utility";

import { IEmailProperties } from "@pnp/sp/utility/types";

Implementation : 

Here’s the reusable method that allows you to send emails using sp.utility.sendEmail from your SPFx web part or extension: 

public async sendEmail(to: string[], cc: string[], subject: string, body: string) {

 const emailProps: IEmailProperties = {

   To: to,

   CC: cc,

   Subject: subject,

   Body: body,

   AdditionalHeaders: {

     "content-type": "text/html"

   }

 };

 

 try {

    console.log("Sending email with the following details:", emailProps);

    await sp.utility.sendEmail(emailProps);

    console.log("Email delivered successfully.");

  } catch (error) {

    console.error("Failed to send email:", error);

  }

}

Explanation : 

• To: Array of recipient email addresses. 
  
• CC: Array of CC recipients. 
  
• Subject: Email subject line. 
  
• Body: Email body, Supports both plain text and HTML. 
  
• AdditionalHeaders: Optional. If your body is HTML-formatted, set "content-type": "text/html" to ensure proper rendering. 

Example Usage : 

You can trigger the email function on a button click or event handler like this: 

this.sendEmail(

  ["user@example.com"],

  ["manager@example.com"],

  "SPFx Email Notification",

  "<p>Hello <strong>User</strong>,<br />This is a test email from SPFx.</p>"

 );

Permission Consideration : 

You do not need Microsoft Graph API to use this method. The SharePoint REST API is used behind the scenes by sp.utility.sendEmail. Make sure the API has permission to send emails. In your package-solution.json, add the following under webApiPermissionRequests if needed: 

"webApiPermissionRequests": [

 {

   "resource": "Microsoft Graph",

   "scope": "Mail.Send"

 }

]

Note: If you're using only SharePoint APIs, ensure that your SPFx solution has the necessary SharePoint permissions and is approved in the tenant app catalog. 

Benefits of Using sp.utility.sendEmail : 

• No backend or Power Automate dependency. 
  
• Lightweight and easy to integrate in any SPFx component. 
  
• Supports HTML and plain text email formats. 
  
• Encourages reusability across components or solutions. 
  
• No external configuration if user has default SharePoint email rights. 
  
• Ideal for alerts, notifications, and internal workflows. 

Pro Tips : 

• Avoid sending emails in loops—consider batching where possible. 
  
• Test in development/staging environments before live rollout. 
  
• Sanitize user input in the email body to avoid script injection. 
  
• Use environment-based logic to control when and where emails are sent. 
  
• Format HTML correctly for compatibility across different mail clients. 

Conclusion : 

• With just a few lines of code, you can send dynamic, formatted HTML emails directly from your SPFx web part using sp.utility.sendEmail method. It’s reliable, efficient, and works perfectly in SPFx environments for sending notifications without any server dependency.  
• This method is perfect for building quick notifications and alerts in your SharePoint solutions, especially when you want to keep things simple and inside the SPFx ecosystem. 

If you found this helpful, do not forget to share and comment!