Microsoft Office Add-in from Tutorial Not Responsive

Question

I am building a Microsoft Word Add-In using this tutorial: https://docs.microsoft.com/en-us/office/dev/add-ins/tutorials/word-tutorial.

I am running it on Microsoft Word 2016 for Mac.

I am experiencing several problems, which may be related:

Initially the add-in was working in Word after I side-loaded it. Then, I made update, ran the commands "npm run build" and then "npm start", and closed Word and opened it again and side-load the add-in. I now see the buttons change (in accordance with the changes that I just made), but when I click the buttons they don't work. I have tried re-building the project and re-starting it several times, and the buttons don't work.
When I try to load the add-in in the browser on https://localhost:3000, I am able to see the buttons in the browser, but it says that the connection is not secure. I installed the self-signed certificate in accordance with these instructions: https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md. But it still didn't work.

Any help would be much appreciated.


(function () {
    Office.initialize = function (reason) {
        $(document).ready(function () {

            // TODO1: Determine if the user's version of Office supports all the
            //        Office.js APIs that are used in the tutorial.
            if (!Office.context.requirements.isSetSupported('WordApi', '1.3')) {
                console.log('Sorry. The tutorial add-in uses Word.js APIs that are not available in your version of Office.');
            }

            // TODO2: Assign event handlers and other initializaton logic.
            $('#insert-paragraph').click(insertParagraph);
            $('#apply-style').click(applyStyle);
            $('#apply-custom-style').click(applyCustomStyle);
            $('#change-font').click(changeFont);
            $('#insert-text-into-range').click(insertTextIntoRange);
            $('#insert-text-outside-range').click(insertTextBeforeRange);
            $('#replace-text').click(replaceText);
            $('#insert-image').click(insertImage);
            $('#insert-html').click(insertHTML);
            $('#insert-table').click(insertTable);

        });
    };

// TODO3: Add handlers and business logic functions here.
    function insertParagraph() {
      Word.run(function (context) {

            // TODO4: Queue commands to insert a paragraph into the document.
            var docBody = context.document.body;
            docBody.insertParagraph("Office has several versions, including Office 2016, Office 365 Click-to-Run, and Office on the web.",
                                    "Start");

            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }

    function applyStyle() {
      Word.run(function (context) {

          // TODO1: Queue commands to style text.
          var firstParagraph = context.document.body.paragraphs.getFirst();
          firstParagraph.styleBuiltIn = Word.Style.intenseReference;

          return context.sync();
      })
      .catch(function (error) {
          console.log("Error: " + error);
          if (error instanceof OfficeExtension.Error) {
              console.log("Debug info: " + JSON.stringify(error.debugInfo));`
          }
      });
    }

Did the security error go away when you trusted the cert? Are the buttons that don't work in the taskpane or on the ribbon? If in the taskpane, please share the code where you assign a handler to the button and the code of the handler. — Rick Kirkham
Rick, thank you for your response. The security error did not go away when I trusted the cert. The buttons that don't work are in the taskpane. Below is the code where I assign a handler to the button and the code of the handler. — Ryan
I resolved this issue. The tutorial instructs users to add the following line of code: import { base64Image } from "./base64Image";. When I removed that line, the add-in started working again. — Ryan

Ryan Ryan · Accepted Answer · 2019-08-31T23:24:33

I resolved this issue. The tutorial instructs users to add the following line of code: import { base64Image } from "./base64Image";. When I removed that line, the add-in started working again.

Microsoft Office Add-in from Tutorial Not Responsive

1 Answers