Search code examples
javascriptexceloffice-jsoffice-addins

Having trouble using takepane.js in an Excel Office Add-in

EDIT: Apparently, I misunderstood how Office Add-ins worked. Please see my comment below for how I was able to figure things out.

I was able to get an Excel office add-in working this weekend. The add-in was created with yeoman generator. I'm testing this add-in in both Excel desktop (PC) and Excel online.

The add-in currently runs in the following structure:

  1. The add-in contents are uploaded to Github pages
  2. The manifest.xml has been updated to replace localhost:3000 with the github page site.
  3. The manifest.xml has been uploaded to the Integrated Apps page in Microsoft 365 Admin Center for my developer account.

In order to get the add-in up and running I had to do a few things:

  1. I had to move the files in the taskpane directory (/src/takepane/) into the root directory.
  2. I had to use a <script> tag in the takespane.html file and execute the javascript code there.

If I don't move the taskpane.html file to the root directory, I get a 404 error when I try to load the add-in in Excel Online or Excel desktop once it's been uploaded to Github Pages.

I've tried multiple attempts to reference taskpane.js to get the add-in to reference code in that file. I've tried creating a <script> tag referencing this file from takepane.html. And I've looked into changing values in the webpack.config.js and the manifest.xml files. All of my attempts have been unsuccessful.

I was wondering if anyone knew of why I was experiencing these issues. Or could point me in the right direction of what I should be doing. I appreciate any advice. And I'm happy to provide any code requested.

Solution

  • After lots of trial and error I figured things out. It turns out I was confused about how Office Add-ins worked. Instead of uploading the add-in project, I was supposed to upload the distribution of the add-in project. That may be obvious to traditional developers / web developers. But I'm an Excel developer so it's not obvious to me. There's lots of material talking about how to create and run a local add-in. But not many talking about how to upload and distribute such an add-in. So this is what I had to do to make things work:

    1. Make your changes to takepane.js in the /src/takepane directory in the Office add-in project.
    2. Update the urlProd constant in the webpack.config.js with the URL where the files will be uploaded (I used Github Pages for this)
    3. Once you've made and have saved that update, run npm run build in the directory for the Office Add-in. This will create the dist directory in your Office add-in folder.
    4. Upload the files from the dist directory to the URL you previously assigned to the urlProd constant.
    5. Upload the manifest.prod.xml file from the dist directory (or provide the URL to this file) to the Microsoft 365 admin center.

    The route I listed above can be tricky. Using the Azure guide is easier imo. You can look into using that guide here

    After some delay, the add-in will display. For me the add-in is working in Excel Online. But I'm getting certificate issues with Excel desktop. So I'll be looking into that next.