Didacticiel : Créer un complément de volet de tâches de PowerPoint

Dans ce tutoriel, vous allez utiliser Visual Studio Code (VS Code), Visual Studio ou votre éditeur de code préféré pour créer un complément du volet Office PowerPoint qui :

• Ajoute une image à une diapositive
• Ajout de texte à une diapositive
• Get Slide Metadata
• Ajoute de nouvelles diapositives
• Naviguer entre les diapositives

Vous pouvez créer un complément Office à l’aide du générateur Yeoman pour les compléments Office ou de Visual Studio. Le générateur Yeoman crée un projet Node.js qui peut être géré avec du Visual Studio Code ou n’importe quel autre éditeur, alors que Visual Studio crée une solution Visual Studio. Sélectionnez l’onglet correspondant à votre choix, puis suivez les instructions de création de votre complément et testez-le localement.

Générateur Yeoman

Créer le complément

Conseil

Si vous avez déjà terminé le démarrage rapide créer votre premier complément du volet Office PowerPoint à l’aide du générateur Yeoman et que vous souhaitez utiliser ce projet comme point de départ pour ce didacticiel, accédez directement à la section Insérer une image pour démarrer ce didacticiel.

Si vous souhaitez obtenir une version complète de ce didacticiel, accédez au référentiel d’exemples de compléments Office sur GitHub.

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

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.

• 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 ?PowerPoint

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

Remarque

Si vous utilisez Node.js version 20.0.0 ou ultérieure, un avertissement peut s’afficher lorsque le générateur exécute l’installation indiquant que vous disposez d’un moteur non pris en charge. Nous travaillons sur un correctif pour cela. En attendant, l’avertissement n’affecte pas le générateur ou le projet que vous générez. Il peut donc être ignoré.

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.

Installation terminée

1. Accédez au registre racine du projet.

   cd "My Office Add-in"
   

2. Ouvrez votre projet dans VS Code ou votre éditeur de code préféré.

   Conseil

   Dans Windows, vous pouvez accéder au répertoire racine du projet via la ligne de commande, puis entrer code . pour ouvrir ce dossier dans VS Code. Sur Mac, vous devez ajouter la commande code au chemin d’accès avant de pouvoir utiliser cette commande pour ouvrir le dossier de projet dans VS Code.

Insérer une image

Effectuez les étapes suivantes pour ajouter du code qui insère une image dans une diapositive.

1. Ouvrez le projet dans votre éditeur de code.

2. À la racine du projet, créez un fichier nommé base64Image.js.

3. Ouvrez le fichier base64Image.js et ajoutez le code suivant pour spécifier la chaîne encodée en Base64 qui représente une image.

   export const base64Image =
       "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";
   

4. Ouvrez le fichier ./src/taskpane/taskpane.html. Ce fichier contient la balise HTML du volet des tâches.

5. Recherchez l’élément <body>. Remplacez-le par le balisage suivant, puis enregistrez le fichier.

   <body class="ms-font-m ms-welcome ms-Fabric">
       <!-- TODO2: Update the header node. -->
       <header class="ms-welcome__header ms-bgColor-neutralLighter">
           <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
           <h1 class="ms-font-su">Welcome</h1>
       </header>
       <section id="sideload-msg" class="ms-welcome__main">
           <h2 class="ms-font-xl">Please <a target="_blank" href="https://learn.microsoft.com/office/dev/add-ins/testing/test-debug-office-add-ins#sideload-an-office-add-in-for-testing">sideload</a> your add-in to see app body.</h2>
       </section>
       <main id="app-body" class="ms-welcome__main" style="display: none;">
           <div class="padding">
               <!-- TODO1: Create the insert-image button. -->
               <!-- TODO3: Create the insert-text button. -->
               <!-- TODO4: Create the get-slide-metadata button. -->
               <!-- TODO5: Create the add-slides and go-to-slide buttons. -->
           </div>
       </main>
       <section id="display-msg" class="ms-welcome__main">
           <div class="padding">
               <h3>Message</h3>
               <div id="message"></div>
           </div>
       </section>
   </body>
   

6. Dans le fichier taskpane.html , remplacez par TODO1 le balisage suivant. Ce balisage définit le bouton Insert Image (Insérer une image) qui s’affichera dans volet Office du complément.

   <button class="ms-Button" id="insert-image">Insert Image</button><br/><br/>
   

7. Ouvrez le fichier ./src/taskpane/taskpane.js. Ce fichier contient le code de l’API JavaScript pour Office qui facilite l’interaction entre le volet des tâches et l’application cliente Office. Remplacez tout le contenu par le code suivant, puis enregistrez le fichier.

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
    * See LICENSE in the project root for license information.
    */
   
   /* global document, Office */
   
   // TODO1: Import Base64-encoded string for image.
   Office.onReady((info) => {
     if (info.host === Office.HostType.PowerPoint) {
       document.getElementById("sideload-msg").style.display = "none";
       document.getElementById("app-body").style.display = "flex";
       // TODO2: Assign event handler for insert-image button.
       // TODO4: Assign event handler for insert-text button.
       // TODO6: Assign event handler for get-slide-metadata button.
       // TODO8: Assign event handlers for add-slides and the four navigation buttons.
     }
   });
   
   // TODO3: Define the insertImage function.
   
   // TODO5: Define the insertText function.
   
   // TODO7: Define the getSlideMetadata function.
   
   // TODO9: Define the addSlides and navigation functions.
   
   async function clearMessage(callback) {
     document.getElementById("message").innerText = "";
     await callback();
   }
   
   function setMessage(message) {
     document.getElementById("message").innerText = message;
   }
   
   // Default helper for invoking an action and handling errors.
   async function tryCatch(callback) {
     try {
       document.getElementById("message").innerText = "";
       await callback();
     } catch (error) {
       setMessage("Error: " + error.toString());
     }
   }
   

