Ajout de la prise en charge des commandes de complément dans Outlook sur les appareils mobiles

Article
09/25/2024

L’utilisation des commandes de complément dans Outlook sur les appareils mobiles permet à vos utilisateurs d’accéder aux mêmes fonctionnalités (avec certaines limitations) que celles qu’ils ont déjà dans Outlook sur le web, sur Windows (nouveau et classique) et sur Mac. L’ajout de la prise en charge d’Outlook Mobile nécessite la mise à jour du manifeste du complément et éventuellement la modification de votre code pour les scénarios mobiles.

Mise à jour du manifeste

La première étape pour activer les commandes de complément dans Outlook Mobile consiste à les définir dans le manifeste du complément.

Manifeste unifié pour Microsoft 365
Manifeste de complément uniquement

Dans le tableau « extensions.ribbons.requirements.formFactors », ajoutez « mobile » comme élément. Lorsque vous avez terminé, le tableau doit ressembler à ce qui suit.
```
"formFactors": [
    "mobile",
    
]
```
Si votre complément utilise le mode Appointment Attendee, tel qu’un complément qui intègre un fournisseur d’une application de prise de notes ou de gestion de la relation client (CRM), ajoutez « logEventMeetingDetailsAttendee » au tableau « extensions.ribbons.contexts ». Voici un exemple.
```
"contexts": [
    "meetingDetailsAttendee",
    "logEventMeetingDetailsAttendee"
],
```
Si votre complément utilise un fournisseur de réunions en ligne intégré, ajoutez « onlineMeetingDetailsOrganizer » au tableau « extensions.ribbons.contexts ». Voici un exemple.
```
"contexts": [
    "meetingDetailsOrganizer",
    "onlineMeetingDetailsOrganizer"
],
```

Dans le tableau « extensions.ribbons.tabs », recherchez l’onglet avec « builtInTabId » de « TabDefault ». Ajoutez-y un tableau enfant « customMobileRibbonGroups » (en tant qu’homologue de la propriété « groups » existante). Dans ce tableau, créez un objet et procédez comme suit :

Définissez les valeurs « id » et « label » appropriées.
Créez un objet dans le tableau « controls » pour représenter un bouton et configurez-le comme suit.
- Définissez les valeurs « id » et « label » appropriées. Pour vous assurer que le bouton s’intègre correctement dans le ruban, nous vous recommandons de limiter l'« étiquette » à 16 caractères.
- Définissez « type » sur « mobileButton ».
- Affectez une fonction à la propriété « actionId ». Cela doit correspondre à l'« id » de l’objet dans le tableau « extensions.runtimes.actions ».
- Vérifiez que vous disposez des neuf icônes requises.

Voici un exemple.

