Create And Deploy Outlook Add-Ins Using SPFx 1.10

Introduction

These are simple steps to create your first Outlook add-in from the SharePoint framework 1.10 version. The integration of SharePoint Framework lets you use all of the tools of SPFx, including access to Graph APIs, along with the rich, native JavaScript APIs that are available across applications. Please note that it is still in Preview mode.

Prerequisites

1. Node version 10 LTS
2. Latest Yeoman and gulp
3. Visual studio code

For more details, Please check Microsoft docs for Setting up your SharePoint Framework development environment.

Development Steps

1. Run the following command.

   yo @microsoft/sharepoint --plusbeta
   

2. For the below question, select yes, as the solution needs to be deployed, and tenant-scoped.
   Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps to sites? Y
3. Select the framework you would want to use. I preferred to React in this example.
4. Post-installation, open your code in the Visual Studio code. You can see the OfficeAddin folder with the default manifest file inside as shown in the screenshot.
   
5. When I ran the gulp serve command, I got the following error. This might not happen to you. But if you get the same error - Cannot find module '@microsoft/sp-build-web', the solution is easy.
   
   • Run the command

     npm install @microsoft/sp-build-web
     

   • Delete your node modules and install all the packages again by running npm install –save.
6. After solving all the issues, Run the gulp serve command again and check if your web part is working in the local workbench.
7. To access Office.js, install the following package.

   npm install @types/office-js
   

8. To access the current email, initialize the mailbox item in the constructor as below.

   let mailboxItem: any;
   
   Office.initialize = (reason) => {
       mailboxItem = Office.context.mailbox.item;
   }
   

9. You can get the subject, body, attachment, to, cc, dateTimeCreated, dateTimeModified, etc from mailboxes.

   Example: mailboxItem.body
   Or: Office.context.mailbox.item.body
   

10. Check the properties you can access from Office.context.mailbox.item in this link here.