Create And Deploy Outlook Add-Ins Using SPFx 1.10

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 follow 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, 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 in 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 could see the OfficeAddin folder with the default manifest file inside as shown in the screenshot 
   
   
   
    
5. When I run 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.
    
   
    
1. Run the command - npm install @microsoft/sp-build-web
2. Delete your node modules and install all the packages again by running npm install –save
     
6. After solving all the issues, Run 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 mailboxitem in the constructor as below:
   1. let mailboxItem: any;  
   2. Office.initialize = (reason)=> {  
   3.    mailboxItem = Office.context.mailbox.item;  
   4. }  
9. You can get the subject, body, attachment, to, cc, dateTimeCreated, dateTimeModified etc from mailboxItem
   1. Example: mailboxItem.body  
   2. Or : Office.context.mailbox.item.body  
10. Check the properties you can access from Office.context.mailbox.item in this link here.

Deployment steps

 

There are two steps in the deployment process. First, the webpart should be deployed in the SharePoint app catalog before you add the manifest file in outlook as a dd-in.

 

Step 1

1. Package your solution as you usually do:
    
1. gulp bundle --ship
2. gulp package-solution--ship
    
2. In your solution, under the SharePoint/solution folder, you will see the newly created package. Upload that in the SharePoint app catalog. Do not forget to select the checkbox - Make this solution available to all sites in the organization
    
    

Step 2

1. Open Outlook in the browser here.
    
2. Select any email and click the three dots on the right corner of the email. Then click the 'Get Add-ins' option.
    
   
    
3. Add-Ins for Outlook pop up will be opened. In that window, select my add-ins from the left navigation.
    
1. Scroll to the bottom and you will see custom add-ins section.
2. Select Add Custom add-ins and select the Add from file option.
    
   
    
4. Now, in your solution, under Office Add-ins folder, you have the manifest file(XML file) present for deployment. Do not change/update the URL if you do not want to configure it. It has a specific tag, which is then automatically updated based on the hosted tenant. Select this manifest file and upload it.
    
   
    
5. Click the Install button on the warning message box
    
   
    
6. Now to see your add-in, select the three dots in the email on the right corner and click your add-in name.
    
   

Note

 

The preview add-in will be supported only in the Outlook web app.

 

To read more on configuring manifest file, click here.