Ajouter un complément Outlook à une application Teams

Article
11/08/2024

Conseil

Cet article vous aide à comprendre comment créer une application Teams combinée et un complément Office en commençant par une application Teams et un complément Outlook nouvellement créés. Pour obtenir une vue d’ensemble du processus général de fusion des applications Teams et des compléments Office, y compris les applications Et compléments Teams existants qui sont déjà utilisés, voir Conseils généraux pour combiner un complément Outlook et une application Teams.

Introduction

Les compléments Outlook sont des applications web qui étendent les fonctionnalités d’Outlook. Avec un complément Outlook, vous pouvez :

Lisez et écrivez des messages électroniques et participez aux invitations, réponses, annulations et rendez-vous aux réunions.
Lit les propriétés de la boîte aux lettres de l’utilisateur.
Répondre automatiquement aux événements, tels que l’envoi d’un e-mail.
Intégrez à des services externes, y compris des outils crm et de gestion de projet.
Ajoutez des boutons de ruban personnalisés ou des éléments de menu pour effectuer des tâches spécifiques.

L’intégration d’un complément Outlook à une application Teams permet des scénarios qu’aucun d’entre eux n’a pu réaliser indépendamment. Imaginez un scénario où un vendeur peut insérer une remise personnalisée dans un e-mail à un client et enregistrer l’offre dans une base de données back-end. Le responsable des ventes peut également afficher des données sur toutes les remises qui ont été proposées dans un onglet Teams. Pour plus d’informations, consultez Exemple d’offres de remise.

Vue d’ensemble des compléments Outlook fournit des informations sur les fonctionnalités des compléments Outlook, la façon dont ils sont structurés, comment ils améliorent les anciennes méthodes d’extension d’Outlook, les plateformes sur lesquelles le complément peut s’exécuter (Windows, Mac, mobile et web) et comment commencer à en créer un.

Cet article vous guide tout au long des étapes permettant d’ajouter un complément Outlook à une application Teams, de le tester, puis de le déployer sur Azure.

Configuration requise

Avant de commencer, vérifiez que vous remplissez les conditions suivantes :

Un compte Microsoft 365 qui inclut Teams pour tester l’application. Vous pouvez également avoir des abonnements distincts à Microsoft 365 et à Teams. Par exemple, un compte de test avec *.onmicrosoft.com par le biais du Programme pour les développeurs Microsoft 365.
Votre compte Microsoft 365 est ajouté en tant que compte dans outlook de bureau. Pour plus d’informations, voir Ajouter un compte de messagerie à Outlook.
Un compte Azure avec un abonnement actif pour déployer l’application Teams sur Azure. Si vous n’en avez pas, vous pouvez créer votre compte Azure gratuit.
Une application Teams créée à l’aide de la dernière version de Teams Toolkit.

Ajouter un complément Outlook à une application Teams

Pour ajouter un complément Outlook à une application Teams :

Préparez le projet d’application Teams.
Créez un projet de complément Office qui est initialement distinct de votre projet d’application Teams.
Fusionnez le manifeste du projet de complément Outlook dans le manifeste unifié pour Microsoft 365.
Copiez les fichiers de complément Outlook dans le projet d’application Teams.
Modifiez les fichiers de configuration des outils.
Exécuter l’application et le complément localement en même temps
Déplacez l’application vers Azure.

Préparer le projet d’application Teams

Commencez par séparer le code source de l’onglet (ou du bot) dans son propre sous-dossier. Ces instructions supposent que le projet a initialement la structure suivante. Pour créer un projet d’application Teams avec cette structure, utilisez la dernière version du Kit de ressources Teams.

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- node_modules/
|-- src/
|-- .gitignore
|-- .localConfigs
|-- .webappignore
|-- package-lock.json
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml
|-- tsconfig.json
|-- web.config

Remarque

Si vous utilisez un nouveau projet d’onglet Teams, le dossier node_modules et le fichier package-lock.json ne sont pas présents. Le node_modules est créé à une étape ultérieure lorsque vous exécutez npm install à la racine du projet. Le dossier de build n’est pas présent tant que et tant que vous n’exécutez pas un script de build sur le projet.