"tabs": [
    {
        "builtInTabId": "TabDefault",
        "groups": [
            <-- non-mobile group objects omitted -->
        ],
        "customMobileRibbonGroups": [
            {
                "id": "mobileApptComposeGroup",
                "label": "Contoso Meeting",
                "controls": [
                    { 
                        "id": "mobileInsertMeetingButton",
                        "label": "Add meeting",
                        "type": "mobileButton",
                        "actionId": "insertContosoMeeting",
                        "icons": [
                            {
                                "scale": 1,
                                "size": 25,
                                "url": "https://contoso.com/assets/icon-25.png"
                            },
                            {
                                "scale": 1,
                                "size": 32,
                                "url": "https://contoso.com/assets/icon-32.png"
                            },
                            {
                                "scale": 1,
                                "size": 48,
                                "url": "https://contoso.com/assets/icon-48.png"
                            },                                
                            {
                                "scale": 2,
                                "size": 25,
                                "url": "https://contoso.com/assets/icon-25.png"
                            },
                            {
                                "scale": 2,
                                "size": 32,
                                "url": "https://contoso.com/assets/icon-32.png"
                            },
                            {
                                "scale": 2,
                                "size": 48,
                                "url": "https://contoso.com/assets/icon-48.png"
                            },                                
                            {
                                "scale": 3,
                                "size": 25,
                                "url": "https://contoso.com/assets/icon-25.png"
                            },
                            {
                                "scale": 3,
                                "size": 32,
                                "url": "https://contoso.com/assets/icon-32.png"
                            },
                            {
                                "scale": 3,
                                "size": 48,
                                "url": "https://contoso.com/assets/icon-48.png"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Le schéma VersionOverrides v1.1 définit un nouveau facteur de forme pour les versions mobiles, MobileFormFactor.

Cet élément contient toutes les informations pour charger le complément dans des clients mobiles. Cela vous permet de définir entièrement différents éléments de l’interface utilisateur et fichiers JavaScript pour l’expérience mobile.

L’exemple suivant montre un seul bouton de volet Office dans un <élément MobileFormFactor> .

<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>

Cet exemple est semblable aux éléments qui apparaissent dans un élément DesktopFormFactor, avec toutefois quelques différences importantes.

L’élément OfficeTab n’est pas utilisé.
L’élément ExtensionPoint doit avoir un seul élément enfant. Si votre complément implémente le point d’extension MobileOnlineMeetingCommandSurface ou MobileLogEventAppointmentAttendee , vous devez inclure un élément enfant Control . Si votre complément implémente le point d’extension MobileMessageReadCommandSurface , vous devez inclure un élément enfant Group qui contient plusieurs <éléments Control> .
Il n’existe aucun Menu équivalent de type pour l’élément <Control> .
L’élément Supertip n’est pas utilisé.
Les tailles d’icône requises sont différentes. Au minimum, les compléments mobiles doivent prendre en charge les icônes 25 x 25, 32 x 32 et 48 x 48 pixels. Pour plus d’informations, consultez Exigences supplémentaires pour les facteurs de forme mobiles.

Éléments à prendre en compte pour le code

La conception d’un complément pour mobile implique certaines considérations supplémentaires.

Utiliser REST plutôt que les services web Exchange

La méthode Office.context.mailbox.makeEwsRequestAsync n’est pas prise en charge dans Outlook Mobile. Les compléments doivent privilégier l’obtention d’informations auprès de l’API Office.js lorsque cela est possible. Si les compléments requièrent des informations non exposées par l’API Office.js, ils doivent utiliser les API REST Outlook pour accéder à la boîte aux lettres de l’utilisateur.

L’ensemble de conditions requises de boîte aux lettres 1.5 a introduit une nouvelle version d’Office.context.mailbox.getCallbackTokenAsync qui peut demander un jeton d’accès compatible avec les API REST, ainsi qu’une nouvelle propriété Office.context.mailbox.restUrl qui peut être utilisée pour rechercher le point de terminaison de l’API REST pour l’utilisateur.

Pincer pour zoomer

Par défaut, les utilisateurs peuvent utiliser le mouvement « pincer le zoom » pour effectuer un zoom avant sur les volets office. Si cela n’a pas de sens pour votre scénario, veillez à désactiver le zoom pincé dans votre code HTML.

Fermeture des volets Office

Dans Outlook Mobile, les volets Office occupent l’écran entier et, par défaut, l’utilisateur doit les fermer pour revenir au message. Envisagez d’utiliser la méthode Office.context.ui.closeContainer pour fermer le volet Office une fois votre scénario terminé.

Mode composition et rendez-vous

Actuellement, les compléments dans Outlook Mobile prennent uniquement en charge l’activation lors de la lecture des messages. Les compléments ne sont pas activés lors de la composition de messages ou lors de l’affichage ou de la composition de rendez-vous. Il existe toutefois quelques exceptions.

Les compléments intégrés du fournisseur de réunion en ligne s’activent en mode Organisateur de rendez-vous. Pour plus d’informations sur cette exception (y compris les API disponibles), voir Créer un complément mobile Outlook pour un fournisseur de réunion en ligne.
Les compléments qui journalisent les notes de rendez-vous et d’autres détails pour la gestion de la relation client (CRM) ou les services de prise de notes s’activent en mode Participant aux rendez-vous. Pour plus d’informations sur cette exception (y compris les API disponibles), voir Journaliser les notes de rendez-vous dans une application externe dans les compléments mobiles Outlook.
Les compléments basés sur les événements s’activent lorsque l’événement OnNewMessageCompose se produit. Pour plus d’informations sur cette exception (y compris les API supplémentaires prises en charge), voir Implémenter l’activation basée sur les événements dans les compléments mobiles Outlook.

API prises en charge

Bien qu’Outlook Mobile prenne en charge jusqu’à l’ensemble de conditions requises de boîte aux lettres 1.5, vous pouvez désormais implémenter des API supplémentaires à partir d’ensembles de conditions requises ultérieurs pour étendre davantage la fonctionnalité de votre complément sur Outlook Mobile. Pour obtenir des conseils sur les API que vous pouvez implémenter dans votre complément mobile, consultez API JavaScript Outlook prises en charge dans Outlook sur les appareils mobiles.

Partager via