Étendre une application de réunion Teams à Outlook

Article
06/14/2024

Dans l’écosystème Microsoft 365, la plupart des utilisateurs mensuels planifient leurs réunions Microsoft Teams à partir d’Outlook. Pour aider les utilisateurs à rester dans le flux de leur travail, les applications de réunion Teams sont désormais prises en charge sur Outlook. Vous pouvez configurer et ajouter des applications de réunion aux réunions Teams planifiées à partir d’Outlook, ainsi que des applications de réunion dans le calendrier Outlook.

Les applications de réunion sont essentiellement des applications d’onglet Teams conçues pour favoriser la collaboration avant, pendant et après les réunions. Vous pouvez spécifier les contextes pris en charge par votre application de réunion à partir du manifeste de l’application (précédemment appelé manifeste d’application Teams) via la propriété configurableTabs.context .

Remarque

En plus de configurableTabs, votre application de réunion doit contenir au moins une fonctionnalité d’application dans l’étendue personnelle (par exemple, staticTabs), pour qu’elle soit disponible dans Outlook.

Le tableau suivant présente les contextes d’application de réunion Teams pris en charge dans Outlook :

Contexte de réunion Teams	Valeur du manifeste d’application	Valeur TeamsJS	Prise en charge d’Outlook
Vue détails de la réunion	`meetingDetailsTab`	`frameContext.content`	✔️
Affichage de conversation de réunion	`meetingChatTab`	`frameContext.content`	✔️
Affichage du panneau latéral de la réunion	`meetingSidePanel`	`frameContext.sidePanel`	✔️
Vue de la phase de réunion	`meetingStage`	`frameContext.meetingStage`	❌

Si votre application de réunion prend en charge Stageview, d’autres effets de réunion ou contient des fonctionnalités telles que des extensions de message et des bots, ceux-ci continuent de fonctionner dans Teams lorsque la réunion est planifiée à partir d’Outlook, mais n’apparaît pas ou ne s’exécute pas dans Outlook.

Configuration requise

Pour afficher un aperçu de votre application de réunion Teams dans Outlook, vérifiez les points suivants :

Un locataire de bac à sable développeur Microsoft 365 avec chargement activé.
Un environnement de test avec le bureau Outlook pour Windows installé à partir du canal actuel de Microsoft 365 Apps.
NodeJS (avec npm) installé.
Bibliothèque TeamsFx CLI v2 installée à partir de npm.
Visual Studio Code installé dans votre environnement de développement.
Extension teams Toolkit pour Visual Studio Code.

Pour afficher un aperçu de votre application de réunion Teams dans Outlook, vous pouvez créer une nouvelle application de réunion avec teams Toolkit ou étendre une application de réunion Teams existante dans Outlook.

Créer une application de réunion Teams pour Outlook
Étendre une application de réunion Teams existante à Outlook

Vous pouvez créer une application de réunion Teams pour Outlook via l’extension Teams Toolkit pour Visual Studio Code. Pour créer une application de réunion Teams à afficher un aperçu dans Outlook :

Accédez à Teams et connectez-vous à l’aide de votre compte de locataire de bac à sable.
Sélectionnez Calendrier>Nouvelle réunion et planifiez une réunion.
Ouvrez l’extension Teams Toolkit dans Visual Studio Code et sélectionnez Afficher les exemples.
Sélectionnez My First Meeting App>Create et spécifiez le dossier pour créer l’espace de travail.
Appuyez sur la touche F5 pour déboguer et exécuter l’exemple localement dans Teams. Teams vous invite à installer l’application.
Sélectionnez Ajouter à une réunion dans la liste déroulante, puis sélectionnez la réunion que vous avez planifiée précédemment.
Sélectionnez l’exemple de configuration de l’onglet, puis sélectionnez Enregistrer. L’application est disponible dans la vue de conversation de réunion.

Pour étendre votre application de réunion Teams existante dans Outlook, vérifiez les points suivants :

Mettez à jour le manifeste de votre application.
Utilisez la bibliothèque de client JavaScript Microsoft Teams (TeamsJS) v2.5.0 ou ultérieure.
Configurez les en-têtes de stratégie de sécurité du contenu.
Mettez à jour l’inscription de l’application Microsoft Entra pour l’authentification unique (SSO).
Chargez votre application mise à jour dans le Centre d’administration Teams.

Si vous disposez d’une application de réunion existante, effectuez une copie ou une branche de votre projet de production et mettez à jour votre application id dans le manifeste de l’application pour utiliser un nouvel identificateur différent de l’ID d’application de production à des fins de test.

Mettre à jour le manifeste de l’application

Mettez à jour la version du schéma du manifeste de l’application (précédemment appelée manifeste d’application Teams) vers la version 1.13 ou ultérieure.

Ouvrez le manifeste de votre application Teams et mettez à jour les $schema propriétés et manifestVersion comme suit :

{
    "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
    "manifestVersion" : "1.16"
}

Utiliser TeamsJS version 2.5.0 ou ultérieure

Utilisez la bibliothèque de client TeamsJS version 2.5.0 ou ultérieure pour étendre l’exécution de votre application de réunion Teams dans Outlook. Si votre application utilise TeamsJS v2.5.0 ou version ultérieure, il n’est pas nécessaire de modifier le code de l’application pour s’exécuter dans Outlook.

