Création de votre premier complément Outlook

Créez un complément de volet Office pour Outlook qui lit l’objet d’un message sélectionné. Ce démarrage rapide utilise le générateur Yeoman pour compléments Office (Yo Office) pour générer la génération de modèles automatiques du projet. Vous pouvez ainsi vous concentrer sur l’écriture du code de l’API JavaScript Office.

Configuration requise

• Node.js (la dernière version LTS active). Visitez le siteNode.js pour télécharger et installer la version adaptée à votre système d’exploitation.

• La dernière version deYeoman et du Générateur Yeoman Générateur de compléments Office. Pour installer ces outils globalement, exécutez la commande suivante via l’invite de commande.

  npm install -g yo generator-office
  

  Remarque

  Même si vous avez précédemment installé le générateur Yeoman, nous vous recommandons de mettre à jour votre package vers la dernière version de npm.

• Office connecté à un abonnement Microsoft 365 (y compris Office on the web).

  Remarque

  Si vous n’avez pas encore Office, vous pouvez peut-être bénéficier d’un abonnement développeur Microsoft 365 E5 via le programme Microsoft 365 pour les développeurs. Pour plus d’informations, consultez le FAQ. Vous pouvez également vous inscrire à un essai gratuit d’un mois ou acheter un plan Microsoft 365.

• Outlook sur le web, nouvel Outlook sur Windows, Outlook 2016 ou version ultérieure sur Windows (connecté à un compte Microsoft 365), ou Outlook sur Mac.

Création du projet de complément

1. Exécutez la commande suivante pour créer un projet de complément à l’aide du générateur Yeoman. Un dossier contenant le projet sera ajouté au répertoire actuel.

   yo office
   

   Remarque

   Lorsque vous exécutez la commande yo office, il est possible que vous receviez des messages d’invite sur les règles de collecte de données de Yeoman et les outils CLI de complément Office. Utilisez les informations fournies pour répondre aux invites comme vous l’entendez.

   Lorsque vous y êtes invité, fournissez les informations suivantes pour créer votre projet de complément.

   • Sélectionnez un type de projet - Office Add-in Task Pane project
   • Sélectionnez un type de script - JavaScript
   • Comment souhaitez-vous nommer votre complément ? - My Office Add-in
   • Quelle application client Office voulez-vous prendre en charge ? - Outlook
   • Quel manifeste voulez-vous utiliser ? - Choisissez l’un ou l’autre Unified manifest for Microsoft 365 ou Add-in only manifest

   Remarque

   Le manifeste unifié pour Microsoft 365 vous permet de combiner un complément Office avec une application Teams dans une application pour Microsoft 365 en tant qu’unité unique de développement et de déploiement. Pour en savoir plus, voir Compléments Office avec le manifeste unifié. Pour obtenir un exemple d’application pour Microsoft 365 qui combine une application Teams et un complément Outlook, consultez Offres de remise.

   Nous apprécions vos commentaires sur le manifeste unifié. Si vous avez des suggestions, veuillez créer un problème dans le référentiel pour la bibliothèque JavaScript Office.

   Selon votre choix de manifeste, les invites et les réponses doivent ressembler à l’un des éléments suivants :

   

   

   Après avoir exécuté l’assistant, le générateur crée le projet et installe les composants Node de prise en charge.

2. Accédez au dossier racine du projet de l’application web.

   cd "My Office Add-in"
   

Explorer le projet

Le générateur Yeoman crée un projet dans un dossier avec le nom du projet que vous avez choisi. Le projet contient un exemple de code pour un complément de volet Office très simple. Voici les fichiers les plus importants.

• Le fichier ./manifest.json ou ./manifest.xml dans le répertoire racine du projet définit les paramètres et les fonctionnalités du complément.
• Le fichier ./src/taskpane/taskpane.html contient les balises HTML du volet Office.
• Le fichier ./src/taskpane/taskpane.css contient le style CSS appliqué au contenu du volet Office.
• Le fichier ./src/taskpane/taskpane.js contient le code d’API JavaScript pour Office qui facilite l’interaction entre le volet Office et Outlook.

Essayez

1. Exécutez la commande suivante dans le répertoire racine de votre projet. Lorsque vous exécutez cette commande, le serveur web local démarre et votre complément est téléchargé.

   npm start
   

   Remarque

   • Lorsque vous utilisez pour la première fois le générateur Yeoman pour développer un complément Office, votre navigateur par défaut ouvre une fenêtre dans laquelle vous êtes invité à vous connecter à votre compte Microsoft 365. Si aucune fenêtre de connexion n’apparaît et que vous rencontrez une erreur de chargement indépendant ou de délai d’expiration de la connexion, exécutez atk auth login m365 avant d’exécuter npm start à nouveau.

   • Si votre complément n’a pas été automatiquement chargé d’une version testée, suivez les instructions de la section Charger une version test des compléments Outlook pour tester le chargement manuel d’une version test du complément dans Outlook.