Pour séparer le code source de l’onglet ou du bot, procédez comme suit :

Créez un dossier sous l’onglet racine nommé (ou bot).

Remarque

Par souci de simplicité, le reste de cet article suppose que l’application Teams existante est un onglet. Si vous avez commencé avec un bot, remplacez « tab » par « bot » dans toutes ces instructions, y compris le contenu que vous ajoutez ou modifiez dans différents fichiers.
Copiez le dossier infra dans le nouveau sous-dossier, puis supprimez le azure.parameters.json fichier du dossierinfra nouvel onglet>.
Déplacez les dossiers node_modules et src dans le nouveau sous-dossier.

Déplacez les .webappignorefichiers , package-lock.jsonpackage.json, tsconfig.json, et web.config dans le nouveau sous-dossier.

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- teamsapp.local.yml
|-- teamsapp.yml

Dans le package.json que vous venez de déplacer vers le dossier tab, supprimez le script nommé dev:teamsfx de l’objet scripts . Ce script est ajouté à un nouveau package.json à l’étape suivante.

Créez un fichier nommé package.json à la racine du projet et ajoutez le contenu suivant :

{
    "name": "CombinedTabAndAddin",
    "version": "0.0.1",
    "author": "Contoso",
    "scripts": {
        "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start:tab",
        "build:tab": "cd tab && npm run build",
        "install:tab": "cd tab && npm install",
        "start:tab": "cd tab && npm run start",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "@microsoft/teamsfx-cli": "2.0.2-alpha.4f379e6ab.0",
        "@microsoft/teamsfx-run-utils": "alpha",
        "env-cmd": "^10.1.0",
        "office-addin-dev-settings": "^2.0.3",
        "ncp": "^2.0.0"
    }
}

Modifiez les namepropriétés , versionet author en fonction des besoins.
Ouvrez le teamsapp.yml fichier à la racine du projet, recherchez la ligne ignoreFile: .webappignoreet remplacez-la par ignoreFile: ./tab/.webappignore.
Ouvrez le teamsapp.local.yml fichier à la racine du projet, recherchez la ligne args: install --no-audit, puis remplacez-la par args: run install:tab --no-audit.
Ouvrez TERMINAL dans Visual Studio Code. Accédez à la racine du projet et exécutez npm install. Un dossier node_modules et un package.lock.json fichier sont créés à la racine du projet.
Exécutez ensuite npm run install:tab. Un nouveau node_modules dossier et un package.lock.json fichier sont créés dans le dossier onglet, s’ils ne sont pas déjà présents.
Vérifiez que vous pouvez charger une version test de l’onglet en procédant comme suit :
1. Ouvrez le Kit de ressources Teams.
2. Dans la section COMPTES , vérifiez que vous êtes connecté au compte Microsoft 365.
3. Sélectionnez Afficher>l’exécution dans Visual Studio Code.
4. Dans le menu déroulant EXÉCUTER ET DÉBOGUER , sélectionnez Déboguer dans Teams (Edge), puis appuyez sur F5.
  
  Le projet est généré et exécuté. Ce processus peut prendre quelques minutes. Une fois l’opération terminée, Teams s’ouvre dans un navigateur avec une invite pour ajouter votre application d’onglet.
  
  Remarque
  
  Si c’est la première fois que vous avez débogué une application Teams sur cet ordinateur, vous êtes invité à installer un certificat SSL. Sélectionnez Installer , puis Oui à la deuxième invite. Connectez-vous à votre compte Microsoft 365 si vous y êtes invité.
5. Sélectionnez Ajouter.
6. Pour arrêter le débogage et désinstaller l’application, sélectionnez Exécuter>Arrêter le débogage dans Visual Studio Code.

Créer un projet de complément Outlook

Ouvrez une deuxième instance de Visual Studio Code.
Sélectionnez Teams Toolkit dans la barre d’activité.
Sélectionnez Créer une application.
Dans le menu déroulant Sélectionner une option, sélectionnez VoletOffice du complément> Outlook.
Sélectionnez le dossier dans lequel vous souhaitez créer le complément.
Donnez un nom (sans espace) au projet lorsque vous y êtes invité.

