Edit

Add support for add-in commands in Outlook on mobile devices

  • Article

Using add-in commands in Outlook on mobile devices allows your users to access the same functionality (with some limitations) that they already have in Outlook on the web, on Windows (classic and new (preview)), and on Mac. Adding support for Outlook mobile requires updating the add-in manifest and possibly changing your code for mobile scenarios.

Update the manifest

Note

Add-ins using the Unified manifest for Microsoft 365 (preview) aren't currently supported on mobile devices.

The first step to enabling add-in commands in Outlook mobile is to define them in the add-in manifest. The VersionOverrides v1.1 schema defines a new form factor for mobile, MobileFormFactor.

This element contains all of the information for loading the add-in in mobile clients. This enables you to define completely different UI elements and JavaScript files for the mobile experience.

The following example shows a single task pane button in a <MobileFormFactor> element.

<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
  ...
  <MobileFormFactor>
    <FunctionFile resid="residUILessFunctionFileUrl" />
    <ExtensionPoint xsi:type="MobileMessageReadCommandSurface">
      <Group id="mobileMsgRead">
        <Label resid="groupLabel" />
        <Control xsi:type="MobileButton" id="TaskPaneBtn">
          <Label resid="residTaskPaneButtonName" />
          <Icon xsi:type="bt:MobileIconList">
            <bt:Image size="25" scale="1" resid="tp0icon" />
            <bt:Image size="25" scale="2" resid="tp0icon" />
            <bt:Image size="25" scale="3" resid="tp0icon" />

            <bt:Image size="32" scale="1" resid="tp0icon" />
            <bt:Image size="32" scale="2" resid="tp0icon" />
            <bt:Image size="32" scale="3" resid="tp0icon" />

            <bt:Image size="48" scale="1" resid="tp0icon" />
            <bt:Image size="48" scale="2" resid="tp0icon" />
            <bt:Image size="48" scale="3" resid="tp0icon" />
          </Icon>
          <Action xsi:type="ShowTaskpane">
            <SourceLocation resid="residTaskpaneUrl" />
          </Action>
        </Control>
      </Group>
    </ExtensionPoint>
  </MobileFormFactor>
  ...
</VersionOverrides>

This is very similar to the elements that appear in a DesktopFormFactor element, with some notable differences.

Code considerations

Designing an add-in for mobile introduces some additional considerations.

Use REST instead of Exchange Web Services

The Office.context.mailbox.makeEwsRequestAsync method isn't supported in Outlook mobile. Add-ins should prefer to get information from the Office.js API when possible. If add-ins require information not exposed by the Office.js API, then they should use the Outlook REST APIs to access the user's mailbox.

Mailbox requirement set 1.5 introduced a new version of Office.context.mailbox.getCallbackTokenAsync that can request an access token compatible with the REST APIs, and a new Office.context.mailbox.restUrl property that can be used to find the REST API endpoint for the user.

Pinch zoom

By default users can use the "pinch zoom" gesture to zoom in on task panes. If this doesn't make sense for your scenario, be sure to disable pinch zoom in your HTML.

Close task panes

In Outlook mobile, task panes take up the entire screen and by default require the user to close them to return to the message. Consider using the Office.context.ui.closeContainer method to close the task pane when your scenario is complete.

Compose mode and appointments

Currently, add-ins in Outlook mobile only support activation when reading messages. Add-ins aren't activated when composing messages or when viewing or composing appointments. However, there are some exceptions.

  1. Online meeting provider integrated add-ins activate in Appointment Organizer mode. For more information about this exception (including available APIs), see Create an Outlook mobile add-in for an online-meeting provider.
  2. Add-ins that log appointment notes and other details to customer relationship management (CRM) or note-taking services activate in Appointment Attendee mode. For more information about this exception (including available APIs), see Log appointment notes to an external application in Outlook mobile add-ins.
  3. Event-based add-ins activate when the OnNewMessageCompose event occurs. For more information about this exception (including additional supported APIs), see Implement event-based activation in Outlook mobile add-ins.

Supported APIs

Although Outlook mobile supports up to Mailbox requirement set 1.5, you can now implement additional APIs from later requirement sets to further extend the capability of your add-in on Outlook mobile. For guidance on which APIs you can implement in your mobile add-in, see Outlook JavaScript APIs supported in Outlook on mobile devices.

See also