8. Dans le fichiertaskpane.js au-dessus de l’appel Office.onReady de fonction près du haut du fichier, remplacez par TODO1 le code suivant. Ce code importe la variable que vous avez définie précédemment dans le fichier ./base64Image.js.

   import { base64Image } from "../../base64Image";
   

9. Dans le fichier taskpane.js , remplacez par TODO2 le code suivant pour affecter le gestionnaire d’événements pour le bouton Insérer une image .

   document.getElementById("insert-image").onclick = () => clearMessage(insertImage);
   

10. Dans le fichier taskpane.js , remplacez par TODO3 le code suivant pour définir la insertImage fonction. Cette fonction utilise l’API JavaScript Office pour insérer l’image dans le document. Remarque :

    • l’option coercionType spécifiée comme deuxième paramètre de la demande setSelectedDataAsync indique le type de données insérées.

    • L’objet asyncResult encapsule le résultat de la demande setSelectedDataAsync, y compris les informations d’état et d’erreur quand la demande a échoué.

    function insertImage() {
      // Call Office.js to insert the image into the document.
      Office.context.document.setSelectedDataAsync(
        base64Image,
        {
          coercionType: Office.CoercionType.Image
        },
        (asyncResult) => {
          if (asyncResult.status === Office.AsyncResultStatus.Failed) {
            setMessage("Error: " + asyncResult.error.message);
          }
        }
      );
    }
    

11. Enregistrez toutes vos modifications dans le projet.

Test du complément

1. Accédez au dossier racine du projet.

   cd "My Office Add-in"
   

2. Pour démarrer le serveur web local et charger indépendamment votre complément, procédez comme suit.

   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.

   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
   

   • Pour tester votre complément dans PowerPoint, exécutez la commande suivante dans le répertoire racine de votre projet. Cela a pour effet de démarrer le serveur web local (s’il n’est pas déjà en cours d’exécution) et d’ouvrir PowerPoint avec votre complément chargé.

     npm start
     

   • Pour tester votre complément dans PowerPoint sur un navigateur, 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. Remplacez "{url}" par l'URL d'un document PowerPoint sur votre OneDrive ou une bibliothèque Microsoft Office SharePoint Online sur laquelle vous disposez d'autorisations.

     Remarque

     Si vous développez sur un Mac, placez le {url} entre guillemets simples. Ne le faites pas sur Windows.

     npm run start:web -- --document {url}
     

     Les éléments suivants sont des exemples.

     • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si votre complément ne charge pas de version test dans le document, chargez-le manuellement en suivant les instructions fournies dans Charger manuellement une version test des compléments pour Office sur le Web.

3. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, choisissez l’onglet Accueil , puis le bouton Afficher le volet Des tâches dans le ruban pour ouvrir le volet Office du complément.

   

4. Dans le volet Office, choisissez le bouton Insérer une image pour ajouter l’image à la diapositive active.

   

Personnaliser les éléments de l’interface utilisateur

Procédez comme suit pour ajouter des marques de révision qui personnalisent l’interface utilisateur du volet de tâche.

1. Dans le fichier taskpane.html , remplacez TODO2 et la section d’en-tête actuelle par le balisage suivant pour mettre à jour la section d’en-tête et le titre dans le volet Office. Remarque :

   • Les styles qui commencent par ms-sont définis par Fabric Core dans les modules complémentaires d'Office, une structure frontale JavaScript permettant de créer des expériences utilisateur pour Office. Le fichier taskpane.html inclut une référence à la feuille de style Fabric Core.

   <header id="content-header">
       <div class="ms-Grid ms-bgColor-neutralPrimary">
           <div class="ms-Grid-row">
               <div class="padding ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12"> <div class="ms-font-xl ms-fontColor-white ms-fontWeight-semibold">My PowerPoint add-in</div></div>
           </div>
       </div>
   </header>
   

2. Enregistrez toutes vos modifications dans le projet.

Test du complément

1. Si le serveur web local n’est pas déjà en cours d’exécution, effectuez les étapes suivantes pour démarrer le serveur web local et charger une version test de votre complément.

   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.

   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
   

   • Pour tester votre complément dans PowerPoint, exécutez la commande suivante dans le répertoire racine de votre projet. Cela a pour effet de démarrer le serveur web local (s’il n’est pas déjà en cours d’exécution) et d’ouvrir PowerPoint avec votre complément chargé.

     npm start
     

   • Pour tester votre complément dans PowerPoint sur un navigateur, 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. Remplacez "{url}" par l'URL d'un document PowerPoint sur votre OneDrive ou une bibliothèque Microsoft Office SharePoint Online sur laquelle vous disposez d'autorisations.

     Remarque

     Si vous développez sur un Mac, placez le {url} entre guillemets simples. Ne le faites pas sur Windows.

     npm run start:web -- --document {url}
     

     Les éléments suivants sont des exemples.

     • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si votre complément ne charge pas de version test dans le document, chargez-le manuellement en suivant les instructions fournies dans Charger manuellement une version test des compléments pour Office sur le Web.

2. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

3. Notez que le volet Office contient désormais une section d’en-tête et un titre mis à jour.

   

Insérer du texte

Effectuez les étapes suivantes pour ajouter du code qui insère du texte dans la diapositive de titre qui contient une image.

1. Dans le fichier taskpane.html , remplacez par TODO3 le balisage suivant. Ce balisage définit le bouton Insert Text (Insérer du texte) qui s’affiche dans le volet Office du complément.

   <button class="ms-Button" id="insert-text">Insert Text</button><br/><br/>
   

2. Dans le fichier taskpane.js , remplacez par TODO4 le code suivant pour affecter le gestionnaire d’événements pour le bouton Insérer du texte .

   document.getElementById("insert-text").onclick = () => clearMessage(insertText);
   

