Partager via

Tutoriel : Créer un complément du volet Office PowerPoint avec Visual Studio

  • Article

Dans ce tutoriel, vous allez 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

Conseil

Si vous souhaitez obtenir une version complète de ce didacticiel, consultez le dépôt d’exemples de compléments Office sur GitHub.

Configuration requise

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.

    La fenêtre Visual Studio Solution Explorer affichant HelloWorld et HelloWorldWeb, les deux projets de la solution HelloWorld.

  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 de complément au format XML, qui contient 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.

    La fenêtre Visual Studio Solution Explorer affiche le dossier Controllers mis en surbrillance dans le projet HelloWorldWeb.

  2. Cliquez avec le bouton droit (ou sélectionnez de façon longue) sur le dossier Contrôleurs, puis 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.

    Fenêtre Explorateur de solutions Visual Studio affichant les fichiers générés automatiquement en surbrillance dans le projet HelloWorldWeb.

  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 (ou sélectionnez de façon longue) sur le dossier App_Start , puis 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 le Explorateur de solutions, cliquez avec le bouton droit (ou sélectionnez et maintenez la touche) 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 (ou sélectionnez et maintenez la touche) sur le fichier Global.asax, puis 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.

    Le bouton Démarrer mis en surbrillance dans Visual Studio.

  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.

    Le bouton Afficher le volet des tâches mis en surbrillance sur le ruban Accueil de PowerPoint.

  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.

    Le complément PowerPoint avec le bouton Insérer une image en surbrillance.

    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é.

    Le bouton Arrêter mis en surbrillance dans Visual Studio.

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.

    Le bouton Démarrer mis en surbrillance dans Visual Studio.

  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.

    Le bouton Afficher le volet Office mis en évidence sur le ruban d’accueil PowerPoint.

  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.

    Le complément PowerPoint avec le bouton Insérer une image.

  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é.

    Le bouton Arrêter mis en surbrillance dans Visual Studio.

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.

    Le bouton Démarrer mis en surbrillance dans Visual Studio.

  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.

    Bouton Afficher le volet Office du ruban Accueil dans PowerPoint.

  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.

    La diapositive titre de PowerPoint sélectionnée et le bouton Insérer une image mis en surbrillance dans le complément.

  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.

    La diapositive titre de PowerPoint sélectionnée avec le bouton Insérer du texte mis en surbrillance dans le complément.

  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é.

    Le bouton Arrêter mis en surbrillance dans Visual Studio.

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 slides.</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 récupère les métadonnées des diapositives sélectionnées 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 slides:", 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.

    Le bouton Démarrer dans Visual Studio.

  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.

    Le bouton Afficher le volet des tâches sur le ruban d'accueil de PowerPoint.

  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.

    Le bouton Obtenir les métadonnées de la diapositive mis en surbrillance dans le complément.

  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é.

    Le bouton Arrêter dans Visual Studio.

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.

    Le bouton Démarrer mis en évidence sur la barre d’outils de Visual Studio.

  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.

    Le bouton Afficher le volet des tâches mis en surbrillance sur le ruban Accueil de PowerPoint.

  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.

    Bouton Ajouter des diapositives mis en évidence dans le complément.

  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.

    Le bouton Aller à la première diapositive mis en surbrillance dans le complément.

  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.

    Le bouton Atteindre la diapositive suivante mis en surbrillance dans le complément.

  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.

    Le bouton Accéder à la diapositive précédente mis en surbrillance dans le complément.

  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.

    Le bouton Atteindre la dernière diapositive mis en surbrillance dans le complément.

  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é.

    Le bouton Arrêter mis en surbrillance dans la barre d’outils Visual Studio.

Exemples de code

Étapes suivantes

Dans ce tutoriel, vous avez créé 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 aux articles suivants.

Vue d’ensemble des compléments PowerPoint

Développement de compléments Office avec Visual Studio

Voir aussi