Tutorial: Criar um Suplemento do Painel de Tarefas

Neste tutorial, você criará um suplemento do painel de tarefas do PowerPoint que:

Criar o suplemento

Pré-requisitos

• Node.js (a versão LTS ativa mais recente). Visite o site doNode.js para baixar e instalar a versão correta para o seu sistema operacional.

• A versão mais recente do Yeoman e do Yeoman gerador de Suplementos do Office. Para instalar essas ferramentas globalmente, execute o seguinte comando por meio do prompt de comando.

  npm install -g yo generator-office
  

  Observação

  Mesmo se você já instalou o gerador Yeoman, recomendamos atualizar seu pacote para a versão mais recente do npm.

• Office conectado a uma assinatura Microsoft 365 (incluindo o Office na web).

  Observação

  Se você ainda não tem o Office, você pode se qualificar para uma assinatura de desenvolvedor do Microsoft 365 E5 por meio do Programa de Desenvolvedor do Microsoft 365. Para obter detalhes, consulte as Perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou adquirir um plano do Microsoft 365.

Criar o projeto do suplemento

Decida o tipo de manifesto que você gostaria de usar, o manifesto unificado para Microsoft 365 ou o manifesto somente do suplemento. Para saber mais sobre eles, consulte Manifesto de suplementos do Office.

yo office

yo office

Depois que você concluir o assistente, o gerador criará o projeto e instalará os componentes Node de suporte.

Concluir instalação

1. Navegue até o diretório raiz do projeto.

   cd "My Office Add-in"
   

2. Abra o projeto no VS Code ou no seu editor de código preferido.

   Dica

   No Windows, navegue até o diretório raiz do projeto por meio da linha de comando e, em seguida, insira code . para abrir essa pasta no VS Code. No Mac, você precisará adicionar o comando code ao caminho antes de poder usá-lo para abrir a pasta do projeto no VS Code.

Inserir uma imagem

Conclua as etapas a seguir para adicionar código que insere uma imagem em um slide.

1. Abra o projeto em seu editor de código.

2. Na raiz do projeto, crie um novo arquivo chamado base64Image.js.

3. Abra o base64Image.js de arquivos e adicione o seguinte código para especificar a cadeia de caracteres codificada em Base64 que representa uma imagem.

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

4. Abra o arquivo ./src/taskpane/taskpane.html. Ele contém a marcação HTML para o painel de tarefas.

5. Localize o elemento <body>. Substitua-a pela marcação a seguir e salve o arquivo.

   <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. No arquivotaskpane.html , substitua TODO1 pela seguinte marcação. Essa marcação define o botão Inserir Imagem que aparecerá no painel de tarefas do suplemento.

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

