Missing add-ins or show taskpane to test an add-in

Question

I was following microsofts 'create your first outlook add-in', but when you're supposed to test it the step says to click 'show taskpane', but that button doesn't exist anywhere. How are you supposed to test an add-in if this feature is missing from outlook?

https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/outlook-quickstart-yo

Answer 1

1. Check if the Add-in Loaded Properly

Make sure your add-in is actually sideloaded into Outlook:

• In Outlook (Desktop or Web), go to the Home tab and look for your custom group or button (depending on your manifest file setup).
• You should see your add-in listed under My Add-ins or it should show in the ribbon if you’re using a command-based add-in.

If it’s not there, you might need to:

• Rerun the sideloading script (npm run start or npm run sideload if you’re using the Yeoman generator)
• Clear your Outlook cache and reload

2. Open a Supported Item (like a Message or Calendar Item)

The “Show Taskpane” command is often only available in context. That means:

• If your add-in is designed for reading or composing an email, make sure you’re actually opening or composing a message.
• If you’re in the inbox without selecting anything, your command might not show up.

3. Check the Manifest File

Your manifest must define a CommandSurface (like MessageReadCommandSurface) with an Action of type ShowTaskpane.

Example from the manifest:

<ExtensionPoint xsi:type="MessageReadCommandSurface">

  <OfficeTab id="TabDefault">

    <Group id="msgReadGroup">

      <Label resid="groupLabel" />

      <Control xsi:type="Button" id="msgReadOpenPaneButton">

        <Label resid="paneReadButtonLabel" />

        <Supertip>

          <Title resid="paneReadSuperTipTitle"/>

          <Description resid="paneReadSuperTipDescription"/>

        </Supertip>

        <Icon>

          <bt:Image size="16" resid="icon16"/>

          <bt:Image size="32" resid="icon32"/>

          <bt:Image size="80" resid="icon80"/>

        </Icon>

        <Action xsi:type="ShowTaskpane">

          <SourceLocation resid="messageReadTaskPaneUrl" />

        </Action>

      </Control>

    </Group>

  </OfficeTab>

</ExtensionPoint>

Make sure you’re targeting the right item types (like MessageRead, MessageCompose, etc.).

4. Using Outlook Desktop vs. Web

Some features or buttons render differently based on the Outlook version you’re using:

• Outlook Web tends to behave more consistently with newer Office add-ins.
• Outlook Desktop may require sideloading differently and sometimes hides buttons if the ribbon isn’t fully loaded.

5. Try Manually Opening the Taskpane

If your add-in is registered and you can’t see the button, go to:

• My Add-ins > click on your add-in > see if it opens a pane.
• Or, add a breakpoint or console.log in your taskpane script and look for activity in the dev console.

If you’re still stuck, feel free to share which step you’re on (Yeoman scaffold, testing in Outlook Web or Desktop, etc.), and I can walk you through it. Want help checking your manifest or your localhost test environment? Ah yes, this can be a common point of confusion when building your first Outlook add-in, especially if something isn’t showing up as expected. Here are a few things to check if the “Show Taskpane” button is missing when you’re trying to test your add-in:

1. Check if the Add-in Loaded Properly

Make sure your add-in is actually sideloaded into Outlook:

• In Outlook (Desktop or Web), go to the Home tab and look for your custom group or button (depending on your manifest file setup).
• You should see your add-in listed under My Add-ins or it should show in the ribbon if you’re using a command-based add-in.

If it’s not there, you might need to:

• Rerun the sideloading script (npm run start or npm run sideload if you’re using the Yeoman generator)
• Clear your Outlook cache and reload

2. Open a Supported Item (like a Message or Calendar Item)

The “Show Taskpane” command is often only available in context. That means:

• If your add-in is designed for reading or composing an email, make sure you’re actually opening or composing a message.
• If you’re in the inbox without selecting anything, your command might not show up.

3. Check the Manifest File

Your manifest must define a CommandSurface (like MessageReadCommandSurface) with an Action of type ShowTaskpane.

Example from the manifest:

<ExtensionPoint xsi:type="MessageReadCommandSurface">

  <OfficeTab id="TabDefault">

    <Group id="msgReadGroup">

      <Label resid="groupLabel" />

      <Control xsi:type="Button" id="msgReadOpenPaneButton">

        <Label resid="paneReadButtonLabel" />

        <Supertip>

          <Title resid="paneReadSuperTipTitle"/>

          <Description resid="paneReadSuperTipDescription"/>

        </Supertip>

        <Icon>

          <bt:Image size="16" resid="icon16"/>

          <bt:Image size="32" resid="icon32"/>

          <bt:Image size="80" resid="icon80"/>

        </Icon>

        <Action xsi:type="ShowTaskpane">

          <SourceLocation resid="messageReadTaskPaneUrl" />

        </Action>

      </Control>

    </Group>

  </OfficeTab>

</ExtensionPoint>

Make sure you’re targeting the right item types (like MessageRead, MessageCompose, etc.).

4. Using Outlook Desktop vs. Web

Some features or buttons render differently based on the Outlook version you’re using:

• Outlook Web tends to behave more consistently with newer Office add-ins.
• Outlook Desktop may require sideloading differently and sometimes hides buttons if the ribbon isn’t fully loaded.

5. Try Manually Opening the Taskpane

If your add-in is registered and you can’t see the button, go to:

• My Add-ins > click on your add-in > see if it opens a pane.
• Or, add a breakpoint or console.log in your taskpane script and look for activity in the dev console.