Teams Toolkit crée le projet avec des fichiers de base et une structure automatique, puis l’ouvre dans une nouvelle fenêtre Visual Studio Code. Vous allez utiliser ce projet comme source pour les fichiers et les marques que vous ajoutez au projet Teams.
Bien que vous ne développiez pas ce projet, effectuez les étapes suivantes pour vérifier qu’il peut être chargé de manière indépendante à partir de Visual Studio Code avant de continuer :
1. Vérifiez que le bureau Outlook est fermé.
2. Ouvrez Visual Studio Code.
3. Sélectionnez Teams Toolkit dans la barre d’activité.
4. Dans la section COMPTES , vérifiez que vous êtes connecté à Microsoft 365.
5. Sélectionnez Afficher>l’exécution dans Visual Studio Code.
6. Dans le menu déroulant EXÉCUTER ET DÉBOGUER, sélectionnez Bureau Outlook (Edge Chromium), puis appuyez sur F5.
  
  Le projet est généré et une fenêtre webpack dev-server s’ouvre. Ce processus peut prendre quelques minutes et ouvrir une fenêtre de bureau Outlook.
7. Accédez à Outlook.
8. Ouvrez la boîte de réception de votre identité de compte Microsoft 365.
9. Ouvrez n’importe quel message.
  
  Un onglet Complément Contoso avec deux boutons s’affiche dans le ruban Accueil (ou le ruban Message , si vous ouvrez le message dans sa propre fenêtre).
10. Sélectionnez le bouton Afficher le volet des tâches . Un volet Office s’ouvre.
11. Sélectionnez le bouton Exécuter une action. Une petite notification s’affiche en haut du message.
12. Pour arrêter le débogage et désinstaller le complément, sélectionnez Exécuter Arrêter>le débogage dans Visual Studio Code. Si la fenêtre Webpack dev-server ne se ferme pas, ouvrez le Visual Studio Code TERMINAL à la racine du projet et exécutez npm stop.

Fusionner le manifeste

Le manifeste de l’application Teams est généré au moment du débogage et du chargement indépendant (ou au moment de la génération) à partir du manifest.json fichier dans le dossier \appPackage du projet Teams. Ce fichier est un modèle pour un manifeste. Dans cet article, il est appelé modèle ou modèle de manifeste. La majeure partie du balisage est codée en dur dans le modèle, mais il existe également des fichiers de configuration qui contiennent des données qui sont ajoutées au manifeste généré final. Dans cette procédure, effectuez les tâches suivantes :

Copiez le balisage du manifeste du complément vers le modèle de manifeste de l’application Teams.
Modifiez les fichiers de configuration.

Sauf indication contraire, le fichier que vous modifiez est \appPackage\manifest.json.

Copiez les valeurs de propriété « $schema » et « manifestVersion » du manifeste du complément vers les propriétés correspondantes du fichier de modèle de manifeste de l’application Teams.
Modifiez les valeurs de propriété « name.full », « description.short » et « description.full » en fonction des besoins pour refléter le fait qu’un complément Outlook fait partie de l’application.
Faites de même pour la valeur « name.short ».

Nous vous recommandons de conserver le ${{TEAMSFX_ENV}} à la fin du nom. Cette variable est remplacée par la chaîne « local » lorsque vous déboguez sur localhost et par « dev » lorsque vous déboguez à partir d’un domaine distant ou en mode production.

Remarque

Historiquement, la documentation pour développeurs de compléments Office utilise le terme « dev » ou « mode dev » pour faire référence à l’exécution du complément sur un localhost. Il utilise le terme « prod » ou « mode production » pour faire référence à l’exécution du complément sur un hôte distant pour la préproduction ou la production. La documentation du développeur Teams utilise le terme « local » pour faire référence à l’exécution du complément sur un localhost, et le terme « dev » pour faire référence à l’exécution du complément sur un hôte distant pour le débogage à distance, qui est généralement appelé « préproduction ». Nous travaillons à la cohérence de la terminologie.

Le code JSON suivant est un exemple :
```
"short": "Contoso Tab and Add-in-${{TEAMSFX_ENV}}",
```
Remarque

