Search code examples
reactjsoffice-jsoutlook-addinoffice-addinsoutlook-web-addins

How to add a new html page to my react outlook add-in

I created a new outlook add-in using the react-taskpane option in the yeoman generator. I need to insert a new html page to prompt it when there's no signed user is present.

This is the file structure:

enter image description here

I didn't change the manifest file. But, I included the following in the webpackconfig.js file:

new HtmlWebpackPlugin({
    filename: "Handler.html",
    template: "./src/AppCommon/Auth/Handler.html",
    chunks: ["Handler"],
  }),

When I run npm run build Handler.html gets included in the dist folder. How can I prompt that page in a separate window? (The logic to check whether the user is logged in or not is not needed).

I used this line for that:

window.location.href = app.hostUrl + "/src/AppCommon/Auth/Handler.html";

And I'm getting this error: Cannot GET /src/AppCommon/Auth/Handler.html

How can I define the path correctly?? Thank you in advance

Solution

  • First of all, if you want a separate window, don't use window.location.href. Use the Office.UI.displayDialogAsync method. For more details, see the official documentation: Use the Office dialog API in Office Add-ins

    Secondly, I don't think you should have the /src in the URL, especially if you are in production mode and serving the file from /dist.