How to Send an Email Using a Graph API in SharePoint Framework (SPFx)

Introduction

 

Before we get started, if you are new to SharePoint Framework web parts, please take a look at below articles about building SharePoint Framework web parts and extensions using the below links,

• Creating SharePoint Webparts
• Creating SharePoint Extensions

Graph API

 

Graph APIs are used to connect multiple Office365 services using a single endpoint. We have separate APIs for each of the services like Outlook and OneDrive, but we can’t access all with the same approach. This is because there are some differences in some Endpoints, Headers, Request Format, Response Format, etc...

 

Graph API solves this problem by sitting on top of Office365 services and act as a PROXY service to all other individual services. Learn more about Graph API by following this link.

 

Graph API configuration in SPFx

 

It’s not very difficult to do the configuration. Open your SPFx solution look for the file called “package-solution.json” under the “config” folder. Under the tag solution add the below configuration:

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Mail.Send"
      }
    ]

Since MS Graph API deals with multiple services we need to specify which scope/permission we need to perform our action, so access tokens will be generated based on that. That’s what we did here.

 

Generate Graph API Send Email Object

 

Now time to add some coding to send email. Below is the code snippet helps to create email post object to send email using Graph API. To learn more about the attributes involved in Graph API Email object check out the official documentation using this link.

let emailPostBody: any = {
        “message”: {
          “subject”: “Mail Subject”,
          “body”: {
            “contentType”: “HTML”,
            “content”: “Mail Content”
          },
          “toRecipients”: [
            {
              “emailAddress”: {
                “address”: “[email protected]”
              }
            }
          ],
          “ccRecipients”: [
            {
              “emailAddress”: {
                “address”: “[email protected]”
              }
            }
          ],
        }
      };

Invoking GraphClient in SPFx

 

In SPFx we will get the user context using the object “context”. We have msGraphClientFactory available in the same object which will take care of generating the Access Token based on the user context. Below is the code:

 

GraphClient Factory

this.context.msGraphClientFactory

Creating Graph Client,

this.context.msGraphClientFactory.getClient()

By default, this getClient will use the latest API version and takes care of creating a Graph API HTTP request with base URL. We just need to pass our endpoint and the required parameters.

 

Here is the full code to invoke graph client and send an email:

this.context.msGraphClientFactory
            .getClient()
            .then((client: MSGraphClient): void => {
                // get information about the current user from the Microsoft Graph
                client
                    .api('/me/sendMail')
                    .post(emailPostBody, (error, response: any, rawResponse?: any) => {
                        // handle the response
                    });
            });

Granting Permission to SPFx app

 

We need to approve the Graph API permission requested from our app through package-solution.json file. To do that first package the SPFx app and upload it in the SharePoint AppCatalog. Then go to the SharePoint Admin Center, using the URL

 

https://YourTenantName-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx

 

This will take you to the modern admin center, in left navigation go to Advanced - >API access where you can approve/reject the API permission requests for the apps.

 

 

In the upcoming screen, under “Pending Requests” you can find the permission request that we mentioned in our SPFx app. Click on the specific permission, Approve or Reject button will appear at the top, like the below screenshot. If you don’t find it under the Pending Requests section, it means the same permission is approved for different apps organization-wide, so you can find the same in the “Approved Requests” section.

 

 

Once you click on the Approve, it will open a popup Click “Approve” button in the popup. Now your request will be moved to the “Approved Requests” section.

 

Now we all set to run our SPFx application either from local or after deploying in any CDN, which will send email to the users based on your business logic.

 

Conclusion

 

I hope this article helps you understand how to send an email to any user from SharePoint Framework (SPFx) webparts. If you have any questions/issues about this article, please let me know in the comments.