7. Abra o arquivo ./src/taskpane/taskpane.ts. Este arquivo contém o código da API JavaScript do Office que facilita a interação entre o painel de tarefas e o aplicativo do cliente Office. Substitua todo o conteúdo pelo código a seguir e salve o arquivo.

   /*
    * 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. No arquivo taskpane.ts acima da chamada de Office.onReady função próximo à parte superior do arquivo, substitua TODO1 pelo código a seguir. Esse código importa a variável que você definida anteriormente no arquivo ./base64Image.js.

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

9. No arquivo taskpane.ts , substitua TODO2 pelo código a seguir para atribuir o manipulador de eventos para o botão Inserir Imagem .

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

10. No arquivo taskpane.ts , substitua TODO3 pelo código a seguir para definir a insertImage função. Esta função usa a API JavaScript do Office para inserir a imagem no documento. Observação:

    • A opção coercionType especificada como segundo parâmetro da solicitação setSelectedDataAsync indica o tipo de dados inserido.

    • O objeto asyncResult encapsula o resultado da solicitação setSelectedDataAsync, incluindo informações de status e de erro caso a solicitação tenha falhado.

    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. Salve todas as alterações no projeto.

Testar o suplemento

1. Navegue até a pasta raiz do projeto.

   cd "My Office Add-in"
   

2. Conclua as etapas a seguir para iniciar o servidor Web local e fazer o sideload do seu suplemento.

   Observação

   • Os suplementos do Office devem usar HTTPS, não HTTP, mesmo durante o desenvolvimento. Se você for solicitado a instalar um certificado depois de executar um dos comandos a seguir, aceite a solicitação para instalar o certificado fornecido pelo gerador Yeoman. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta é a primeira vez que você desenvolve um Suplemento do Office em seu computador, você pode ser solicitado na linha de comando a conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback de localhost para o Microsoft Edge WebView?"). Quando solicitado, entre Y para permitir a isenção. Observe que você precisará de privilégios de administrador para permitir a isenção. Depois de permitido, você não deve ser solicitado a fornecer uma isenção ao fazer sideload de Suplementos do Office no futuro (a menos que remova a isenção do seu computador). Para saber mais, consulte "Não é possível abrir este suplemento do host local" ao carregar um suplemento do Office ou usar o Fiddler.

     

   • Quando você usa o gerador Yeoman pela primeira vez para desenvolver um suplemento do Office, seu navegador padrão abre uma janela onde você será solicitado a entrar em sua conta do Microsoft 365. Se uma janela de entrada não aparecer e você encontrar um erro de sideload ou tempo limite de login, execute atk auth login m365.

   Dica

   Se você estiver testando o seu suplemento no Mac, execute o seguinte comando antes de continuar. O servidor Web local é iniciado quando este comando é executado.

   npm run dev-server
   

   • Para testar seu suplemento no PowerPoint, execute o seguinte comando no diretório raiz do seu projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o PowerPoint com o suplemento carregado.

     npm start
     

   • Para testar seu suplemento no PowerPoint em um navegador, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua "{url}" pelo URL de um documento do PowerPoint no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

     Observação

     Se você estiver desenvolvendo em um Mac, coloque entre {url} aspas simples. Não faça isso no Windows.

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

     Eis alguns exemplos.

     • 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

     Se o suplemento não fizer sideload no documento, faça o sideload manualmente seguindo as instruções em Fazer sideload manual de suplementos para o Office na Web.

3. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, escolha a guia Página Inicial e, em seguida, escolha o botão Mostrar Painel de Tarefas na faixa de opções para abrir o painel de tarefas do suplemento.

   

4. No painel de tarefas, escolha o botão Inserir Imagem para adicionar a imagem ao slide atual.

   

5. Quando você quiser parar o servidor Web local e desinstalar o suplemento, siga as instruções aplicáveis:

   • Para parar o servidor, execute o seguinte comando. Se você usou npm start, o comando a seguir também desinstala o suplemento.

     npm stop
     

   • Se você carregou manualmente o suplemento, consulte Remover um suplemento com sideload.

Personalizar elementos da interface do usuário

Conclua as seguintes etapas para adicionar a marca que personaliza o painel de tarefas da interface do usuário.

1. No arquivo taskpane.html , substitua TODO2 e a seção de cabeçalho atual com a seguinte marcação para atualizar a seção de cabeçalho e o título no painel de tarefas. Observação:

   • Os estilos que começam com ms- são definidos pelo Fabric Core em Suplementos do Office , uma estrutura de front-end JavaScript para construir experiências do usuário para o Office. O arquivo taskpane.html inclui uma referência à folha de estilo do Núcleo de Estrutura.

   <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. Salve todas as alterações no projeto.

Testar o suplemento

1. Se o servidor Web local ainda não estiver em execução, conclua as etapas a seguir para iniciar o servidor Web local e fazer o sideload do suplemento.

   Observação

   • Os suplementos do Office devem usar HTTPS, não HTTP, mesmo durante o desenvolvimento. Se você for solicitado a instalar um certificado depois de executar um dos comandos a seguir, aceite a solicitação para instalar o certificado fornecido pelo gerador Yeoman. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta é a primeira vez que você desenvolve um Suplemento do Office em seu computador, você pode ser solicitado na linha de comando a conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback de localhost para o Microsoft Edge WebView?"). Quando solicitado, entre Y para permitir a isenção. Observe que você precisará de privilégios de administrador para permitir a isenção. Depois de permitido, você não deve ser solicitado a fornecer uma isenção ao fazer sideload de Suplementos do Office no futuro (a menos que remova a isenção do seu computador). Para saber mais, consulte "Não é possível abrir este suplemento do host local" ao carregar um suplemento do Office ou usar o Fiddler.

     

   • Quando você usa o gerador Yeoman pela primeira vez para desenvolver um suplemento do Office, seu navegador padrão abre uma janela onde você será solicitado a entrar em sua conta do Microsoft 365. Se uma janela de entrada não aparecer e você encontrar um erro de sideload ou tempo limite de login, execute atk auth login m365.

   Dica

   Se você estiver testando o seu suplemento no Mac, execute o seguinte comando antes de continuar. O servidor Web local é iniciado quando este comando é executado.

   npm run dev-server
   

   • Para testar seu suplemento no PowerPoint, execute o seguinte comando no diretório raiz do seu projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o PowerPoint com o suplemento carregado.

     npm start
     

   • Para testar seu suplemento no PowerPoint em um navegador, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua "{url}" pelo URL de um documento do PowerPoint no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

     Observação

     Se você estiver desenvolvendo em um Mac, coloque entre {url} aspas simples. Não faça isso no Windows.

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

     Eis alguns exemplos.

     • 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

     Se o suplemento não fizer sideload no documento, faça o sideload manualmente seguindo as instruções em Fazer sideload manual de suplementos para o Office na Web.

2. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

   

3. Observe que o painel de tarefas agora contém uma seção de cabeçalho e um título atualizados.

   

Inserir texto

Conclua as etapas a seguir para adicionar o código que insere texto no slide de título que contém uma imagem.

1. No arquivotaskpane.html , substitua TODO3 pela seguinte marcação. Essa marcação define o botão Inserir Texto que aparecerá no painel de tarefas do suplemento.

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

2. No arquivo taskpane.ts , substitua TODO4 pelo código a seguir para atribuir o manipulador de eventos para o botão Inserir Texto .

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

3. No arquivo taskpane.ts , substitua TODO5 pelo código a seguir para definir a insertText função. Esta função insere texto no slide atual.

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

4. Salve todas as alterações no projeto.

Testar o suplemento

1. Navegue até a pasta raiz do projeto.

   cd "My Office Add-in"
   

2. Se o servidor Web local ainda não estiver em execução, conclua as etapas a seguir para iniciar o servidor Web local e fazer o sideload do suplemento.

   Observação

   • Os suplementos do Office devem usar HTTPS, não HTTP, mesmo durante o desenvolvimento. Se você for solicitado a instalar um certificado depois de executar um dos comandos a seguir, aceite a solicitação para instalar o certificado fornecido pelo gerador Yeoman. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta é a primeira vez que você desenvolve um Suplemento do Office em seu computador, você pode ser solicitado na linha de comando a conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback de localhost para o Microsoft Edge WebView?"). Quando solicitado, entre Y para permitir a isenção. Observe que você precisará de privilégios de administrador para permitir a isenção. Depois de permitido, você não deve ser solicitado a fornecer uma isenção ao fazer sideload de Suplementos do Office no futuro (a menos que remova a isenção do seu computador). Para saber mais, consulte "Não é possível abrir este suplemento do host local" ao carregar um suplemento do Office ou usar o Fiddler.

     

   • Quando você usa o gerador Yeoman pela primeira vez para desenvolver um suplemento do Office, seu navegador padrão abre uma janela onde você será solicitado a entrar em sua conta do Microsoft 365. Se uma janela de entrada não aparecer e você encontrar um erro de sideload ou tempo limite de login, execute atk auth login m365.

   Dica

   Se você estiver testando o seu suplemento no Mac, execute o seguinte comando antes de continuar. O servidor Web local é iniciado quando este comando é executado.

   npm run dev-server
   

   • Para testar seu suplemento no PowerPoint, execute o seguinte comando no diretório raiz do seu projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o PowerPoint com o suplemento carregado.

     npm start
     

   • Para testar seu suplemento no PowerPoint em um navegador, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua "{url}" pelo URL de um documento do PowerPoint no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

     Observação

     Se você estiver desenvolvendo em um Mac, coloque entre {url} aspas simples. Não faça isso no Windows.

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

     Eis alguns exemplos.

     • 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

     Se o suplemento não fizer sideload no documento, faça o sideload manualmente seguindo as instruções em Fazer sideload manual de suplementos para o Office na Web.

3. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

   

4. No painel de tarefas, escolha o botão Inserir Imagem para adicionar a imagem ao slide atual e, em seguida, escolha um design para o slide que contenha uma caixa de texto para o título.

   

   

5. Coloque o cursor na caixa de texto no slide de título e depois, no painel de tarefas, escolha o botão Inserir Texto para adicionar texto ao slide.

   

Obter metadados do slide

Conclua as seguintes etapas para adicionar o código que recupera os metadados para o slide selecionado.

1. No arquivotaskpane.html , substitua TODO4 pela seguinte marcação. Essa marcação define o botão Obter metadados do slide que aparecerá no painel de tarefas do suplemento.

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

2. No arquivo taskpane.ts , substitua TODO6 pelo código a seguir para atribuir o manipulador de eventos para o botão Obter Metadados de Slide .

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

3. No arquivo taskpane.ts , substitua TODO7 pelo código a seguir para definir a getSlideMetadata função. Essa função recupera metadados para os slides selecionados e os grava na seção Mensagem no painel de tarefas do suplemento.

   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. Salve todas as alterações no projeto.

Testar o suplemento

1. Navegue até a pasta raiz do projeto.

   cd "My Office Add-in"
   

2. Se o servidor Web local ainda não estiver em execução, conclua as etapas a seguir para iniciar o servidor Web local e fazer o sideload do suplemento.

   Observação

   • Os suplementos do Office devem usar HTTPS, não HTTP, mesmo durante o desenvolvimento. Se você for solicitado a instalar um certificado depois de executar um dos comandos a seguir, aceite a solicitação para instalar o certificado fornecido pelo gerador Yeoman. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta é a primeira vez que você desenvolve um Suplemento do Office em seu computador, você pode ser solicitado na linha de comando a conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback de localhost para o Microsoft Edge WebView?"). Quando solicitado, entre Y para permitir a isenção. Observe que você precisará de privilégios de administrador para permitir a isenção. Depois de permitido, você não deve ser solicitado a fornecer uma isenção ao fazer sideload de Suplementos do Office no futuro (a menos que remova a isenção do seu computador). Para saber mais, consulte "Não é possível abrir este suplemento do host local" ao carregar um suplemento do Office ou usar o Fiddler.

     

   • Quando você usa o gerador Yeoman pela primeira vez para desenvolver um suplemento do Office, seu navegador padrão abre uma janela onde você será solicitado a entrar em sua conta do Microsoft 365. Se uma janela de entrada não aparecer e você encontrar um erro de sideload ou tempo limite de login, execute atk auth login m365.

   Dica

   Se você estiver testando o seu suplemento no Mac, execute o seguinte comando antes de continuar. O servidor Web local é iniciado quando este comando é executado.

   npm run dev-server
   

   • Para testar seu suplemento no PowerPoint, execute o seguinte comando no diretório raiz do seu projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o PowerPoint com o suplemento carregado.

     npm start
     

   • Para testar seu suplemento no PowerPoint em um navegador, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua "{url}" pelo URL de um documento do PowerPoint no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

     Observação

     Se você estiver desenvolvendo em um Mac, coloque entre {url} aspas simples. Não faça isso no Windows.

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

     Eis alguns exemplos.

     • 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

     Se o suplemento não fizer sideload no documento, faça o sideload manualmente seguindo as instruções em Fazer sideload manual de suplementos para o Office na Web.

3. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

   

4. No painel de tarefas, escolha o botão Obter metadados do slide para obter os metadados do slide selecionado. Os metadados de slide são gravados na seção Mensagem abaixo dos botões no painel de tarefas. Nesse caso, a matriz slides dos metadados JSON contém um objeto que especifica id, title e index do slide selecionado. Se vários slides tivessem sido selecionados na recuperação de metadados do slide, a matriz slides dos metadados JSON conteria um objeto para cada slide selecionado.

   

Navegar entre slides

Conclua as seguintes etapas para adicionar o código que navega entre os slides de um documento.

1. No arquivotaskpane.html , substitua TODO5 pela seguinte marcação. Essa marcação define os quatro botões de navegação que aparecerão no painel de tarefas do suplemento.

   <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. No arquivo taskpane.ts , substitua TODO8 pelo código a seguir para atribuir os manipuladores de eventos para Adicionar slides e quatro botões de navegação.

   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. No arquivo taskpane.ts , substitua TODO9 pelo código a seguir para definir as addSlides funções de navegação e . Cada uma dessas funções usa o método goToByIdAsync para selecionar um slide com base em sua posição no documento (primeiro, último, anterior e próximo).

   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. Salve todas as alterações no projeto.

Testar o suplemento

1. Navegue até a pasta raiz do projeto.

   cd "My Office Add-in"
   

2. Se o servidor Web local ainda não estiver em execução, conclua as etapas a seguir para iniciar o servidor Web local e fazer o sideload do suplemento.

   Observação

   • Os suplementos do Office devem usar HTTPS, não HTTP, mesmo durante o desenvolvimento. Se você for solicitado a instalar um certificado depois de executar um dos comandos a seguir, aceite a solicitação para instalar o certificado fornecido pelo gerador Yeoman. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta é a primeira vez que você desenvolve um Suplemento do Office em seu computador, você pode ser solicitado na linha de comando a conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback de localhost para o Microsoft Edge WebView?"). Quando solicitado, entre Y para permitir a isenção. Observe que você precisará de privilégios de administrador para permitir a isenção. Depois de permitido, você não deve ser solicitado a fornecer uma isenção ao fazer sideload de Suplementos do Office no futuro (a menos que remova a isenção do seu computador). Para saber mais, consulte "Não é possível abrir este suplemento do host local" ao carregar um suplemento do Office ou usar o Fiddler.

     

   • Quando você usa o gerador Yeoman pela primeira vez para desenvolver um suplemento do Office, seu navegador padrão abre uma janela onde você será solicitado a entrar em sua conta do Microsoft 365. Se uma janela de entrada não aparecer e você encontrar um erro de sideload ou tempo limite de login, execute atk auth login m365.

   Dica

   Se você estiver testando o seu suplemento no Mac, execute o seguinte comando antes de continuar. O servidor Web local é iniciado quando este comando é executado.

   npm run dev-server
   

   • Para testar seu suplemento no PowerPoint, execute o seguinte comando no diretório raiz do seu projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o PowerPoint com o suplemento carregado.

     npm start
     

   • Para testar seu suplemento no PowerPoint em um navegador, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua "{url}" pelo URL de um documento do PowerPoint no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

     Observação

     Se você estiver desenvolvendo em um Mac, coloque entre {url} aspas simples. Não faça isso no Windows.

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

     Eis alguns exemplos.

     • 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

     Se o suplemento não fizer sideload no documento, faça o sideload manualmente seguindo as instruções em Fazer sideload manual de suplementos para o Office na Web.

3. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

   

4. No painel de tarefas, escolha o botão Adicionar Slides . Dois novos slides são adicionados ao documento e o último slide do documento é selecionado e exibido.

   

5. No painel de tarefas, escolha o botão Ir para o primeiro Slide. O primeiro slide no documento é selecionado e exibido.

   

6. No painel de tarefas, escolha o botão Ir para o próximo Slide. O próximo slide no documento é selecionado e exibido.

   

7. No painel de tarefas, escolha o botão Ir Para o Slide Anterior. O slide anterior no documento é selecionado e exibido.

   

8. No painel de tarefas, escolha o botão Ir Para o Último Slide. O último slide no documento é selecionado e exibido.

   

9. Se o servidor Web estiver em execução, execute o seguinte comando quando quiser parar o servidor.

   npm stop
   

Exemplos de código

• Tutorial de suplemento do PowerPoint concluído: o resultado da conclusão deste tutorial.

Próximas etapas

Neste tutorial, você criou um suplemento do PowerPoint que insere uma imagem, insere texto, obtém metadados de slide e navega entre slides. Para saber mais sobre como criar suplementos do PowerPoint, prossiga para o artigo a seguir.

Confira também

• Visão geral da plataforma Suplementos do Office
• Desenvolver Suplementos do Office