La valeur « name.short » apparaît à la fois dans la fonctionnalité d’onglet Teams et dans le complément Outlook. Voici quelques exemples :
- Il s’agit de l’étiquette sous le bouton de lancement de l’onglet Teams.
- Il s’agit du contenu de la barre de titre du volet Office du complément.
Si vous avez modifié la valeur « name.short » par rapport à sa valeur par défaut (qui est le nom du projet suivi de la ${{TEAMSFX_ENV}} variable), apportez exactement la même modification à tous les emplacements où le nom du projet apparaît dans les deux fichiers suivants à la racine du projet : teamsapp.yml et teamsapp.local.yml.
S’il n’existe aucun tableau « authorization.permissions.resourceSpecific » dans le modèle de manifeste Teams, copiez-le à partir du manifeste de complément en tant que propriété de niveau supérieur. S’il en existe déjà un dans le modèle Teams, copiez tous les objets du tableau dans le manifeste du complément vers le tableau dans le modèle Teams. Le code JSON suivant est un exemple :
```
"authorization": {
    "permissions": {
        "resourceSpecific": [
            {
                "name": "MailboxItem.Read.User",
                "type": "Delegated"
            }
        ]
    }
},
```
Dans le env/.env.local fichier , recherchez les lignes qui attribuent des TAB_DOMAIN valeurs aux variables et TAB_ENDPOINT . Ajoutez les lignes suivantes immédiatement en dessous :
```
ADDIN_DOMAIN=localhost:3000
ADDIN_ENDPOINT=https://localhost:3000
```
Dans le env/.env.dev fichier, ajoutez la ligne suivante sous ... TAB_ENDPOINT= ligne:
```
ADDIN_ENDPOINT=
```
Dans le modèle de manifeste Teams, ajoutez l’espace réservé "${{ADDIN_DOMAIN}}", en haut du "validDomains" tableau. Le Kit de ressources Teams remplace ce par un domaine localhost lorsque vous développez localement. Lorsque vous déployez l’application combinée terminée en préproduction ou en production, comme décrit dans Déplacer l’application vers Azure, teams Toolkit remplace l’espace réservé par l’URI de préproduction/production. Le code JSON suivant est un exemple :
```
"validDomains": [
    "${{ADDIN_DOMAIN}}",

    // other domains or placeholders
],
```
Copiez l’intégralité de la propriété « extensions » du manifeste du complément dans le modèle de manifeste d’application Teams en tant que propriété de niveau supérieur.

Copier les fichiers du complément Outlook dans le projet d’application Teams

Créez un dossier de niveau supérieur appelé complément dans le projet d’application Teams.
Copiez les fichiers et dossiers suivants du projet de complément vers le dossier de complément du projet d’application Teams.
- /appPackage
- /infra
- /src
- .eslintrc.json
- babel.config.json
- package-lock.json
- package.json
- tsconfig.json
- webpack.config.js

Une fois la copie terminée, supprimez le manifest.json fichier dans le dossier /add-in/appPackage .

Votre structure de dossiers doit maintenant ressembler à l’exemple suivant :

|-- .vscode/
|-- add-in/
|-- |-- appPackage/assets/
|-- |-- infra/
|-- |-- src/
|-- |-- .eslintrc.json
|-- |-- babel.config.json
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- webpack.config.js
|-- appPackage/
|-- build\appPackage/
|-- env/
|-- infra/
|-- node_modules/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml

Modifier les fichiers de configuration des outils

Ouvrez le package.json fichier à la racine du projet.

Ajoutez les scripts suivants à l’objet « scripts » :

"install:add-in": "cd add-in && npm install",
"postinstall": "npm run install:add-in && npm run install:tab",
"build:add-in": "cd add-in && npm run build",
"build:add-in:dev": "cd add-in && npm run build:dev",
"build": "npm run build:tab && npm run build:add-in",

Ouvrez le package.json fichier dans le dossier du complément (et non le dossier onglet ou la racine du projet).

Trois des scripts de l’objet scripts ont un manifest.json paramètre comme dans les exemples suivants :

"start": "office-addin-debugging start appPackage/manifest.json",
"stop": "office-addin-debugging stop appPackage/manifest.json",
"validate": "office-addin-manifest validate appPackage/manifest.json",

