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 reading and composing mail. For compose it is by default showing as desired but for reading it is showing horizontally which I want to show vertically. In short I like to show my add-in exactly same as Evernote add-in is showing.

Your help will be much appreciated. Following screen-shot of Evernote in OWA is what I want to show including icon location (enclosed in red).

Thanks in advance.

I'm trying to implement same kind of thing. Are you able to achieve it ? — Muhammad Umar
@alekkowalczyk It is happening now as mentioned by AnOberoi below. — Premchandra Singh
@MuhammadUmar It is happening now as mentioned by AnOberoi below. — Premchandra Singh
@PremchandraSingh can you please provide any link where you have seen this ?\ — Muhammad Umar

Kamlesh Samrit Kamlesh Samrit · Accepted Answer · 2017-04-19T08:15:00

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>

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

2 Answers