SPFx extension - Mail current view as image

Introduction

This blog post explains how to create an SPFx extension which will email the current visible view of the list as an image.

Demo of the functionality

Microsoft have released view formatting recently and there are cool example JSON files provided. Now if this formatted view needs to be sent as an image in an email/saved as image in a library then, we can make use of the extension.

Getting the image

The extension uses a library called html2canvas to grab the required section (HTML element) in the page and convert that section to an image. Here we grab all the contents in the element of class “ StandaloneList-innerContent”

Sending email

Once we have the image it needs to be sent in an email and also it needs to be saved to a library.

To send an email the extension uses Microsoft Graph API — “/me/sendMail” endpoint. The data that needs to be posted to this includes: to address, subject, body and attachment. The structure of this message can be defined in an interface as shown below.

The “to address, subject and body” are captured as user input. The image obtained from html2canvas needs to be converted into byte array, so that it can be added to the message object (IAttachment type).

This message object will be posted to the sendmail endpoint.

Permissions

Since the extension uses Microsoft Graph API sendmail endpoint, the extension needs “Mail.Send” permissions. This needs to be added in the package-solution.json file.

When the solution is packaged and uploaded to the app catalog, in the modern admin site this API permission request can be seen. The request needs to be approved.

For more details on the permissions, please see the video in the reference section below.

Saving to SharePoint using PnP JS

To save the image in a SharePoint library, the extension makes use of sp pnp js (makes many SharePoint tasks easy).

PnP SPFx controls

PnP team always come up with fantastic things which reduce developers’ effort. PnP SPFx controls repo is one of such things.

The extension also has capability to send email to internal users. To get an internal user the extension uses PnP SPFx People picker control.

To show the libraries in drop-down so that the user can select where the image needs to be saved, the extension uses PnP SPFx List Picker control.

Code

The code for this extension can be found in github under the PnP sp-dev-fx-extensions repo.

Additional bits/improvements

1. To capture the image the code uses the class “ StandaloneList-innerContent” to pass to html2canvas. This class name can be declared as a property of the extension so that it can be updated after deployment. More information on how to update properties can be found in this video by Paolo Pialorsi.
2. There is no validation present in the code. So that can be added as per the requirement.

References

Paolo’s video on sending mail using Microsoft Graph API