3. Dans le fichier taskpane.js , remplacez par TODO5 le code suivant pour définir la insertText fonction. Cette fonction insère du texte dans la diapositive active.

   function insertText() {
     Office.context.document.setSelectedDataAsync("Hello World!", (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
         setMessage("Error: " + asyncResult.error.message);
       }
     });
   }
   

4. Enregistrez toutes vos modifications dans le projet.

Test du complément

1. Accédez au dossier racine du projet.

   cd "My Office Add-in"
   

2. Si le serveur web local n’est pas déjà en cours d’exécution, effectuez les étapes suivantes pour démarrer le serveur web local et charger une version test de votre complément.

   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.

   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
   

   • Pour tester votre complément dans PowerPoint, exécutez la commande suivante dans le répertoire racine de votre projet. Cela a pour effet de démarrer le serveur web local (s’il n’est pas déjà en cours d’exécution) et d’ouvrir PowerPoint avec votre complément chargé.

     npm start
     

   • Pour tester votre complément dans PowerPoint sur un navigateur, 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. Remplacez "{url}" par l'URL d'un document PowerPoint sur votre OneDrive ou une bibliothèque Microsoft Office SharePoint Online sur laquelle vous disposez d'autorisations.

     Remarque

     Si vous développez sur un Mac, placez le {url} entre guillemets simples. Ne le faites pas sur Windows.

     npm run start:web -- --document {url}
     

     Les éléments suivants sont des exemples.

     • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si votre complément ne charge pas de version test dans le document, chargez-le manuellement en suivant les instructions fournies dans Charger manuellement une version test des compléments pour Office sur le Web.

3. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

4. Dans le volet Office, choisissez le bouton Insérer une image pour ajouter l’image à la diapositive active, puis choisissez une conception pour la diapositive qui contient une zone de texte pour le titre.

   

   

5. Placez votre curseur dans la zone de texte sur la diapositive de titre, dans le volet Office, sélectionnez le bouton Insert Text (Insérer du texte) permettant d’ajouter du texte à la diapositive.

   

Obtenir les métadonnées des diapositives

Procédez comme suit pour ajouter du code qui extrait les métadonnées pour la diapositive sélectionnée.

1. Dans le fichier taskpane.html , remplacez par TODO4 le balisage suivant. Ce balisage définit le bouton Get Slide Metadata (Obtenir les métadonnées de la diapositive) qui s’affichera dans le volet Office du complément.

   <button class="ms-Button" id="get-slide-metadata">Get Slide Metadata</button><br/><br/>
   

2. Dans le fichier taskpane.js , remplacez par TODO6 le code suivant pour affecter le gestionnaire d’événements pour le bouton Obtenir les métadonnées de diapositive .

   document.getElementById("get-slide-metadata").onclick = () => clearMessage(getSlideMetadata);
   

3. Dans le fichier taskpane.js , remplacez par TODO7 le code suivant pour définir la getSlideMetadata fonction. Cette fonction récupère les métadonnées des diapositives sélectionnées et les écrit dans la section Message du volet Office du complément.

   function getSlideMetadata() {
     Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
         setMessage("Error: " + asyncResult.error.message);
       } else {
         setMessage("Metadata for selected slides: " + JSON.stringify(asyncResult.value));
       }
     });
   }
   

4. Enregistrez toutes vos modifications dans le projet.

Test du complément

1. Accédez au dossier racine du projet.

   cd "My Office Add-in"
   

2. Si le serveur web local n’est pas déjà en cours d’exécution, effectuez les étapes suivantes pour démarrer le serveur web local et charger une version test de votre complément.

   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.

   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
   

   • Pour tester votre complément dans PowerPoint, exécutez la commande suivante dans le répertoire racine de votre projet. Cela a pour effet de démarrer le serveur web local (s’il n’est pas déjà en cours d’exécution) et d’ouvrir PowerPoint avec votre complément chargé.

     npm start
     

   • Pour tester votre complément dans PowerPoint sur un navigateur, 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. Remplacez "{url}" par l'URL d'un document PowerPoint sur votre OneDrive ou une bibliothèque Microsoft Office SharePoint Online sur laquelle vous disposez d'autorisations.

     Remarque

     Si vous développez sur un Mac, placez le {url} entre guillemets simples. Ne le faites pas sur Windows.

     npm run start:web -- --document {url}
     

     Les éléments suivants sont des exemples.

     • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si votre complément ne charge pas de version test dans le document, chargez-le manuellement en suivant les instructions fournies dans Charger manuellement une version test des compléments pour Office sur le Web.

3. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

4. Dans le volet Office, sélectionnez le bouton Get Slide Metadata (Obtenir les métadonnées de la diapositive) pour obtenir les métadonnées pour la diapositive sélectionnée. Les métadonnées de diapositive sont écrites dans la section Message sous les boutons du volet Office. Dans ce cas, le tableau slides figurant dans les métadonnées JSON contient un objet qui spécifie les éléments id, title et index de la diapositive sélectionnée. Si plusieurs diapositives étaient sélectionnées lorsque vous avez récupéré les métadonnées des diapositives, le tableau slides figurant dans les métadonnées JSON contiendrait un objet pour chaque diapositive sélectionnée.

   

Naviguer entre les diapositives

Procédez comme suit pour ajouter le code qui navigue entre les diapositives d’un document.

1. Dans le fichier taskpane.html , remplacez par TODO5 le balisage suivant. Ce balisage définit les quatre boutons de navigation qui s’afficheront dans le volet Office du complément.

   <button class="ms-Button" id="add-slides">Add Slides</button><br/><br/>
   <button class="ms-Button" id="go-to-first-slide">Go to First Slide</button><br/><br/>
   <button class="ms-Button" id="go-to-next-slide">Go to Next Slide</button><br/><br/>
   <button class="ms-Button" id="go-to-previous-slide">Go to Previous Slide</button><br/><br/>
   <button class="ms-Button" id="go-to-last-slide">Go to Last Slide</button><br/><br/>
   

