Create Task Pane Office Add-In for Outlook 2016

Question

I am trying to create an add-in for Outlook 2016. In previous versions of Office, this was done using a WinForms UserControl and was fairly simple. However, there are now universal templates in Visual Studio 2015 for an Office Add In , which I would like to use, rather than the Outlook VSTO Add In (both shown here ).

My issue is that when selecting the new Office Add In template, Visual Studio then asks what application(s) this plug in is for, and as shown, there is not an option for Outlook .

So, I would like to know how I can create a custom Task Pane for Outlook 2016 using the new Office Templates?

Apologies for the links to images, I don't yet have enough rep to directly add them to questions. Thanks!

Answer 1

There is an example solution on GitHub . In this example, JavaScript and HTML are used. Here is an example of the JavaScript that pulls data from the selected email:

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

        loadProps();
    });
};

   function loadProps() {
  var item = Office.context.mailbox.item;

  $('#dateTimeCreated').text(item.dateTimeCreated.toLocaleString());
  $('#dateTimeModified').text(item.dateTimeModified.toLocaleString());
  $('#itemClass').text(item.itemClass);
  $('#itemId').text(item.itemId);
  $('#itemType').text(item.itemType);

  if (item.itemType == Office.MailboxEnums.ItemType.Message){
    loadMessageProps(item);
  }
  else {
    loadAppointmentProps(item);
  }
}

This is then linked to a HTML page to display the data. In order to add this to Outlook, there is also an XML manifest file. This tells outlook where to find the pages, here is a snippet of the file:

<Requirements>
  <bt:Sets DefaultMinVersion="1.3">
    <bt:Set Name="Mailbox" />
  </bt:Sets>
</Requirements>
<Hosts>
  <Host xsi:type="MailHost">
    <DesktopFormFactor>
      <!-- Message read form -->
      <ExtensionPoint xsi:type="MessageReadCommandSurface">
        <OfficeTab id="TabDefault">
          <Group id="msgReadDemoGroup">
            <Label resid="groupLabel" />
            <Tooltip resid="groupTooltip" />
            <!-- Task pane button -->
            <Control xsi:type="Button" id="msgReadOpenPaneButton">
              <Label resid="paneReadButtonLabel" />
              <Tooltip resid="paneReadButtonTooltip" />
              <Supertip>
                <Title resid="paneReadSuperTipTitle" />
                <Description resid="paneReadSuperTipDescription" />
              </Supertip>
              <Icon>
                <bt:Image size="16" resid="green-icon-16" />
                <bt:Image size="32" resid="green-icon-32" />
                <bt:Image size="80" resid="green-icon-80" />
              </Icon>
              <Action xsi:type="ShowTaskpane">
                <SourceLocation resid="readTaskPaneUrl" />
              </Action>
            </Control>
          </Group>
        </OfficeTab>
      </ExtensionPoint>

Hope this helps others as it helped me.