Dans le start script, remplacez par appPackage/manifest.json../appPackage/build/appPackage.local.zip. Lorsque vous avez terminé, la ligne doit ressembler à ceci :

"start": "office-addin-debugging start ../appPackage/build/appPackage.local.zip",

Dans les validate scripts et stop , remplacez le paramètre par ../appPackage/build/manifest.local.json. Lorsque vous avez terminé, les mises à jour doivent ressembler à ceci :

"stop": "office-addin-debugging stop ../appPackage/build/manifest.local.json",
"validate": "office-addin-manifest validate ../appPackage/build/manifest.local.json",

Dans Visual Studio Code, ouvrez TERMINAL.
Accédez au dossier du complément et exécutez la commande npm install.
Dans le dossier du complément , ouvrez le webpack.config.js fichier .
Remplacez la ligne from: "appPackage/manifest*.json", par from: "../appPackage/build/manifest*.json",.
À la racine du projet, ouvrez le teamsapp.local.yml fichier et recherchez la provision section . Utilisez le # caractère pour commenter les lignes qui valident le modèle de manifeste. Cela est nécessaire, car le système de validation de manifeste Teams n’est pas encore compatible avec les modifications que vous avez apportées au modèle de manifeste. Lorsque vous avez terminé, les lignes doivent ressembler au code suivant :
```
# - uses: teamsApp/validateManifest
#   with:
#     # Path to manifest template
#     manifestPath: ./appPackage/manifest.json 
```
Veillez à commenter uniquement la teamsApp/validateManifest section . Ne commentez pas la teamsManifest/validateAppPackage section.
Répétez l’étape précédente pour le teamsapp.yml fichier. Les trois lignes se trouvent dans les provision sections et .publish Commentez-les aux deux endroits.
Ouvrez le .vscode\tasks.json fichier dans le projet de complément et copiez toutes les tâches du tasks tableau. Ajoutez-les au tasks tableau du même fichier dans le projet Teams. Ne supprimez aucune des tâches déjà présentes. Assurez-vous que toutes les tâches sont séparées par des virgules.

Dans chacun des objets de tâche que vous venez de copier, ajoutez la propriété suivante options pour vous assurer que ces tâches s’exécutent dans le dossier du complément .

"options": {
    "cwd": "${workspaceFolder}/add-in/"
}

Par exemple, la Debug: Outlook Desktop tâche doit apparaître comme le code JSON suivant lorsque vous avez terminé.

{
    "label": "Debug: Outlook Desktop",
    "type": "npm",
    "script": "start",
    "dependsOn": [
      "Check OS",
      "Install"
    ],
    "presentation": {
      "clear": true,
      "panel": "dedicated",
    },
    problemMatcher": [],
    "options": {
        "cwd": "${workspaceFolder}/add-in/"
    }
}

Ajoutez la tâche suivante au tableau de tâches dans le .vscode\tasks.json fichier du projet. Entre autres choses, cette tâche crée le manifeste final.

{
    // Create the debug resources.
    // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
    "label": "Create resources",
    "type": "teamsfx",
    "command": "provision",
    "args": {
        "template": "${workspaceFolder}/teamsapp.local.yml",
        "env": "local"
    }
},

Ajoutez la tâche suivante au tableau de tâches. Notez qu’il ajoute une Start Add-in Locally tâche qui combine la tâche de Create resources l’application d’onglet avec la tâche de débogage du complément et spécifie qu’elles doivent s’exécuter dans cet ordre.
```
{
    "label": "Start Add-in Locally",
    "dependsOn": [
        "Create resources",
        "Debug: Outlook Desktop"
    ],
    "dependsOrder": "sequence"
},
```

Ajoutez la tâche suivante au tableau de tâches. Il combine la Start Teams App Locally tâche avec le Start Add-in Locally et spécifie qu’ils doivent s’exécuter dans cet ordre.

 {
     "label": "Start App and Add-in Locally",
     "dependsOn": [
         "Start Teams App Locally",
         "Start Add-in Locally"
     ],
     "dependsOrder": "sequence"
 },

