How to show vertical pane in Outlook add-ins in Outlook Web App (OWA), Outlook 2016 Mac & Windows

Question

I am developing an outlook add-in targeting OWA, Outlook 2016 for Mac & Windows. My requirement is to show the add-in vertically on right side while re

Answer 1

Add-in commands will be rolling out soon to all users and all add-ins for Outlook Web and we expect it to be at a 100% in the month of Dec. Once its rolled out you'll be able to have buttons in OWA that launch task pane, as you see in the screenshot. For Outlook desktop for Windows, this feature is already available however for Outlook for MAC too we expect this to be out in December!

Answer 2

I make such vertical add-in using YEOMAN Office Generator. for reference use this link. GitHub link for yeoman-office-generator. And make changes in your manifest.xml file is as belows:

    <?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns=
  "http://schemas.microsoft.com/office/appforoffice/1.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:type="MailApp">

  <Id>7856b76d-42c2-4b40-87df-c4bfb706246f</Id>
  <Version>1.0</Version>
  <ProviderName>Microsoft</ProviderName>
  <DefaultLocale>en-us</DefaultLocale>
  <DisplayName DefaultValue="Alore MailTracker"/>
  <Description DefaultValue="Send and Track your emails.">
    <Override Locale="fr-fr" Value="Send and track your emails with Alore Emailtracker."/>
  </Description>
  <!-- Change the following line to specify    -->
  <!-- the web serverthat hosts the icon file. -->
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png"/>

  <Hosts>
    <Host Name="Mailbox" />
  </Hosts>
  <Requirements>
    <Sets DefaultMinVersion="1.1">
      <Set Name="Mailbox" />
    </Sets>
  </Requirements>

  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <!-- Change the following line to specify     -->
        <!-- the web server that hosts the HTML file. -->
        <SourceLocation DefaultValue="https://localhost:3000/index.html" />
        <RequestedHeight>216</RequestedHeight>
      </DesktopSettings>
      <TabletSettings>
        <!-- Change the following line to specify     -->
        <!-- the web server that hosts the HTML file. -->
        <SourceLocation DefaultValue="https://localhost:3000/index.html" />
        <RequestedHeight>216</RequestedHeight>
      </TabletSettings>
    </Form>
    <Form xsi:type="ItemEdit">
      <DesktopSettings>
        <!-- Change the following line to specify     -->
        <!-- the web server that hosts the HTML file. -->
        <SourceLocation DefaultValue="https://localhost:3000/index.html" />
      </DesktopSettings>
      <TabletSettings>
        <!-- Change the following line to specify     -->
        <!-- the web server that hosts the HTML file. -->
        <SourceLocation DefaultValue="https://localhost:3000/index.html" />
      </TabletSettings>
    </Form>
  </FormSettings>

  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or"> 
    <Rule xsi:type="RuleCollection" Mode="And">
      <Rule xsi:type="RuleCollection" Mode="Or">
        <Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Read" />
        <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
      </Rule>
      <Rule xsi:type="ItemHasRegularExpressionMatch" 
        PropertyName="BodyAsPlaintext" RegExName="VideoURL" 
        RegExValue="https://localhost:3000/resource.html" />
    </Rule>
    <Rule xsi:type="RuleCollection" Mode="Or">
      <Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Edit" />
      <Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit" /> 
    </Rule> 
  </Rule>
</OfficeApp>