Create Outlook Add-in using SPFX

SPFX really spreading its wings wider and now it lets us to develop Outlook Add-in from SharePoint itself. Don’t need any additional office coding knowledge.

Just create a SPFX webpart with SharePoint Framework 1.10. For now, its supported in Outlook Web Access only as its in developer preview mode. Hope it will be rolled out in desktop clients as well on general release. Further updates refer Microsoft site

Create a SPFX webpart

It’s a preview feature, so use “–plusbeta” in yeoman generator.

Open the created webpart project with VS Code and install office SDK using below npm command

npm install @types/office-js

Add Office context

Open webpart file “OutlookAddinWebPart.ts” and update the render method with this code. “this.context.sdks.office” identifies the outlook context.

public render(): void {
    let title: string = '';
    let subTitle: string = '';
    let contextDetail: string = '';

    if (this.context.sdks.office) {
        // We have Office context for the solution
        title = "Welcome to Office!";
        subTitle = "Extending Office with custom business extensions.";
        contextDetail = "We are in the context of following email: " + this.context.sdks.office.context.mailbox.userProfile.emailAddress;
    }
    else
    {
        // We are rendered in normal SharePoint context
        title = "Welcome to SharePoint!";
        subTitle = "Customize SharePoint experiences using Web Parts.";
        contextDetail = "We are in the context of following site: " + this.context.pageContext.web.title;
    }

    this.domElement.innerHTML = `
      <div class="${ styles.outlookAddin }">
    <div class="${ styles.container }">
      <div class="${ styles.row }">
        <div class="${ styles.column }">
          <span class="${ styles.title }">${title}</span>
          <p class="${ styles.subTitle }">${subTitle}</p>
          <p class="${ styles.description }">${contextDetail}</p>
          <p class="${ styles.description }">${escape(this.properties.description)}</p>
          <a href="https://aka.ms/spfx" class="${ styles.button }">
          <span class="${ styles.label }">Learn more</span>
          </a>
          </div>
          </div>
          </div>
          </div>`;
  }

Package & Deploy to SharePoint catalog

We are ready now to package and deploy.

gulp bundle --ship
gulp package-solution --ship

First, we need to deploy our webpart to SharePoint Online catalog. Go to “sharepoint\solution” and upload the “outlookaddin.sppkg” webpart package file to catalog site.

Add Add-in to Outlook

As it’s a preview feature its only available in Outlook Web Access, so go to Office 365 Outlook Web access

Select the “manifest” file available in “officeAddin” folder in the webpart project. This is the new folder available in SPFX 1.10 version to support office Add in.

We are done, go back to the mailbox open a mail and click 3 dots (…) more options. You will find “SPFx template” click it to open the task pane.

Amazing, our SharePoint webpart pane opens. Thanks for reading my blog. Sharing is caring.