Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Outlook] (mobile) Clarify MobileFormFactor code snippet #5014

Merged
merged 1 commit into from
Jan 31, 2025
Merged

[Outlook] (mobile) Clarify MobileFormFactor code snippet #5014

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 45 additions & 42 deletions docs/outlook/add-mobile-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: Add support for add-in commands in Outlook on mobile devices
description: Learn how to add support for Outlook on mobile devices including how to update the add-in manifest and change your code for mobile scenarios, if necessary.
ms.date: 10/17/2024
ms.date: 01/31/2025
ms.localizationpriority: medium
---

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

Using add-in commands in Outlook on mobile devices allows your users to access the same functionality (with some [limitations](#code-considerations)) that they already have in Outlook on the web, on Windows ([new](https://support.microsoft.com/office/656bb8d9-5a60-49b2-a98b-ba7822bc7627) and classic), and on Mac. Adding support for Outlook mobile requires updating the add-in manifest and possibly changing your code for mobile scenarios.
Implement add-in commands in Outlook on mobile devices to access the same functionality (with some [limitations](#code-considerations)) that you already have in Outlook on the web, on Windows ([new](https://support.microsoft.com/office/656bb8d9-5a60-49b2-a98b-ba7822bc7627) and classic), 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

Expand Down Expand Up @@ -127,54 +127,57 @@ The first step to enabling add-in commands in Outlook mobile is to define them i

# [Add-in only manifest](#tab/xmlmanifest)

The [VersionOverrides](/javascript/api/manifest/versionoverrides) v1.1 schema defines a new form factor for mobile, [MobileFormFactor](/javascript/api/manifest/mobileformfactor).
The [VersionOverrides](/javascript/api/manifest/versionoverrides) v1.1 schema defines a new form factor for mobile, [MobileFormFactor](/javascript/api/manifest/mobileformfactor). The **\<MobileFormFactor\>** element contains all of the information for loading the add-in in mobile clients. This way, you can define completely different UI elements and JavaScript files for the mobile experience.

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.

```xml
<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](/javascript/api/manifest/desktopformfactor) element, with some notable differences.
The following example shows a single task pane button in a **\<MobileFormFactor\>** element. This is very similar to the elements that appear in a [DesktopFormFactor](/javascript/api/manifest/desktopformfactor) element, with some notable differences.

- The [OfficeTab](/javascript/api/manifest/officetab) element isn't used.
- The [ExtensionPoint](/javascript/api/manifest/extensionpoint) element must have only one child element. If your add-in implements the [MobileOnlineMeetingCommandSurface](/javascript/api/manifest/extensionpoint#mobileonlinemeetingcommandsurface) or [MobileLogEventAppointmentAttendee](/javascript/api/manifest/extensionpoint#mobilelogeventappointmentattendee) extension point, you must include a [Control](/javascript/api/manifest/control) child element. If your add-in implements the [MobileMessageReadCommandSurface](/javascript/api/manifest/extensionpoint#mobilemessagereadcommandsurface) extension point, you must include a [Group](/javascript/api/manifest/group) child element that contains multiple **\<Control\>** elements.
- There is no `Menu` type equivalent for the **\<Control\>** element.
- The [Supertip](/javascript/api/manifest/supertip) element isn't used.
- The required icon sizes are different. Mobile add-ins minimally must support 25x25, 32x32 and 48x48 pixel icons. For more information, see [Additional requirements for mobile form factors](/javascript/api/manifest/icon#additional-requirements-for-mobile-form-factors).

```xml
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
...
<Hosts>
<Host xsi:type="MailHost">
...
<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="icon_25" />
<bt:Image size="25" scale="2" resid="icon_25" />
<bt:Image size="25" scale="3" resid="icon_25" />

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

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

---

## Code considerations
Expand Down