2. Dans le fichier taskpane.js , remplacez par TODO8 le code suivant pour affecter les gestionnaires d’événements pour ajouter des diapositives et quatre boutons de navigation.

   document.getElementById("add-slides").onclick = () => tryCatch(addSlides);
   document.getElementById("go-to-first-slide").onclick = () => clearMessage(goToFirstSlide);
   document.getElementById("go-to-next-slide").onclick = () => clearMessage(goToNextSlide);
   document.getElementById("go-to-previous-slide").onclick = () => clearMessage(goToPreviousSlide);
   document.getElementById("go-to-last-slide").onclick = () => clearMessage(goToLastSlide);
   

3. Dans le fichier taskpane.js , remplacez par TODO9 le code suivant pour définir les addSlides fonctions de navigation et . Chacune de ces fonctions utilise la méthode goToByIdAsync pour sélectionner une diapositive en fonction de sa position dans le document (première, dernière, précédente et suivante).

   async function addSlides() {
     await PowerPoint.run(async function (context) {
       context.presentation.slides.add();
       context.presentation.slides.add();
   
       await context.sync();
   
       goToLastSlide();
       setMessage("Success: Slides added.");
     });
   }
   
   function goToFirstSlide() {
     Office.context.document.goToByIdAsync(Office.Index.First, Office.GoToType.Index, (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
         setMessage("Error: " + asyncResult.error.message);
       }
     });
   }
   
   function goToLastSlide() {
     Office.context.document.goToByIdAsync(Office.Index.Last, Office.GoToType.Index, (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
         setMessage("Error: " + asyncResult.error.message);
       }
     });
   }
   
   function goToPreviousSlide() {
     Office.context.document.goToByIdAsync(Office.Index.Previous, Office.GoToType.Index, (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
         setMessage("Error: " + asyncResult.error.message);
       }
     });
   }
   
   function goToNextSlide() {
     Office.context.document.goToByIdAsync(Office.Index.Next, Office.GoToType.Index, (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
         setMessage("Error: " + asyncResult.error.message);
       }
     });
   }
   

4. Enregistrez toutes vos modifications dans le projet.

Test du complément

1. Accédez au dossier racine du projet.

   cd "My Office Add-in"
   

2. Si le serveur web local n’est pas déjà en cours d’exécution, effectuez les étapes suivantes pour démarrer le serveur web local et charger une version test de votre complément.

   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.

   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
   

   • Pour tester votre complément dans PowerPoint, exécutez la commande suivante dans le répertoire racine de votre projet. Cela a pour effet de démarrer le serveur web local (s’il n’est pas déjà en cours d’exécution) et d’ouvrir PowerPoint avec votre complément chargé.

     npm start
     

   • Pour tester votre complément dans PowerPoint sur un navigateur, 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. Remplacez "{url}" par l'URL d'un document PowerPoint sur votre OneDrive ou une bibliothèque Microsoft Office SharePoint Online sur laquelle vous disposez d'autorisations.

     Remarque

     Si vous développez sur un Mac, placez le {url} entre guillemets simples. Ne le faites pas sur Windows.

     npm run start:web -- --document {url}
     

     Les éléments suivants sont des exemples.

     • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si votre complément ne charge pas de version test dans le document, chargez-le manuellement en suivant les instructions fournies dans Charger manuellement une version test des compléments pour Office sur le Web.

3. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

4. Dans le volet Office, choisissez le bouton Ajouter des diapositives . Deux nouvelles diapositives sont ajoutées au document et la dernière diapositive du document est sélectionnée et affichée.

   

5. Dans le volet Office, sélectionnez le bouton Go to First Slide (Aller à la première diapositive). La première diapositive du document est sélectionnée et affichée.

   

6. Dans le volet Office, sélectionnez le bouton Go to Next Slide (Aller à la diapositive suivante). La diapositive suivante du document est sélectionnée et affichée.

   

7. Dans le volet Office, sélectionnez le bouton Go to Previous Slide (Aller à la diapositive précédente). La diapositive précédente du document est sélectionnée et affichée.

   

8. Dans le volet Office, sélectionnez le bouton Go to Last Slide (Aller à la dernière diapositive). La dernière diapositive du document est sélectionnée et affichée.

   

9. Si le serveur web est en cours d’exécution, exécutez la commande suivante lorsque vous souhaitez arrêter le serveur.

   npm stop
   

Exemples de code

• Didacticiel de complément PowerPoint terminé : résultat de ce didacticiel.

Visual Studio

Conseil

Si vous souhaitez obtenir une version complète de ce didacticiel, accédez au référentiel d’exemples de compléments Office sur GitHub.

Conditions préalables

• Visual Studio 2019 ou version ultérieure, avec la charge de travail développement Office/SharePoint installée.

  Remarque

  Si vous avez déjà installé Visual Studio, utilisez le programme d'installation de Visual Studio pour vous assurer que la charge de travail de développement Office/SharePoint est installée.

• 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 à utiliser pour le développement 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éer votre projet de complément

Procédez comme suit pour créer un projet complément PowerPoint à l’aide de Visual Studio.

1. Choisissez Créer un nouveau projet.

2. À l’aide de la zone de recherche, entrez complément. Choisissez Complément web PowerPoint, puis sélectionnez Suivant.

3. Nommez le projet HelloWorld et sélectionnez Créer.

4. Dans la fenêtre de la boîte de dialogue Créer un complément Office, choisissez Ajouter de nouvelles fonctionnalités à PowerPoint, puis sélectionnez Terminer pour créer le projet.

5. Visual Studio crée une solution et ses deux projets apparaissent dans l’explorateur de solutions. Le fichier Home.html s’ouvre dans Visual Studio.

   

