In an Outlook addin, how to check whether we are in compose mode or read mode?

Question

I'm creating an outlook add-in and use the OfficeJS API in React app. In there I want to load a specific set of features for the compose mode and another set of features for the read mode. So my question is, how to see in which mode I'm currently on?

Answer 1

In the manifest.xml file you should have different ExtensionPoint for compose and read view as follow ...

<ExtensionPoint xsi:type="MessageReadCommandSurface">
</ExtensionPoint>
<ExtensionPoint xsi:type="MessageComposeCommandSurface">
</ExtensionPoint>

Each of this sections have to have Action tag with ExecuteFunction or ShowTaskpane type. If you have ExecuteFunction type you just specify different function names for read and compose surface as follow ...

<ExtensionPoint xsi:type="MessageReadCommandSurface">
<Action xsi:type="ExecuteFunction">
    <FunctionName>FunctionSpecificToReadView</FunctionName>
</Action>
</ExtensionPoint>
<ExtensionPoint xsi:type="MessageComposeCommandSurface">
<Action xsi:type="ExecuteFunction">
    <FunctionName>FunctionSpecificToComposeView</FunctionName>
</Action>
</ExtensionPoint>

If you have ShowTaskpane type you would use different file names to load inside the frame or add some parameter if you use the same file as follow ...

<ExtensionPoint xsi:type="MessageReadCommandSurface">
<Action xsi:type="ShowTaskpane">
    <SourceLocation resid="readTaskPaneUrl" />
</Action>
</ExtensionPoint>
<ExtensionPoint xsi:type="MessageComposeCommandSurface">
<Action xsi:type="ShowTaskpane">
    <SourceLocation resid="composeTaskPaneUrl" />
</Action>
</ExtensionPoint>
...
<Resources>
<bt:Urls>
    <bt:Url id="readTaskPaneUrl" DefaultValue="https://localhost:44300/read.html"/>
    <bt:Url id="composeTaskPaneUrl" DefaultValue="https://localhost:44300/compose.html"/>
</bt:Urls>
</Resources>

Inside each HTML page you know what surface your add-in has been invoked.

Answer 2

I usually check for APIs to know the mode, if you don't want to create two separate landing pages for read and compose modes.

You can check for displayReplyForm API, this is a read mode API, so if this is undefined then you are in compose mode.

if (Office.context.mailbox.item.displayReplyForm != undefined) {
  // read mode
} else {
  // compose mode
}