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

Notes

Si vous n’êtes pas familiarisé avec les nœuds.js ou npm, vous devez commencer par configuration de votre environnement de développement.

  • Node.js (la dernière version LTS)

  • 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
    

    Notes

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

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.

yo office

Notes

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

Capture d'écran montrant les invites et les réponses pour le générateur Yeoman dans une interface de ligne de commande.

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

Conseil

Vous pouvez ignorer les instructions suivantes fournies par le générateur Yeoman une fois que le complément a été créé. Les instructions détaillées de cet article fournissent tous les conseils nécessaires à l’exécution de ce didacticiel.

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.
        var 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.
        var html = "<p><ol><li>Item #1</li><li>Item #2</li></ol></p>";
        page.addOutline(40, 90, html);

        // Run the queued commands, and return a promise to indicate task completion.
        return 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 et chargez indépendamment votre complément.

    Notes

    Les compléments Office doivent utiliser le protocole HTTPS, et non HTTP, même lorsque vous développez. Si vous êtes invité à installer un certificat après avoir exécuté une des commandes suivantes, acceptez d’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.

    Conseil

    Si vous testez votre complément sur Mac, exécutez la commande suivante avant de continuer. Lorsque vous exécutez cette commande, le serveur web local démarre.

    npm run dev-server
    

    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 (s’il n’est pas déjà en cours d’exécution).

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

  4. Choisissez Insertion > 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.

    Capture d’écran de la boîte de dialogue Compléments Office affichant l’onglet MES COMPLÉMENTS.

  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. Dans l’onglet Accueil, choisissez le bouton Afficher le volet de tâches du 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.

    Capture d’écran illustrant le complément créé à partir de cette procédure : bouton Afficher le ruban du volet Office et le volet Office dans OneNote.

Étapes suivantes

Félicitations, vous avez créé un complément de volet office OneNote ! Découvrez ensuite les concepts fondamentaux de la création de compléments OneNote.

Voir aussi