6. Les packages NuGet suivants doivent être installés. Installez-les sur le projet HelloWorldWeb à l’aide du Gestionnaire de package NuGet dans Visual Studio. Consultez l’aide Visual Studio pour obtenir des instructions. Le deuxième peut être installé automatiquement lorsque vous installez le premier.

   • Microsoft.AspNet.WebApi.WebHost
   • Microsoft.AspNet.WebApi.Core

   Importante

   Lorsque vous utilisez le Gestionnaire de package NuGet pour installer ces packages, n’installez pas la mise à jour recommandée vers jQuery. La version de jQuery installée avec votre solution Visual Studio correspond à l’appel jQuery dans les fichiers de solution.

7. Utilisez le Gestionnaire de package NuGet pour mettre à jour le package Newtonsoft.Json vers la version 13.0.3 ou ultérieure. Supprimez ensuite le fichier app.config s’il a été ajouté au projet HelloWorld .

Explorer la solution Visual Studio

Quand vous arrivez au bout de l’Assistant, Visual Studio crée une solution qui contient deux projets.

Project	Description
Projet de complément	Contient uniquement un fichier manifeste XML contenant tous les paramètres qui décrivent votre complément. Ces paramètres aident l’application Office à déterminer le moment où votre complément doit être activé et l’emplacement où il doit apparaître. Visual Studio génère le contenu de ce fichier pour vous permettre d’exécuter le projet et d’utiliser votre complément immédiatement. Modifiez ces paramètres à tout moment en modifiant le fichier XML.
Projet d’application web	Contient les pages de contenu de votre complément, notamment tous les fichiers et références de fichiers dont vous avez besoin pour développer des pages HTML et JavaScript compatibles avec Office. Pendant que vous développez votre complément, Visual Studio héberge l’application web sur votre serveur IIS local. Lorsque vous êtes prêt à publier le complément, vous devez déployer ce projet d’application web sur un serveur web.

Mise à jour du code

Modifiez le code de complément comme suit pour créer la structure que vous utiliserez pour implémenter la fonctionnalité de complément dans les étapes suivantes de ce didacticiel.

1. Home.html spécifie le code HTML qui s’affichera dans le volet Office du complément. Dans Home.html, localisez la balise div avec id="content-main", remplacez l’intégralité de la balise div avec le balisage suivant et enregistrez le fichier.

   <!-- TODO2: Create the content-header div. -->
   <div id="content-main">
       <div class="padding">
           <!-- TODO1: Create the insert-image button. -->
           <!-- TODO3: Create the insert-text button. -->
           <!-- TODO4: Create the get-slide-metadata button. -->
           <!-- TODO5: Create the add-slides and go-to-slide buttons. -->
       </div>
   </div>
   

2. Ouvrez le fichier Home.js à la racine du projet d’application web. Ce fichier spécifie le script pour le complément. Remplacez tout le contenu par le code suivant, puis enregistrez le fichier.

   (function () {
       "use strict";
   
       let messageBanner;
   
       Office.onReady(function () {
           $(document).ready(function () {
               // Initialize the FabricUI notification mechanism and hide it.
               const element = document.querySelector('.MessageBanner');
               messageBanner = new components.MessageBanner(element);
               messageBanner.hideBanner();
   
               // TODO1: Assign event handler for insert-image button.
               // TODO4: Assign event handler for insert-text button.
               // TODO6: Assign event handler for get-slide-metadata button.
               // TODO8: Assign event handlers for add-slides and the four navigation buttons.
           });
       });
   
       // TODO2: Define the insertImage function.
   
       // TODO3: Define the insertImageFromBase64String function.
   
       // TODO5: Define the insertText function.
   
       // TODO7: Define the getSlideMetadata function.
   
       // TODO9: Define the addSlides and navigation functions.
   
       // Helper function for displaying notifications.
       function showNotification(header, content) {
           $("#notification-header").text(header);
           $("#notification-body").text(content);
           messageBanner.showBanner();
           messageBanner.toggleExpansion();
       }
   })();
   

Insérer une image

Procédez comme suit pour ajouter le code qui récupère la photoBing de la journée et insère l’image dans une diapositive.

1. À l’aide de l’explorateur de solutions, ajoutez un nouveau dossier nommé Controllers au projet HelloWorldWeb.

   

2. Cliquez avec le bouton droit sur le dossier Contrôleurs et sélectionnez Ajouter un>nouvel élément généré automatiquement...

3. Dans la fenêtre de boîte de dialogue Ajouter une structure, sélectionnez Contrôleur Web API 2 - Vide et choisissez le bouton Ajouter.

4. Dans la fenêtre de boîte de dialogue Ajouter un contrôleur, saisissez PhotoController pour le nom du contrôleur, puis sélectionnez le bouton Ajouter. Visual Studio crée et ouvre le fichier PhotoController.cs.

   Importante

   Le processus de génération automatique ne se termine pas correctement sur certaines versions de Visual Studio après la version 16.10.3. Si vous avez les fichiers Global.asax et ./App_Start/WebApiConfig.cs , passez à l’étape 6.

   

