Skip to content

Commit b02a72a

Browse files
samantharamonsamantharamon
authored
[Outlook] (mobile) Clarify MobileFormFactor code snippet (#5014)
1 parent 9ddc599 commit b02a72a

File tree

1 file changed

+45
-42
lines changed

1 file changed

+45
-42
lines changed

‎docs/outlook/add-mobile-support.md

+45-42
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
title: Add support for add-in commands in Outlook on mobile devices
33
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.
4-
ms.date: 10/17/2024
4+
ms.date: 01/31/2025
55
ms.localizationpriority: medium
66
---
77

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

10-
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.
10+
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.
1111

1212
## Update the manifest
1313

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

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

130-
The [VersionOverrides](/javascript/api/manifest/versionoverrides) v1.1 schema defines a new form factor for mobile, [MobileFormFactor](/javascript/api/manifest/mobileformfactor).
130+
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.
131131

132-
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.
133-
134-
The following example shows a single task pane button in a **\<MobileFormFactor\>** element.
135-
136-
```xml
137-
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
138-
...
139-
<MobileFormFactor>
140-
<FunctionFile resid="residUILessFunctionFileUrl" />
141-
<ExtensionPoint xsi:type="MobileMessageReadCommandSurface">
142-
<Group id="mobileMsgRead">
143-
<Label resid="groupLabel" />
144-
<Control xsi:type="MobileButton" id="TaskPaneBtn">
145-
<Label resid="residTaskPaneButtonName" />
146-
<Icon xsi:type="bt:MobileIconList">
147-
<bt:Image size="25" scale="1" resid="tp0icon" />
148-
<bt:Image size="25" scale="2" resid="tp0icon" />
149-
<bt:Image size="25" scale="3" resid="tp0icon" />
150-
151-
<bt:Image size="32" scale="1" resid="tp0icon" />
152-
<bt:Image size="32" scale="2" resid="tp0icon" />
153-
<bt:Image size="32" scale="3" resid="tp0icon" />
154-
155-
<bt:Image size="48" scale="1" resid="tp0icon" />
156-
<bt:Image size="48" scale="2" resid="tp0icon" />
157-
<bt:Image size="48" scale="3" resid="tp0icon" />
158-
</Icon>
159-
<Action xsi:type="ShowTaskpane">
160-
<SourceLocation resid="residTaskpaneUrl" />
161-
</Action>
162-
</Control>
163-
</Group>
164-
</ExtensionPoint>
165-
</MobileFormFactor>
166-
...
167-
</VersionOverrides>
168-
```
169-
170-
This is very similar to the elements that appear in a [DesktopFormFactor](/javascript/api/manifest/desktopformfactor) element, with some notable differences.
132+
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.
171133

172134
- The [OfficeTab](/javascript/api/manifest/officetab) element isn't used.
173135
- 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.
174136
- There is no `Menu` type equivalent for the **\<Control\>** element.
175137
- The [Supertip](/javascript/api/manifest/supertip) element isn't used.
176138
- 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).
177139

140+
```xml
141+
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
142+
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
143+
...
144+
<Hosts>
145+
<Host xsi:type="MailHost">
146+
...
147+
<MobileFormFactor>
148+
<FunctionFile resid="residUILessFunctionFileUrl" />
149+
<ExtensionPoint xsi:type="MobileMessageReadCommandSurface">
150+
<Group id="mobileMsgRead">
151+
<Label resid="groupLabel" />
152+
<Control xsi:type="MobileButton" id="TaskPaneBtn">
153+
<Label resid="residTaskPaneButtonName" />
154+
<Icon xsi:type="bt:MobileIconList">
155+
<bt:Image size="25" scale="1" resid="icon_25" />
156+
<bt:Image size="25" scale="2" resid="icon_25" />
157+
<bt:Image size="25" scale="3" resid="icon_25" />
158+
159+
<bt:Image size="32" scale="1" resid="icon_32" />
160+
<bt:Image size="32" scale="2" resid="icon_32" />
161+
<bt:Image size="32" scale="3" resid="icon_32" />
162+
163+
<bt:Image size="48" scale="1" resid="icon_48" />
164+
<bt:Image size="48" scale="2" resid="icon_48" />
165+
<bt:Image size="48" scale="3" resid="icon_48" />
166+
</Icon>
167+
<Action xsi:type="ShowTaskpane">
168+
<SourceLocation resid="residTaskpaneUrl" />
169+
</Action>
170+
</Control>
171+
</Group>
172+
</ExtensionPoint>
173+
</MobileFormFactor>
174+
</Host>
175+
</Hosts>
176+
...
177+
</VersionOverrides>
178+
</VersionOverrides>
179+
```
180+
178181
---
179182

180183
## Code considerations

0 commit comments

Comments
 (0)