Si vous devez mettre à niveau votre package npm TeamsJS de la version 1.x.x vers la dernière version de TeamsJS v2.x.x, vous pouvez utiliser Teams Toolkit pour identifier et automatiser les modifications de code requises. Pour plus d’informations, consultez Bibliothèque TeamsJS.

Suivez ces étapes pour mettre à jour votre TeamsJS vers la dernière version à l’aide de Teams Toolkit :

Ouvrez votre application dans Visual Studio Code et sélectionnez l’extension Teams Toolkit .
Sous Affichage, sélectionnez Palette de commandes... ou Ctrl+Maj+P.
Exécutez la commande Teams: Upgrade Teams JS SDK and code references.

Vos références @microsoft/teams-js@2.x.x de fichier package.json et vos *.js/.ts fichiers et *.jsx/.tsx sont mis à jour avec :

Instructions d’importation pour teams-js@2.x.x.
Appels de fonction, d’énumération et d’interface pour teams-js@2.x.x.
Les rappels de nouveau "TODO" commentaire signalent les zones susceptibles d’être affectées par les modifications apportées à l’interface de contexte .
Rappels de nouveau "TODO" commentaire pour convertir les fonctions de rappel en promesses.

Remarque

La mise à niveau vers la dernière version de TeamsJS via Teams Toolkit ne met pas à jour le code dans les fichiers html. Vous devez mettre à jour les fichiers html manuellement.

Configurer les en-têtes CSP pour Outlook

Les applications d’onglet Teams sont hébergées dans des éléments iframe dans Outlook, comme dans Teams. Si votre application utilise des en-têtes de stratégie de sécurité du contenu (CSP), ajoutez outlook.office.com en tant qu’ancêtre frame.

Mettre à jour l’inscription de l’application Microsoft Entra pour l’authentification unique

L’authentification unique Microsoft Entra pour les applications de réunion fonctionne de la même façon dans Outlook que dans Teams. Toutefois, vous devez ajouter manuellement l’ID d’application Outlook à votre inscription d’application Microsoft Entra.

Connectez-vous au portail Azure avec votre compte de locataire de test.
Ouvrez inscriptions d'applications.
Sélectionnez votre application.
Sélectionnez Gérer>Exposer une API.
Dans la section Applications clientes autorisées , ajoutez la valeur suivante Client Id :

Application client Microsoft 365 ID du client

Version de bureau d’Outlook d3590ed6-52b3-4102-aeff-aad2292ab01c

Pour plus d’informations sur les ID d’application clientes utilisés pour étendre les applications Teams dans Microsoft 365, voir Onglets Teams dans Microsoft 365 et Outlook.

Application client Microsoft 365	ID du client
Version de bureau d’Outlook	d3590ed6-52b3-4102-aeff-aad2292ab01c

Vous pouvez charger votre application personnalisée dans le Centre d’administration Teams et afficher un aperçu de votre application de réunion dans Outlook.

Charger votre application personnalisée dans le Centre d’administration Teams

Pour tester votre application dans Microsoft 365 et Outlook, chargez votre package d’application dans le Centre d’administration Teams.

Empaquetez votre manifeste d’application Teams et les icônes d’application dans un fichier zip. Pour créer un package d’application via teams Toolkit, consultez Générer un package d’application.
Accédez au Centre d’administration Teams et sélectionnez Applications> TeamsGérer les applications.
Sélectionnez Charger une nouvelle application, puis sélectionnez votre package d’application.

Une fois votre application de réunion chargée dans le Centre d’administration Teams, elle est disponible dans Teams et Outlook. Pour que votre application s’affiche dans le menu Applications , attendez quelques minutes et redémarrez Outlook pour Windows.

Afficher un aperçu de votre application de réunion dans Outlook

Pour afficher un aperçu de votre application de réunion dans Outlook pour Windows, vérifiez que l’application s’exécute localement et suivez les étapes suivantes :

Ouvrez Outlook pour Windows connecté avec votre compte de locataire de test. Si Outlook est déjà en cours d’exécution, fermez-le et redémarrez-le à nouveau.
Ouvrez Calendrier>Nouvelle réunion. Pour qu’une application de réunion s’exécute dans Outlook, assurez-vous que la réunion est une réunion Teams , car les autres réunions planifiées à partir d’Outlook ne sont pas prises en charge.
Dans la fenêtre de planification des réunions, sélectionnez Toutes les applications. Votre application de réunion chargée apparaît parmi vos applications de réunion installées.
Sélectionnez votre application de réunion. Une boîte de dialogue de configuration s’affiche, dans laquelle l’utilisateur configure tous les paramètres d’application pertinents pour sa réunion spécifique.
Sélectionnez Ajouter. Votre application de réunion s’affiche dans la section Applications et dans le panneau latéral de la fenêtre de planification.

Pour supprimer ou configurer votre application dans la fenêtre de planification, sélectionnez le menu déroulant de votre application, puis sélectionnez les éléments suivants :

À propos de : Comment l’application s’affiche dans le Microsoft Teams Store.
Paramètres : Mettez à jour la configuration de l’application pour la réunion spécifique.
Supprimer : supprimez l’application de la réunion.

Application de réunion en cours d’exécution dans le panneau latéral du planificateur de réunions Outlook

Exemple de code

Exemple de nom	Description	Node.js
Application en réunion HelloWorld	Application de réunion simple montrant l’affichage des détails de la réunion, l’affichage de conversation et le panneau latéral. Fonctionne dans Teams et Outlook.	View

Voir aussi

Assistance et commentaires

Partager via