5. S’il vous manque des fichiers de génération automatique du projet HelloWorldWeb , ajoutez-les comme suit.

   1. À l’aide de Explorateur de solutions, ajoutez un nouveau dossier nommé App_Start au projet HelloWorldWeb.

   2. Cliquez avec le bouton droit sur le dossier App_Start et sélectionnez Ajouter une>classe....

   3. Dans la boîte de dialogue Ajouter un nouvel élément , nommez le fichier WebApiConfig.cs puis choisissez le bouton Ajouter .

   4. Remplacez tout le contenu du fichier WebApiConfig.cs par le code suivant.

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.Http;
      
      namespace HelloWorldWeb.App_Start
      {
          public static class WebApiConfig
          {
              public static void Register(HttpConfiguration config)
              {
                  config.MapHttpAttributeRoutes();
      
                  config.Routes.MapHttpRoute(
                      name: "DefaultApi",
                      routeTemplate: "api/{controller}/{id}",
                      defaults: new { id = RouteParameter.Optional }
                  );
              }
          }
      }
      

   5. Dans la Explorateur de solutions, cliquez avec le bouton droit sur le projet HelloWorldWeb, puis sélectionnez Ajouter un>nouvel élément....

   6. Dans la boîte de dialogue Ajouter un nouvel élément , recherchez « global », sélectionnez Classe d’application globale, puis cliquez sur le bouton Ajouter . Par défaut, le fichier est nommé Global.asax.

   7. Remplacez tout le contenu du fichier Global.asax.cs par le code suivant.

      using HelloWorldWeb.App_Start;
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.Http;
      using System.Web.Security;
      using System.Web.SessionState;
      
      namespace HelloWorldWeb
      {
          public class WebApiApplication : System.Web.HttpApplication
          {
              protected void Application_Start()
              {
                  GlobalConfiguration.Configure(WebApiConfig.Register);
              }
          }
      }
      

   8. Dans le Explorateur de solutions, cliquez avec le bouton droit sur le fichier Global.asax et choisissez Afficher le balisage.

   9. Remplacez tout le contenu du fichier Global.asax par le code suivant.

      <%@ Application Codebehind="Global.asax.cs" Inherits="HelloWorldWeb.WebApiApplication" Language="C#" %>
      

6. Remplacez tout le contenu du fichier PhotoController.cs par le code suivant qui appelle le service Bing pour récupérer la photo du jour sous la forme d’une chaîne encodée en Base64. Lorsque vous utilisez l’API JavaScript Office pour insérer une image dans un document, les données d’image doivent être spécifiées sous la forme d’une chaîne encodée en Base64.

   using System;
   using System.IO;
   using System.Net;
   using System.Text;
   using System.Web.Http;
   using System.Xml;
   
   namespace HelloWorldWeb.Controllers
   {
       public class PhotoController : ApiController
       {
           public string Get()
           {
               string url = "http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1";
   
               // Create the request.
               HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
               WebResponse response = request.GetResponse();
   
               using (Stream responseStream = response.GetResponseStream())
               {
                   // Process the result.
                   StreamReader reader = new StreamReader(responseStream, Encoding.UTF8);
                   string result = reader.ReadToEnd();
   
                   // Parse the XML response and get the URL.
                   XmlDocument doc = new XmlDocument();
                   doc.LoadXml(result);
                   string photoURL = "http://bing.com" + doc.SelectSingleNode("/images/image/url").InnerText;
   
                   // Fetch the photo and return it as a Base64-encoded string.
                   return getPhotoFromURL(photoURL);
               }
           }
   
           private string getPhotoFromURL(string imageURL)
           {
               var webClient = new WebClient();
               byte[] imageBytes = webClient.DownloadData(imageURL);
               return Convert.ToBase64String(imageBytes);
           }
       }
   }
   

7. Dans le fichier Home.html, remplacez TODO1 par le balisage suivant. Ce balisage définit le bouton Insert Image (Insérer une image) qui s’affichera dans volet Office du complément.

   <button class="Button Button--primary" id="insert-image">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Insert Image</span>
       <span class="Button-description">Gets the photo of the day that shows on the Bing home page and adds it to the slide.</span>
   </button>
   

8. Dans le fichier Home.js, remplacez TODO1 par le code suivant pour attribuer le gestionnaire d’événements pour le bouton Insert Image (Insérer une image).

   $('#insert-image').on("click", insertImage);
   

9. Dans le fichier Home.js, remplacez TODO2 par le code suivant pour définir la fonction insertImage. Cette fonction extrait l’image du service web Bing, puis appelle la fonction insertImageFromBase64String pour insérer cette image dans le document.

   function insertImage() {
       // Get image from web service (as a Base64-encoded string).
       $.ajax({
           url: "/api/photo/",
           dataType: "text",
           success: function (result) {
               insertImageFromBase64String(result);
           }, error: function (xhr, status, error) {
               showNotification("Error", "Oops, something went wrong.");
           }
       });
   }
   

10. Dans le fichier Home.js, remplacez TODO3 par le code suivant pour définir la fonction insertImageFromBase64String. Cette fonction utilise l’API JavaScript Office pour insérer l’image dans le document. Remarque :

    • l’option coercionType spécifiée comme deuxième paramètre de la demande setSelectedDataAsync indique le type de données insérées.

    • L’objet asyncResult encapsule le résultat de la demande setSelectedDataAsync, y compris les informations d’état et d’erreur quand la demande a échoué.

    function insertImageFromBase64String(image) {
        // Call Office.js to insert the image into the document.
        Office.context.document.setSelectedDataAsync(image, {
            coercionType: Office.CoercionType.Image
        },
            function (asyncResult) {
                if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                    showNotification("Error", asyncResult.error.message);
                }
            });
    }
    

Test du complément

1. À l’aide de Visual Studio, testez le complément PowerPoint nouvellement créé en appuyant sur F5 ou en choisissant le bouton Démarrer pour lancer PowerPoint avec le bouton Afficher le complément Volet tâches affiché sur le ruban. Le complément est hébergé localement sur IIS.

   

2. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

3. Dans le volet Office, sélectionnez le bouton Insert Image (Insérer une image) permettant d’ajouter la photo Bing du jour sur la diapositive active.

   

   Remarque

   Si vous obtenez une erreur « Impossible de trouver le fichier [...] \bin\roslyn\csc.exe », puis procédez comme suit :

   1. Ouvrez le fichier .\Web.config .
   2. Recherchez le nœud du <compilateur> pour le .cs extension, puis supprimez l’attribut type et sa valeur.
   3. Enregistrez le fichier.

4. Dans Visual Studio, arrêtez le complément en appuyant sur Maj+F5 ou en choisissant le bouton Arrêter . PowerPoint se ferme automatiquement lorsque le complément est arrêté.

   