Ouvrez le .vscode\launch.json fichier dans le projet, qui configure l’interface utilisateur RUN AND DEBUG dans Visual Studio Code et ajoutez les deux objets suivants en haut du tableau « configurations ».

{
    "name": "Launch Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start Add-in Locally",
    "postDebugTask": "Stop Debug"
},
{
    "name": "Launch App and Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start App and Add-in Locally",
    "postDebugTask": "Stop Debug"
},

Dans la compounds section du même fichier, renommez le Debug in Teams (Edge) composé en Launch App Debug (Edge) et renommez le Debug in Teams (Chrome) composé en Launch App Debug (Chrome).
Vérifiez que vous pouvez charger une version test de la fonctionnalité de complément de l’application Teams dans Outlook en procédant comme suit :
1. Vérifiez que le bureau Outlook est fermé.
2. Ouvrez Visual Studio Code.
3. Sélectionnez Teams Toolkit dans la barre d’activité.
4. Dans la section COMPTES , vérifiez que vous êtes connecté à Microsoft 365.
5. Sélectionnez Afficher>l’exécution dans Visual Studio Code.
6. Dans le menu déroulant EXÉCUTER ET DÉBOGUER, sélectionnez Lancer le complément Outlook Desktop (Edge Chromium) et appuyez sur F5. Le projet est généré et une fenêtre webpack dev-server s’ouvre. Ce processus peut prendre quelques minutes et ouvrir une fenêtre de bureau Outlook.
7. Accédez à Outlook.
8. Ouvrez la boîte de réception de votre identité de compte Microsoft 365.
9. Ouvrez n’importe quel message.
  
  Un onglet Complément Contoso avec deux boutons s’affiche dans le ruban Accueil (ou le ruban Message , si vous ouvrez le message dans sa propre fenêtre).
10. Sélectionnez le bouton Afficher le volet des tâches . Un volet Office s’ouvre.
11. Sélectionnez le bouton Exécuter une action. Une petite notification s’affiche en haut du message.
12. Pour arrêter le débogage et désinstaller le complément, sélectionnez Exécuter Arrêter>le débogage dans Visual Studio Code. Si la fenêtre Webpack dev-server ne se ferme pas, ouvrez le Visual Studio Code TERMINAL à la racine du projet et exécutez npm stop.

Exécuter l’application et le complément localement en même temps

Vous pouvez charger une version test et exécuter l’application et le complément simultanément, mais le débogueur ne peut pas attacher de manière fiable lorsque les deux sont en cours d’exécution. Par conséquent, pour déboguer, exécutez un seul à la fois.

Pour déboguer l’application, reportez-vous à la dernière étape de la section Préparer le projet d’application Teams .

Pour déboguer le complément, reportez-vous à la dernière étape de la section Modifier les fichiers de configuration des outils .

Pour voir l’application et le complément en cours d’exécution en même temps, procédez comme suit.

Vérifiez que le bureau Outlook est fermé.
Ouvrez Visual Studio Code.
Sélectionnez Teams Toolkit dans la barre d’activité.
Dans la section COMPTES , vérifiez que vous êtes connecté à Microsoft 365.
Sélectionnez Afficher>l’exécution dans Visual Studio Code.
Dans le menu déroulant EXÉCUTER ET DÉBOGUER, sélectionnez Lancer l’application et complément Outlook Desktop (Edge Chromium), puis appuyez sur F5. Le projet est généré et une fenêtre webpack dev-server s’ouvre. L’application onglet est hébergée dans le terminal Visual Studio Code. Ce processus peut prendre quelques minutes et les actions suivantes se produisent :
- Teams s’ouvre dans un navigateur avec une invite pour ajouter votre application d’onglet. Si Teams ne s’est pas ouvert au moment de l’ouverture du bureau Outlook, le chargement indépendant automatique a échoué. Vous pouvez charger manuellement une version test pour voir l’application et le complément s’exécuter en même temps. Pour obtenir des instructions de chargement indépendant, consultez Charger votre application dans Teams. Vous trouverez le fichier manifest.zip à charger à l’adresse C:\Users\{yourname}\AppData\Local\Temp.
- Le bureau Outlook s’ouvre.
Dans l’invite Teams, sélectionnez Ajouter et l’onglet s’ouvre.
Accédez à Outlook.
Dans Outlook, ouvrez la boîte de réception de votre identité de compte Microsoft 365.
Ouvrez n’importe quel message.

