Search code examples
xmlms-wordoffice-jsoffice-addinsword-addins

Office Word Add-In ExecuteFunction displaying commands.html instead of running the function

I'm new to Office Add-ins so this might be a trivial mistake. For this Typescript React Add-in I have created a Context Menu Extension Point that on click is supposed to run a custom function getButton(), which for now just console.logs a simple string ("berry !"). However instead of doing that, upon click it opens up a small Developer Window and displays the body tag of the commands.html file. When I rightclick that window and look at the console of it, that's where I see my function print the test-string. I want that Developer Window not to open at all instead, and log the string inside taskpane console.

What am I doing wrong?

manifest.xml

<FunctionFile resid="Commands.Url" />
<!-- other stuff -->
<ExtensionPoint xsi:type="ContextMenu">
  <OfficeMenu id="ContextMenuText">
    <Control xsi:type="Menu" id="TestMenu2">
      <Label resid="residLabel" />
      <Supertip>
        <Title resid="residLabel" />
        <Description resid="residToolTip" />
      </Supertip>
      <Icon>
        <bt:Image size="16" resid="Icon.16x16" />
        <bt:Image size="32" resid="Icon.32x32" />
        <bt:Image size="80" resid="Icon.80x80" />
      </Icon>
      <Items>
        <Item id="showGallery2">
          <Label resid="residLabel"/>
          <Supertip>
            <Title resid="residLabel" />
            <Description resid="residToolTip" />
          </Supertip>
          <Icon>
            <bt:Image size="16" resid="Icon.16x16" />
            <bt:Image size="32" resid="Icon.32x32" />
            <bt:Image size="80" resid="Icon.80x80" />
          </Icon>
          <Action xsi:type="ExecuteFunction">
            <FunctionName>getButton</FunctionName>
          </Action>
        </Item>
      </Items>
    </Control>
  </OfficeMenu>
</ExtensionPoint>

<!-- other stuff -->
<bt:Urls>
  <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html" />
  <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
</bt:Urls>

commands.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
    <script>
        Office.onReady( () => {
          Office.actions.associate("getButton", getButton);    
        });

        function getButton(event) {
            console.log("berry !");
            event.completed();
        }
    </script>
</head>

<body>
    Commands HTML File body.
</body>

</html>

What happens when I call the function: Developer Window pops up with the content of the commands.html body tag Right click in document and invoke function

Developer Window pops up with the content of the commands.html body tag

Solution
    1. The tag of commands.html must not have anything in it.
    2. Unless you are using a shared runtime, the command runs in its own runtime process, so the console actions will not appear in the console of the task pane's runtime.