Personnaliser les éléments de l’interface utilisateur

Procédez comme suit pour ajouter des marques de révision qui personnalisent l’interface utilisateur du volet de tâche.

1. Dans le fichier Home.html, remplacez TODO2 par le balisage suivant pour ajouter une section d’en-tête et un titre au volet de tâches. Remarque :

   • Les styles qui commencent par ms-sont définis par Fabric Core dans les modules complémentaires d'Office, une structure frontale JavaScript permettant de créer des expériences utilisateur pour Office. Le fichier Home.html inclut une référence à la feuille de style Fabric Core.

   <div id="content-header">
       <div class="ms-Grid ms-bgColor-neutralPrimary">
           <div class="ms-Grid-row">
               <div class="padding ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12"> <div class="ms-font-xl ms-fontColor-white ms-fontWeight-semibold">My PowerPoint add-in</div></div>
           </div>
       </div>
   </div>
   

2. Dans le fichier Home.html, recherchez la balise div avec class="footer" et supprimez toute la balise div pour retirer la section de pied de page du volet Office.

Test du complément

1. À l’aide de Visual Studio, testez le complément PowerPoint en appuyant sur F5 ou en choisissant le bouton Démarrer pour lancer PowerPoint avec le bouton Afficher le complément volet Tâches affiché sur le ruban. Le complément est hébergé localement sur IIS.

   

2. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

3. Notez que le volet Office contient désormais une section d’en-tête et un titre, et ne contient plus de section de pied de page.

   

4. Dans Visual Studio, arrêtez le complément en appuyant sur Maj+F5 ou en choisissant le bouton Arrêter . PowerPoint se ferme automatiquement lorsque le complément est arrêté.

   

Insérer du texte

Procédez comme suit pour ajouter le code qui insère le texte dans la diapositive titre qui contient l’imageBing de la journée.

1. Dans le fichier Home.html, remplacez TODO3 par le balisage suivant. Ce balisage définit le bouton Insert Text (Insérer du texte) qui s’affiche dans le volet Office du complément.

       <br /><br />
       <button class="Button Button--primary" id="insert-text">
           <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
           <span class="Button-label">Insert Text</span>
           <span class="Button-description">Inserts text into the slide.</span>
       </button>
   

2. Dans le fichier Home.js, remplacez TODO4 par le code suivant pour attribuer le gestionnaire d’événements pour le bouton Insert Text (Insérer du texte).

   $('#insert-text').on("click", insertText);
   

3. Dans le fichier Home.js, remplacez TODO5 par le code suivant pour définir la fonction insertText. Cette fonction insère du texte dans la diapositive active.

   function insertText() {
       Office.context.document.setSelectedDataAsync('Hello World!',
           function (asyncResult) {
               if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                   showNotification("Error", asyncResult.error.message);
               }
           });
   }
   

Test du complément

1. À l’aide de Visual Studio, testez le complément en appuyant sur F5 ou en choisissant le bouton Démarrer pour lancer PowerPoint avec le bouton Afficher le complément de volet tâches affiché sur le ruban. Le complément est hébergé localement sur IIS.

   

2. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

3. Dans le volet Office, sélectionnez le bouton Insert Image (Insérer une image) pour ajouter la photo Bing du jour sur la diapositive active et choisissez une mise en page pour la diapositive qui contient une zone de texte pour le titre.

   

4. Placez votre curseur dans la zone de texte sur la diapositive de titre, dans le volet Office, sélectionnez le bouton Insert Text (Insérer du texte) permettant d’ajouter du texte à la diapositive.

   

5. Dans Visual Studio, arrêtez le complément en appuyant sur Maj+F5 ou en choisissant le bouton Arrêter . PowerPoint se ferme automatiquement lorsque le complément est arrêté.

   

Obtenir les métadonnées des diapositives

Procédez comme suit pour ajouter du code qui extrait les métadonnées pour la diapositive sélectionnée.

1. Dans le fichier Home.html, remplacez TODO4 par le balisage suivant. Ce balisage définit le bouton Get Slide Metadata (Obtenir les métadonnées de la diapositive) qui s’affichera dans le volet Office du complément.

   <br /><br />
   <button class="Button Button--primary" id="get-slide-metadata">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Get Slide Metadata</span>
       <span class="Button-description">Gets metadata for the selected slide(s).</span>
   </button>
   

2. Dans le fichier Home.js, remplacez TODO6 par le code suivant pour attribuer le gestionnaire d’événements pour le bouton Get Slide Metadata (Obtenir les métadonnées de la diapositive).

   $('#get-slide-metadata').on("click", getSlideMetadata);
   

3. Dans le fichier Home.js, remplacez TODO7 par le code suivant pour définir la fonction getSlideMetadata. Cette fonction extrait les métadonnées pour la ou les diapositives sélectionnée(s), et les écrit dans une fenêtre de boîte de dialogue contextuelle dans le volet Office du complément.

   function getSlideMetadata() {
       Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange,
           function (asyncResult) {
               if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                   showNotification("Error", asyncResult.error.message);
               } else {
                   showNotification("Metadata for selected slide(s):", JSON.stringify(asyncResult.value), null, 2);
               }
           }
       );
   }
   

Test du complément

1. À l’aide de Visual Studio, testez le complément en appuyant sur F5 ou en choisissant le bouton Démarrer pour lancer PowerPoint avec le bouton Afficher le complément de volet tâches affiché sur le ruban. Le complément est hébergé localement sur IIS.

   

2. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

3. Dans le volet Office, sélectionnez le bouton Get Slide Metadata (Obtenir les métadonnées de la diapositive) pour obtenir les métadonnées pour la diapositive sélectionnée. Les métadonnées de la diapositive sont écrites dans la fenêtre de boîte de dialogue contextuelle en bas du volet Office. Dans ce cas, le tableau slides figurant dans les métadonnées JSON contient un objet qui spécifie les éléments id, title et index de la diapositive sélectionnée. Si plusieurs diapositives étaient sélectionnées lorsque vous avez récupéré les métadonnées des diapositives, le tableau slides figurant dans les métadonnées JSON contiendrait un objet pour chaque diapositive sélectionnée.

   