Un onglet Complément Contoso avec deux boutons s’affiche dans le ruban Accueil (ou le ruban Message , si vous ouvrez le message dans sa propre fenêtre).
Sélectionnez le bouton Afficher le volet des tâches . Un volet Office s’ouvre.
Sélectionnez le bouton Exécuter une action. Une petite notification s’affiche en haut du message.
Pour arrêter le débogage et désinstaller le complément, sélectionnez Exécuter Arrêter>le débogage dans Visual Studio Code. Si la fenêtre Webpack dev-server ne se ferme pas, ouvrez le Visual Studio Code TERMINAL à la racine du projet et exécutez npm stop.
Si vous deviez charger manuellement une version test de l’application d’onglet Teams, supprimez-la de Teams comme indiqué dans Supprimer votre application.

Déplacer l’application vers Azure

Ouvrez le teamsapp.yml fichier à la racine du projet et recherchez la ligne deploymentName: Create-resources-for-tab. Remplacez-la par deploymentName: Create-resources-for-tab-and-addin.
Dans le même fichier, ajoutez le code suivant à la fin de la provision: section .

Remarque

La mise en retrait est significative dans YAML. Par conséquent - uses , et - name les instructions doivent être mises en retrait deux espaces, with les instructions doivent être alignées sur useset les enfants de with doivent être mis en retrait deux autres espaces.
```
provision:

  -- other YAML omitted --

  - uses: azureStorage/enableStaticWebsite
    with:
      storageResourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}
      indexPage: index.html
      errorPage: error.html
```

Dans le même fichier, remplacez toute la deploy: section par le code suivant. Ces modifications tiennent compte de la nouvelle structure de dossiers et du fait que les fichiers de complément et d’onglet doivent être déployés.

deploy:
  - name: InstallAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: install

  - name: BuildAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: run build --if-present

  - name: DeployTab
    uses: azureAppService/zipDeploy
    with:
      artifactFolder: tab
      ignoreFile: ./tab/.webappignore
      # The ID of the cloud resource where the tab app will be deployed.
      # This key will be generated by arm/deploy action automatically.
      resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}} 

  - name: DeployAddin
    uses: azureStorage/deploy
    with:
      workingDirectory: .
      # Deploy base folder
      artifactFolder: add-in/dist
      # The ID of the cloud resource where the add-in will be deployed.
      resourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}

Ouvrez le infra/azure.parameters.json fichier à la racine du projet et remplacez son contenu par le code JSON suivant :

{
    "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
      "resourceBaseName": {
        "value": "tabandaddin${{RESOURCE_SUFFIX}}"
      },
      "webAppSku": {
        "value": "F1"
      },
      "storageSku": {
        "value": "Standard_LRS"
      }
    }
}

Ouvrez le infra/azure.bicep fichier à la racine du projet (et non celui de l’onglet ou des sous-dossiers du complément) et remplacez son contenu par le code suivant :

// Params for Teams tab resources
@maxLength(20)
@minLength(4)
@description('Used to generate names for all resources in this file')
param resourceBaseName string
param webAppSku string
param serverfarmsName string = resourceBaseName
param webAppName string = resourceBaseName
param location string = resourceGroup().location
param storageSku string
param storageName string = resourceBaseName

module tabModule '../tab/infra/azure.bicep' = {
  name: 'tabModule'
  params: {
    resourceBaseName: resourceBaseName
    webAppSku: webAppSku
    serverfarmsName: serverfarmsName
    webAppName: webAppName
    location: location
  }
}

module addinModule '../add-in/infra/azure.bicep' = {
  name: 'addinModule'
  params: {
    resourceBaseName: resourceBaseName
    storageSku: storageSku
    storageName: storageName
    location: location
  }
}

// The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
output TAB_AZURE_APP_SERVICE_RESOURCE_ID string = tabModule.outputs.TAB_AZURE_APP_SERVICE_RESOURCE_ID // used in deploy stage
output TAB_DOMAIN string = tabModule.outputs.TAB_DOMAIN
output TAB_ENDPOINT string = tabModule.outputs.TAB_ENDPOINT