2. Sur Outlook, affichez un message dans le volet de lectureou ouvrez le message dans sa propre fenêtre.

3. Sélectionnez le bouton Afficher le volet des tâches pour ouvrir le volet des tâches des compléments. L’emplacement du bouton du complément varie en fonction du client Outlook que vous utilisez.

   • Outlook sur le web et nouvelle version d’Outlook sur Windows : Dans la barre d’action du message, sélectionnez Applications. Ensuite, sélectionnezAfficher le volet Officedes compléments>.
   • Outlook classique sur Windows : Sélectionnez l’onglet Accueil (ou l’onglet Message si vous avez ouvert le message dans une nouvelle fenêtre). Ensuite, sélectionnez Afficher le volet des tâches dans le ruban.
   • Outlook sur Mac : Sélectionnez Le complément Mon Office dans le ruban, puis Afficher le Volet Office. Vous devrez peut-être sélectionner le bouton points de suspension (...) dans le ruban pour afficher vos compléments.

   Les captures d’écran suivantes montrent comment le complément apparaît dans Outlook classique sur Windows.

   

4. Lorsque la boîte de dialogue WebView Stop On Load apparaît, sélectionnez OK.

   Remarque

   Si vous sélectionnez Annuler, la boîte de dialogue ne s’affiche plus lors de l’exécution de cette instance du complément. Toutefois, si vous redémarrez votre complément, la boîte de dialogue s’affichera à nouveau.

5. Faites défiler vers le bas du volet Office et sélectionnez le lien Exécuter pour écrire l’objet du message dans le volet Office.

   

   

6. Lorsque vous souhaitez arrêter le serveur web local et désinstaller le complément, suivez les instructions applicables :

   • Pour arrêter le serveur, exécutez la commande suivante. Si vous avez utilisé npm start, la commande suivante doit également désinstaller le complément.

     npm stop
     

   • Si vous avez chargé manuellement un complément indépendant, consultez Supprimer un complément chargé d’une version indépendante.

Étapes suivantes

Félicitations, vous avez créé votre premier complément de volet de tâches Outlook ! Explorez ensuite d’autres fonctionnalités d’un complément Outlook en suivant le didacticiel sur les compléments Outlook. Dans le didacticiel, vous allez créer un complément plus complexe qui intègre un volet Office, que vous avez découvert dans le démarrage rapide. De plus, vous allez créer un bouton qui invoque une fonction sans interface utilisateur.

Résolution des problèmes

• Assurez-vous que votre environnement est prêt pour le développement Office en suivant les instructions de la rubrique Configurer votre environnement de développement.

• L’étape automatique npm install que Yo Office effectue peut échouer. Si vous voyez des erreurs lors de la tentative d’exécution npm start, accédez au dossier de projet nouvellement créé dans une invite de commande et exécutez npm installmanuellement . Pour plus d’informations sur Yo Office, voir Créer des projets de complément Office à l’aide du générateur Yeoman.

• Vous pouvez voir des avertissements générés lors de l’exécution npm install pour le générateur Yeoman ou le projet. Dans la plupart des cas, vous pouvez ignorer ces avertissements en toute sécurité. Les avertissements de sécurité ou d’audit nécessitent une évaluation distincte ; Résolvez les vulnérabilités dans les dépendances d’exécution, ou les dépendances dont vous ne pouvez pas déterminer l’origine, avant le déploiement en production. Parfois, les dépendances deviennent obsolètes et leurs remplacements ne sont pas pris en charge par les autres packages dont dépend le projet. Pour passer en revue les mises à jour de dépendance disponibles, utilisez l’outil npm-check-updates .

  • Dans l’invite de commande, dans le répertoire du projet racine, exécutez npm i -g npm-check-updates. Cela installe l’outil globalement.
  • Exécuter ncu pour signaler les mises à jour disponibles sans modifier package.json.
  • Vérifiez la compatibilité des versions proposées et mettez à jour uniquement les plages de dépendances appropriées dans package.json, puis exécutez .npm install Notez que ncu -u réécrit les plages de dépendances et peut inclure la rupture des mises à niveau des versions majeures.

  Pour plus d’informations sur les avertissements lors de l’exécution de , consultez Avertissements et dépendances dans le monde Node.js et npm.npm install

• Si vous ne voyez pas le bouton Complément sur le ruban (par exemple, Afficher le volet Office), sélectionnez le bouton Compléments dans l’onglet du ruban Accueil , puis choisissez le complément de test.

• Si le message d’erreur « Désolé... nous ne pouvons pas ouvrir ce complément à partir de localhost » s’affiche dans le volet Office, suivez les étapes décrites dans l’article résolution des problèmes.

Exemples de code

• Complément Outlook « Hello world » : Découvrez comment créer un complément Office simple comportant uniquement un manifeste, une page web HTML et un logo.

Voir aussi

• Compléments Office avec uniquement le manifeste de complément
• Utilisation de Visual Studio Code pour publier