4. Dans Visual Studio, arrêtez le complément en appuyant sur Maj+F5 ou en choisissant le bouton Arrêter . PowerPoint se ferme automatiquement lorsque le complément est arrêté.

   

Naviguer entre les diapositives

Procédez comme suit pour ajouter le code qui navigue entre les diapositives d’un document.

1. Dans le fichier Home.html, remplacez TODO5 par le balisage suivant. Ce balisage définit les quatre boutons de navigation qui s’afficheront dans le volet Office du complément.

   <br /><br />
   <button class="Button Button--primary" id="add-slides">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Add Slides</span>
       <span class="Button-description">Adds 2 slides.</span>
   </button>
   <br /><br />
   <button class="Button Button--primary" id="go-to-first-slide">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Go to First Slide</span>
       <span class="Button-description">Go to the first slide.</span>
   </button>
   <br /><br />
   <button class="Button Button--primary" id="go-to-next-slide">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Go to Next Slide</span>
       <span class="Button-description">Go to the next slide.</span>
   </button>
   <br /><br />
   <button class="Button Button--primary" id="go-to-previous-slide">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Go to Previous Slide</span>
       <span class="Button-description">Go to the previous slide.</span>
   </button>
   <br /><br />
   <button class="Button Button--primary" id="go-to-last-slide">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Go to Last Slide</span>
       <span class="Button-description">Go to the last slide.</span>
   </button>
   

2. Dans le fichier Home.js , remplacez par TODO8 le code suivant pour affecter les gestionnaires d’événements pour ajouter des diapositives et quatre boutons de navigation.

   $('#add-slides').on("click", addSlides);
   $('#go-to-first-slide').on("click", goToFirstSlide);
   $('#go-to-next-slide').on("click", goToNextSlide);
   $('#go-to-previous-slide').on("click", goToPreviousSlide);
   $('#go-to-last-slide').on("click", goToLastSlide);
   

3. Dans le fichier Home.js , remplacez par TODO9 le code suivant pour définir les addSlides fonctions de navigation et . Chacune de ces fonctions utilise la méthode goToByIdAsync pour sélectionner une diapositive en fonction de sa position dans le document (première, dernière, précédente et suivante).

   async function addSlides() {
       await PowerPoint.run(async function (context) {
           context.presentation.slides.add();
           context.presentation.slides.add();
   
           await context.sync();
   
           showNotification("Success", "Slides added.");
           goToLastSlide();
       });
   }
   
   function goToFirstSlide() {
       Office.context.document.goToByIdAsync(Office.Index.First, Office.GoToType.Index,
           function (asyncResult) {
               if (asyncResult.status == "failed") {
                   showNotification("Error", asyncResult.error.message);
               }
           });
   }
   
   function goToLastSlide() {
       Office.context.document.goToByIdAsync(Office.Index.Last, Office.GoToType.Index,
           function (asyncResult) {
               if (asyncResult.status == "failed") {
                   showNotification("Error", asyncResult.error.message);
               }
           });
   }
   
   function goToPreviousSlide() {
       Office.context.document.goToByIdAsync(Office.Index.Previous, Office.GoToType.Index,
           function (asyncResult) {
               if (asyncResult.status == "failed") {
                   showNotification("Error", asyncResult.error.message);
               }
           });
   }
   
   function goToNextSlide() {
       Office.context.document.goToByIdAsync(Office.Index.Next, Office.GoToType.Index,
           function (asyncResult) {
               if (asyncResult.status == "failed") {
                   showNotification("Error", asyncResult.error.message);
               }
           });
   }
   

Test du complément

1. À l’aide de Visual Studio, testez le complément en appuyant sur F5 ou en choisissant le bouton Démarrer pour lancer PowerPoint avec le bouton Afficher le complément de volet tâches affiché sur le ruban. Le complément est hébergé localement sur IIS.

   

2. Si le volet Office du complément n’est pas déjà ouvert dans PowerPoint, sélectionnez le bouton Afficher le volet Des tâches dans le ruban pour l’ouvrir.

   

3. Dans le volet Office, choisissez le bouton Ajouter des diapositives . Deux nouvelles diapositives sont ajoutées au document et la dernière diapositive du document est sélectionnée et affichée.

   

4. Dans le volet Office, sélectionnez le bouton Go to First Slide (Aller à la première diapositive). La première diapositive du document est sélectionnée et affichée.

   

5. Dans le volet Office, sélectionnez le bouton Go to Next Slide (Aller à la diapositive suivante). La diapositive suivante du document est sélectionnée et affichée.

   

6. Dans le volet Office, sélectionnez le bouton Go to Previous Slide (Aller à la diapositive précédente). La diapositive précédente du document est sélectionnée et affichée.

   

7. Dans le volet Office, sélectionnez le bouton Go to Last Slide (Aller à la dernière diapositive). La dernière diapositive du document est sélectionnée et affichée.

   

8. Dans Visual Studio, arrêtez le complément en appuyant sur Maj+F5 ou en choisissant le bouton Arrêter . PowerPoint se ferme automatiquement lorsque le complément est arrêté.

   

Exemples de code

• Didacticiel de complément PowerPoint terminé : résultat de ce didacticiel.

Étapes suivantes

Dans ce didacticiel, vous allez créer un complément PowerPoint qui insère une image, insère du texte, obtient les métadonnées des diapositives et navigue entre les diapositives. Pour en savoir plus sur la création de compléments PowerPoint, passez à l’article suivant.

Vue d’ensemble des compléments PowerPoint

Voir aussi

• Vue d’ensemble de la plateforme des compléments Office
• Développement de compléments Office