output ADDIN_AZURE_STORAGE_RESOURCE_ID string = addinModule.outputs.ADDIN_AZURE_STORAGE_RESOURCE_ID // used in deploy stage
output ADDIN_DOMAIN string = addinModule.outputs.ADDIN_DOMAIN
output ADDIN_ENDPOINT string = addinModule.outputs.ADDIN_ENDPOINT

Dans Visual Studio Code, ouvrez le Kit de ressources Teams.
Dans la section COMPTES , vérifiez que vous êtes connecté à votre compte Azure (en plus d’être connecté à votre compte Microsoft 365). Pour plus d’informations sur la connexion, ouvrez Exercice - Créer des ressources Azure pour héberger une application d’onglet Teams et faites défiler jusqu’à la section Se connecter à Azure dans Teams Toolkit .
Dans la section CYCLE de vie du Kit de ressources Teams, sélectionnez Provisionner. Cela peut prendre plusieurs minutes. Vous serez peut-être invité à sélectionner l’un de vos groupes de ressources Azure.
Une fois l’approvisionnement terminé, sélectionnez Déployer pour déployer votre code d’application sur Azure.

Exécuter la fonctionnalité d’onglet à partir du déploiement à distance

Dans Visual Studio Code, sélectionnez Afficherl’exécution>.
Dans le menu déroulant, sélectionnez Lancer à distance dans Teams (Edge) ou Lancer à distance dans Teams (Chrome).
Appuyez sur F5 pour afficher un aperçu de votre fonctionnalité d’onglet Teams.

Exécuter la fonctionnalité de complément à partir du déploiement distant

Copiez l’URL de production à partir du ADDIN_ENDPOINT fichier in env/.env.dev .
Modifiez le fichier et remplacez \add-in\webpack.config.jsurlProd la valeur constante par la valeur que vous venez de copier. Veillez à ajouter un « / » à la fin de l’URL.
Dans le Visual Studio Code TERMINAL, accédez à la racine du projet, puis exécutez npm run build:add-in.
Copiez le fichier \add-in\dist\manifest.dev.json dans le \appPackage dossier .
Renommez la copie dans le \appPackage dossier en manifest.addinPreview.json.
Dans le TERMINAL, exécutez npx office-addin-dev-settings sideload .\appPackage\manifest.addinPreview.json. Ce processus peut prendre quelques minutes et ouvre le bureau Outlook. (Si vous êtes invité à installer office-addin-dev-settings, répondez oui.)
Accédez à Outlook.
Ouvrez la boîte de réception de votre identité de compte Microsoft 365.
Ouvrez n’importe quel message.

Un onglet Complément Contoso avec deux boutons s’affiche dans le ruban Accueil (ou le ruban Message , si vous ouvrez le message dans sa propre fenêtre).
Sélectionnez le bouton Afficher le volet des tâches . Un volet Office s’ouvre.
Sélectionnez le bouton Exécuter une action. Une petite notification s’affiche en haut du message.

Quelles sont les prochaines étapes ?

Il existe d’autres étapes suivantes fréquemment suggérées, par exemple :

Ajoutez l’authentification et effectuez un appel API Graph. Pour connaître la fonctionnalité d’onglet, consultez Ajouter l’authentification unique à l’application Teams. Pour connaître la fonctionnalité de complément, consultez Activer l’authentification unique (SSO) dans un complément Office.
Configurer des pipelines CI/CD.
Appelez une API back-end.

Partager via

Ajouter un complément Outlook à une application Teams

Introduction

Configuration requise

Ajouter un complément Outlook à une application Teams

Préparer le projet d’application Teams

Créer un projet de complément Outlook

Fusionner le manifeste

Copier les fichiers du complément Outlook dans le projet d’application Teams

Modifier les fichiers de configuration des outils

Exécuter l’application et le complément localement en même temps

Déplacer l’application vers Azure

Exécuter la fonctionnalité d’onglet à partir du déploiement à distance

Exécuter la fonctionnalité de complément à partir du déploiement distant

Quelles sont les prochaines étapes ?

Voir aussi

Ressources supplémentaires