Créer votre premier complément du volet Office de OneNote

Cet article décrit comment créer un complément du volet Office de OneNote.

Conditions préalables

• Node.js (la dernière version LTS) Visitez le siteNode.js pour télécharger et installer la version appropriée pour 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 bénéficier d’un abonnement Microsoft 365 E5 développeur par le biais du Programme pour les développeurs Microsoft 365. Pour plus d’informations, consultez le FAQ. Vous pouvez également vous inscrire à un essai gratuit de 1 mois ou acheter un plan Microsoft 365.

Création du projet de complément

Exécutez la commande suivante pour créer un projet de complément à l’aide du générateur Yeoman. Un dossier qui contient le projet est ajouté au répertoire actif.

yo office

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

• Choisissez un type de projet :Office Add-in Task Pane project
• Choisissez un type de script :Javascript
• Que voulez-vous nommer votre complément ?My Office Add-in
• Quelle application cliente Office souhaitez-vous prendre en charge ?OneNote

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

Explorer le projet

Le projet de complément que vous avez créé à l’aide du générateur Yeoman contient un exemple de code pour un complément de volet de tâches très simple.

• Le fichier ./manifest.xml du répertoire racine du projet définit les paramètres et 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 des tâches et l’application cliente Office.

Mettre à jour le code

Ouvrez le fichier ./src/taskpane/taskpane.js dans l’éditeur de code et ajoutez le code suivant à la fonction run. Ce code utilise l’API JavaScript OneNote pour définir le titre de la page et ajouter un plan au corps de celle-ci.

try {
    await OneNote.run(async (context) => {

        // Get the current page.
        const page = context.application.getActivePage();

        // Queue a command to set the page title.
        page.title = "Hello World";

        // Queue a command to add an outline to the page.
        const html = "<p><ol><li>Item #1</li><li>Item #2</li></ol></p>";
        page.addOutline(40, 90, html);

        // Run the queued commands.
        await context.sync();
    });
} catch (error) {
    console.log("Error: " + error);
}

Essayez

1. Accédez au dossier racine du projet.

   cd "My Office Add-in"
   

2. Démarrez le serveur web local. Exécutez la commande suivante dans le répertoire racine de votre projet.

   npm run dev-server
   

   Remarque

   • Les compléments Office doivent utiliser HTTPS, et non HTTP, même lorsque vous développez. Si vous êtes invité à installer un certificat après avoir exécuté l’une des commandes suivantes, acceptez l’invite pour installer le certificat fourni par le générateur Yeoman. Il se peut également que vous deviez exécuter votre invite de commande ou votre terminal en tant qu'administrateur pour que les modifications soient effectuées.

   • Si c’est la première fois que vous développez un complément Office sur votre ordinateur, vous pouvez être invité dans la ligne de commande à accorder à Microsoft Edge WebView une exemption de bouclage (« Autoriser le bouclage localhost pour Microsoft Edge WebView ? »). Lorsque vous y êtes invité, entrez Y pour autoriser l’exemption. Notez que vous aurez besoin de privilèges d’administrateur pour autoriser l’exemption. Une fois autorisé, vous ne devez pas être invité à bénéficier d’une exemption lorsque vous chargez une version test des compléments Office à l’avenir (sauf si vous supprimez l’exemption de votre ordinateur). Pour plus d’informations, consultez « Nous ne pouvons pas ouvrir ce complément à partir de localhost » lors du chargement d’un complément Office ou de l’utilisation de Fiddler.

     

   • Lorsque vous utilisez le générateur Yeoman pour la première fois 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 connexion, exécutez atk auth login m365.

3. Dans OneNote sur le web, ouvrez un bloc-notes, puis créez une page.

4. Choisissez Insérer>des compléments Office pour ouvrir la boîte de dialogue Compléments Office.

   • Si vous êtes connecté avec votre compte de consommateur, sélectionnez l’onglet MES COMPLÉMENTS, puis choisissez Télécharger mon complément.

   • Si vous êtes connecté avec votre compte professionnel ou scolaire, sélectionnez l’onglet MON ORGANISATION, puis choisissez Télécharger mon complément.

   L’image suivante montre l’onglet MES COMPLÉMENTS pour les blocs-notes de consommateurs.

   

5. Dans la boîte de dialogue Télécharger le complément, accédez à manifest.xml dans le dossier de projet, puis choisissez Télécharger.

6. Sous l’onglet Accueil , cliquez sur le bouton Afficher le volet Des tâches sur le ruban. Le volet Office du complément s’ouvre dans un iFrame à côté de la page OneNote.

7. Au bas du volet Office, sélectionnez le lien Exécuter pour définir le titre de la page et ajouter un plan au corps de celle-ci.

   

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

   • Pour arrêter le serveur, exécutez la commande suivante.

     npm stop
     

   • Pour désinstaller le complément chargé de manière indépendante, consultez Supprimer un complément chargé de manière indépendante.

Étapes suivantes

Félicitations ! Vous avez créé un complément du volet Office de OneNote ! Ensuite, vous allez étudier en détail les concepts fondamentaux de la création de compléments Excel.

Résolution des problèmes

• Vérifiez que votre environnement est prêt pour le développement Office en suivant les instructions fournies dans Configurer votre environnement de développement.

• L’étape automatique npm install effectuée par Yo Office 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 commandes 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é. Parfois, les dépendances deviennent déconseillées et leurs remplacements ne sont pas pris en charge par les autres packages dont dépend le projet. Si vous souhaitez résoudre ces avertissements, utilisez l’outil npm-check-updates .

  • Dans l’invite de commandes dans le répertoire du projet racine, exécutez npm i -g npm-check-updates. L’outil est alors installé globalement.
  • Exécutez ncu -u. Cela fournit un rapport de tous les packages et des versions à mettre à jour.
  • Exécutez npm install pour mettre à jour tous les packages.

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

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

Voir aussi

• Vue d’ensemble de la plateforme des compléments Office
• Développement de compléments Office
• Vue d’ensemble de la programmation de l’API JavaScript de OneNote
• Référence de l’API JavaScript de OneNote
• Exemple : Complément du volet Office du nuanceur de rubrique pour OneNote sur le web
• Utilisation de Visual Studio Code pour publier