0

I wants developing a modern Office Add-In for Outlook. This Add-In should support a connection to SP2016, SP2019 and SPO. For these SharePoint-connections I want to use the SP-PNP-JS, but I'm not able to get a SharePoint-context.

I'm creating a new Outlook Add-In with the yeoman-generator

yo office --projectType react --name "Outlook AddIn" --host outlook --ts true.

The Sideloading to Outlook Client und OWA works fine. In this case I installed the sp-pnp-js to this project with

npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp @pnp/nodejs --save

and tried to connect the SharePoint-context with each sample from https://pnp.github.io/pnpjs/getting-started/#establish-context.

I also tried to establish the connection with the sp-addinhelpers https://pnp.github.io/pnpjs/sp-addinhelpers/.

After serveral days I'm really frustrated. Is it possible to use the sp-pnp-js in Office Add-Ins? Has anyone a solution for using SP-PNP-JS in Office-Addins on-premises or alternative REST and JSOM?

I'm using SPO for developing. This Add-In should integrated in Outlook 2019 und SharePoint 2016/2019 on-premises.

Thanks for help!!!

Update - 2021/04/11 I created a new pure ReactJS project without yeoman-generator. In this project I added sp-pnp-js via npm install und linked the office.js from the official Office.js CDN.

taskpane.html

<!doctype html>
<html lang="en" data-framework="javascript">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=11" />
    <link rel="icon" href="/favicon.ico" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
        type="text/javascript"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="logo192.png" />
    <title>Outlook Add-In</title>
    <link href="<sharepoint-tenant>/SiteAssets/office-addin/static/css/2.486e1214.chunk.css"
        rel="stylesheet">
    <link href="<sharepoint-tenant>/SiteAssets/office-addin/static/css/main.d5778436.chunk.css"
        rel="stylesheet">
</head>

The compiled files are uploaded to SharePoint. Now I get the correct context and I my SharePoint operations are running correct. I've initialize Office with:

index.js

import "office-ui-fabric-react/dist/css/fabric.min.css";
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Taskpane from './Taskpane';
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
/* global Component, document, Office, module, require, Taskpane */

console.log("initializing...")
Office.initialize = function(reason) {console.log(reason)};
Office.onReady(function() {
  console.log("Office ready!");
  initializeIcons();
  ReactDOM.render(<Taskpane />, document.getElementById("root"));
});

Only in IE11 I get the error 'SCRIPT5009: 'Office' is undefined at the line Office.initialize. The taskpane in Outlook Desktop-Client is blank because the client is calling iexplorer.exe. I've spend a lot of days to fix this problem. I would be very grateful for tips.

Fra4Ric
  • 1
  • 1
  • I don't have experience with sp-pnp-js, but I can ask one question and clarify something to help with the frustration. The question is, once you have authentication working, what do you plan to use the library for? I noticed it includes a way to call graph APIs, and, for example, there is an alternative way for Office add-ins to call Graph APIs. Second, from the perspective of the library, an Office add-in falls under an "any JavaScript project" rather than a "SharePoint Framework" project. This is important because parts of the library's documentation are specific to SharePoint Framework. – Outlook Add-ins Team - MSFT Apr 06 '21 at 19:04
  • Thank you for your support. Is it posible to use graph API on-premise? In my case, I created a new pure ReactJS project without yeoman-generator. In this project I added sp-pnp-js via npm install und linked the office.js from the official "evergreen" Office.js CDN. The compiled files are uploaded to SharePoint. Now I get the correct context and I can running my SharePoint operations. Only in IE11 I get the Error 'SCRIPT5009: 'Office' is undefined. The taskpane in Outlook Desktop-Client is blank because the client is calling iexplorer.exe. Please read my update. – Fra4Ric Apr 11 '21 at 19:52
  • Unfortunately, there's no Graph APIs in on-premises. PnP js is supported at https://github.com/pnp/pnpjs/issues, feel free to open any PnP js issues there. – Outlook Add-ins Team - MSFT Apr 15 '21 at 20:18

0 Answers0