Tutorial: Criar um Suplemento do Painel de Tarefas

Neste tutorial, irá utilizar Visual Studio Code (VS Code), Visual Studio ou o seu editor de código preferido para criar um suplemento do painel de tarefas do PowerPoint que:

• Adiciona uma imagem a um diapositivo
• Adicionar texto a um slide
• Obtém metadados do slide
• Adiciona novos diapositivos
• Navega entre slides

Você pode criar um suplemento do Office usando o Gerador Yeoman para suplementos do Office ou Visual Studio. O gerador Yeoman cria um projeto Node.js que pode ser gerenciado com o Visual Studio Code ou com qualquer outro editor, enquanto o Visual Studio cria uma solução do Visual Studio. Selecione a guia do que você deseja usar e, em seguida, siga as instruções para criar o suplemento e testá-lo localmente.

Gerador do Yeoman

Criar o suplemento

Dica

Se já tiver concluído o guia de introdução Criar o seu primeiro suplemento do painel de tarefas do PowerPoint com o gerador Yeoman e quiser utilizar esse projeto como ponto de partida para este tutorial, aceda diretamente à secção Inserir uma imagem para iniciar este tutorial.

Se quiser uma versão completa deste tutorial, aceda ao repositório de exemplos de Suplementos do Office no GitHub.

Pré-requisitos

• Node.js (a versão mais recente de LTS). Visite o siteNode.js para transferir e instalar a versão certa para o seu sistema operativo.

• 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 ainda não tiver o Office, poderá qualificar-se para uma subscrição de programador Microsoft 365 E5 através do Programa para Programadores do Microsoft 365. Para obter detalhes, consulte as FAQ. Em alternativa, pode inscrever-se numa avaliação gratuita de um mês ou comprar um plano do Microsoft 365.

Criar o projeto do suplemento

Execute o comando a seguir para criar um projeto de suplemento usando o gerador Yeoman. Será adicionada uma pasta que contém o projeto ao diretório atual.

yo office

Observação

Ao executar o comando yo office, você receberá informações sobre as políticas de coleta de dados de Yeoman e as ferramentas da CLI do suplemento do Office. Use as informações fornecidas para responder às solicitações como achar melhor.

Quando solicitado, forneça as informações a seguir para criar seu projeto de suplemento.

• Escolha um tipo de projeto:Office Add-in Task Pane project
• Escolha um tipo de script:JavaScript
• Qual é o nome do seu suplemento?My Office Add-in
• Que aplicação cliente do Office pretende suportar?PowerPoint

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 os seguintes passos para adicionar código que insere uma imagem num diapositivo.

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 ficheiro base64Image.js e adicione o seguinte código para especificar a cadeia 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-o pela seguinte marcação e, em seguida, guarde o ficheiro.

   <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 ficheiro taskpane.html , substitua pela TODO1 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.js. 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 ficheirotaskpane.js acima da Office.onReady chamada de função junto à parte superior do ficheiro, substitua TODO1 pelo seguinte código. Esse código importa a variável que você definida anteriormente no arquivo ./base64Image.js.

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

9. No ficheiro taskpane.js , substitua TODO2 pelo seguinte código para atribuir o processador de eventos para o botão Inserir Imagem .

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

10. No ficheiro taskpane.js , substitua TODO3 pelo seguinte código 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. Guarde todas as alterações efetuadas ao 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 utilizar HTTPS e não HTTP, mesmo quando estiver a desenvolver. Se lhe for pedido para instalar um certificado depois de executar um dos seguintes comandos, aceite o pedido para instalar o certificado que o gerador Yeoman fornece. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta for a primeira vez que desenvolve um Suplemento do Office no seu computador, poderá ser-lhe pedido na linha de comandos para conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback localhost para o Microsoft Edge WebView?"). Quando lhe for pedido, introduza Y para permitir a isenção. Tenha em atenção que precisará de privilégios de administrador para permitir a isenção. Uma vez permitido, não lhe deverá ser pedida uma isenção quando carregar os 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 a partir do localhost" ao carregar um Suplemento do Office ou ao utilizar o Fiddler.

     

   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 estiver a desenvolver num Mac, coloque as {url} aspas simples. Não o faça 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 seu suplemento não carregar em sideload no documento, carregue-o manualmente ao seguir as instruções em Suplementos de sideload manualmente para Office na Web.

3. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o separador Base e, em seguida, selecione o botão Mostrar Painel de Tarefas no friso para abrir o painel de tarefas do suplemento.

   

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

   

5. Quando 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 tiver utilizado npm start, o seguinte comando também desinstala o suplemento.

     npm stop
     

   • Se tiver carregado manualmente o suplemento em sideload, consulte Remover um suplemento sideloaded.

Personalizar elementos da interface de utilizador (IU)

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

1. No ficheiro taskpane.html , substitua TODO2 e a secção de cabeçalho atual pela seguinte marcação para atualizar a secçã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 ficheiro taskpane.html inclui uma referência à folha de estilos 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. Guarde todas as alterações efetuadas ao projeto.

Testar o suplemento

1. Se o servidor Web local ainda não estiver em execução, conclua os seguintes passos para iniciar o servidor Web local e fazer sideload do suplemento.

   Observação

   • Os Suplementos do Office devem utilizar HTTPS e não HTTP, mesmo quando estiver a desenvolver. Se lhe for pedido para instalar um certificado depois de executar um dos seguintes comandos, aceite o pedido para instalar o certificado que o gerador Yeoman fornece. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta for a primeira vez que desenvolve um Suplemento do Office no seu computador, poderá ser-lhe pedido na linha de comandos para conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback localhost para o Microsoft Edge WebView?"). Quando lhe for pedido, introduza Y para permitir a isenção. Tenha em atenção que precisará de privilégios de administrador para permitir a isenção. Uma vez permitido, não lhe deverá ser pedida uma isenção quando carregar os 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 a partir do localhost" ao carregar um Suplemento do Office ou ao utilizar o Fiddler.

     

   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 estiver a desenvolver num Mac, coloque as {url} aspas simples. Não o faça 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 seu suplemento não carregar em sideload no documento, carregue-o manualmente ao seguir as instruções em Suplementos de sideload manualmente para 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 no friso para o abrir.

   

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

   

Inserir texto

Conclua os seguintes passos para adicionar código que insere texto no diapositivo de título que contém uma imagem.

1. No ficheiro taskpane.html , substitua pela TODO3 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 ficheiro taskpane.js , substitua TODO4 pelo seguinte código para atribuir o processador de eventos para o botão Inserir Texto .

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

3. No ficheiro taskpane.js , substitua TODO5 pelo seguinte código 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. Guarde todas as alterações efetuadas ao 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 os seguintes passos para iniciar o servidor Web local e fazer sideload do suplemento.

   Observação

   • Os Suplementos do Office devem utilizar HTTPS e não HTTP, mesmo quando estiver a desenvolver. Se lhe for pedido para instalar um certificado depois de executar um dos seguintes comandos, aceite o pedido para instalar o certificado que o gerador Yeoman fornece. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta for a primeira vez que desenvolve um Suplemento do Office no seu computador, poderá ser-lhe pedido na linha de comandos para conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback localhost para o Microsoft Edge WebView?"). Quando lhe for pedido, introduza Y para permitir a isenção. Tenha em atenção que precisará de privilégios de administrador para permitir a isenção. Uma vez permitido, não lhe deverá ser pedida uma isenção quando carregar os 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 a partir do localhost" ao carregar um Suplemento do Office ou ao utilizar o Fiddler.

     

   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 estiver a desenvolver num Mac, coloque as {url} aspas simples. Não o faça 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 seu suplemento não carregar em sideload no documento, carregue-o manualmente ao seguir as instruções em Suplementos de sideload manualmente para 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 no friso para o abrir.

   

4. No painel de tarefas, selecione o botão Inserir Imagem para adicionar a imagem ao diapositivo atual e, em seguida, escolha uma estrutura para o diapositivo que contém 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 ficheiro taskpane.html , substitua pela TODO4 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 ficheiro taskpane.js , substitua TODO6 pelo seguinte código para atribuir o processador de eventos para o botão Obter Metadados do Diapositivo .

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

3. No ficheiro taskpane.js , substitua TODO7 pelo seguinte código para definir a getSlideMetadata função. Esta função obtém metadados para os diapositivos selecionados e escreve-os na secçã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. Guarde todas as alterações efetuadas ao 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 os seguintes passos para iniciar o servidor Web local e fazer sideload do suplemento.

   Observação

   • Os Suplementos do Office devem utilizar HTTPS e não HTTP, mesmo quando estiver a desenvolver. Se lhe for pedido para instalar um certificado depois de executar um dos seguintes comandos, aceite o pedido para instalar o certificado que o gerador Yeoman fornece. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta for a primeira vez que desenvolve um Suplemento do Office no seu computador, poderá ser-lhe pedido na linha de comandos para conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback localhost para o Microsoft Edge WebView?"). Quando lhe for pedido, introduza Y para permitir a isenção. Tenha em atenção que precisará de privilégios de administrador para permitir a isenção. Uma vez permitido, não lhe deverá ser pedida uma isenção quando carregar os 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 a partir do localhost" ao carregar um Suplemento do Office ou ao utilizar o Fiddler.

     

   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 estiver a desenvolver num Mac, coloque as {url} aspas simples. Não o faça 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 seu suplemento não carregar em sideload no documento, carregue-o manualmente ao seguir as instruções em Suplementos de sideload manualmente para 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 no friso para o abrir.

   

4. No painel de tarefas, escolha o botão Obter metadados do slide para obter os metadados do slide selecionado. Os metadados do diapositivo são escritos na secçã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 ficheiro taskpane.html , substitua pela TODO5 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 ficheiro taskpane.js , substitua TODO8 pelo seguinte código para atribuir os processadores de eventos para adicionar diapositivos 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 ficheiro taskpane.js , substitua TODO9 pelo seguinte código 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. Guarde todas as alterações efetuadas ao 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 os seguintes passos para iniciar o servidor Web local e fazer sideload do suplemento.

   Observação

   • Os Suplementos do Office devem utilizar HTTPS e não HTTP, mesmo quando estiver a desenvolver. Se lhe for pedido para instalar um certificado depois de executar um dos seguintes comandos, aceite o pedido para instalar o certificado que o gerador Yeoman fornece. Você também pode executar o prompt de comando ou terminal como administrador para que as alterações sejam feitas.

   • Se esta for a primeira vez que desenvolve um Suplemento do Office no seu computador, poderá ser-lhe pedido na linha de comandos para conceder ao Microsoft Edge WebView uma isenção de loopback ("Permitir loopback localhost para o Microsoft Edge WebView?"). Quando lhe for pedido, introduza Y para permitir a isenção. Tenha em atenção que precisará de privilégios de administrador para permitir a isenção. Uma vez permitido, não lhe deverá ser pedida uma isenção quando carregar os 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 a partir do localhost" ao carregar um Suplemento do Office ou ao utilizar o Fiddler.

     

   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 estiver a desenvolver num Mac, coloque as {url} aspas simples. Não o faça 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 seu suplemento não carregar em sideload no documento, carregue-o manualmente ao seguir as instruções em Suplementos de sideload manualmente para 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 no friso para o abrir.

   

4. No painel de tarefas, selecione o botão Adicionar Diapositivos . São adicionados dois novos diapositivos ao documento e o último diapositivo no documento é selecionado e apresentado.

   

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 pretender parar o servidor.

   npm stop
   

Exemplos de código

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

Visual Studio

Dica

Se quiser uma versão completa deste tutorial, aceda ao repositório de exemplos de Suplementos do Office no GitHub.

Pré-requisitos

• Visual Studio 2019 ou posterior, com a carga de trabalho de desenvolvimento do Office/SharePoint instalada.

  Observação

  Se você já instalou o Visual Studio, use o Instalador do Visual Studio para garantir que a carga de trabalho de desenvolvimento do Office/SharePoint esteja instalada.

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

  Observação

  Se ainda não tiver o Office, poderá qualificar-se para uma subscrição de programador Microsoft 365 E5 para utilizar para desenvolvimento através do Programa para Programadores do Microsoft 365. Para obter detalhes, consulte as FAQ. Em alternativa, pode inscrever-se numa avaliação gratuita de um mês ou comprar um plano do Microsoft 365.

Criar seu projeto do suplemento

Conclua as etapas a seguir para criar um projeto de suplemento do PowerPoint usando o Visual Studio.

1. Escolha Criar um novo projeto.

2. Usando a caixa de pesquisa, insira suplemento. Escolha Suplemento do PowerPoint Web , em seguida, selecione Próximo.

3. Nomeie o projeto como HelloWorld e selecione Criar.

4. Na caixa de diálogo Criar suplementos do Office, escolha Adicionar novas funcionalidades ao PowerPointe depois Concluir para criar o projeto.

5. O Visual Studio cria uma solução, e os dois projetos dele são exibidos no Gerenciador de Soluções. O arquivo Home.html é aberto no Visual Studio.

   

6. Os seguintes pacotes NuGet têm de ser instalados. Instale-os no projeto HelloWorldWeb com o Gestor de Pacotes NuGet no Visual Studio. Consulte a ajuda do Visual Studio para obter instruções. O segundo deles pode ser instalado automaticamente quando você instala o primeiro.

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

   Importante

   Quando estiver a utilizar o Gestor de Pacotes NuGet para instalar estes pacotes, não instale a atualização recomendada para o jQuery. A versão do jQuery instalada com a sua solução do Visual Studio corresponde à chamada jQuery nos ficheiros da solução.

7. Utilize o Gestor de Pacotes NuGet para atualizar o pacote Newtonsoft.Json para a versão 13.0.3 ou posterior. Em seguida, elimine o ficheiro app.config se tiver sido adicionado ao projeto HelloWorld .

Explorar a solução do Visual Studio

Ao concluir o assistente, o Visual Studio cria uma solução que contém dois projetos.

Project	Descrição
Projeto de suplemento	Contém apenas um ficheiro de manifesto apenas de suplemento com formato XML, que contém todas as definições que descrevem o seu suplemento. As configurações ajudam o aplicativo do Office a determinar quando o suplemento deverá ser ativado e onde ele deverá aparecer. O Visual Studio gera o conteúdo desse arquivo para que você possa executar o projeto e usar o suplemento imediatamente. Altere estas definições em qualquer altura ao modificar o ficheiro XML.
Projeto de aplicativo Web	Contém as páginas de conteúdo do suplemento, incluindo todos os arquivos e referências de arquivo de que você precisa para desenvolver páginas HTML e JavaScript com reconhecimento do Office. Enquanto você desenvolve o suplemento, o Visual Studio hospeda o aplicativo Web no servidor IIS local. Quando estiver pronto para publicar, você precisará implantar este projeto de aplicativo Web em um servidor Web.

Código de atualização

Edite o código do suplemento como mostrado a seguir para criar a estrutura que você usará para implementar a funcionalidade do suplemento nas etapas subsequentes deste tutorial.

1. Home.html especifica o HTML que será renderizado no painel de tarefas do suplemento. Em Home.html, encontre a div com id="content-main", substitua toda essa div pela marcação a seguir e salve o arquivo.

   <!-- 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. Abra o arquivo Home.js na raiz do projeto do aplicativo Web. Este arquivo especifica o script do suplemento. Substitua todo o conteúdo pelo código a seguir e salve o arquivo.

   (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();
       }
   })();
   

Inserir uma imagem

Conclua as seguintes etapas para adicionar o código que recupera a foto do dia do Bing e inserir as imagens em um slide.

1. Usando o Explorador de soluções, adicione uma nova pasta chamada Controladores ao projeto HelloWorldWeb.

   

2. Clique com o botão direito do rato (ou selecione sem soltar) na pasta Controladores e selecione Adicionar>Novo Item Estruturado....

3. Na janela da caixa de diálogo Adicionar Scaffold, selecione Controlador da Web API 2 – vazio e escolha o botão Adicionar.

4. Na janela da caixa de diálogo Adicionar Controlador, insira PhotoController como nome do controlador e escolha o botão Adicionar. O Visual Studio criará e abrirá o arquivo PhotoController.cs.

   Importante

   O processo de estruturação não é concluído corretamente em algumas versões do Visual Studio após a versão 16.10.3. Se tiver os ficheiros Global.asax e ./App_Start/WebApiConfig.cs , avance para o passo 6.

   

5. Se faltarem ficheiros estruturados do projeto HelloWorldWeb , adicione-os da seguinte forma.

   1. Com Gerenciador de Soluções, adicione uma nova pasta com o nome App_Start ao projeto HelloWorldWeb.

   2. Clique com o botão direito do rato (ou selecione sem soltar) na pasta App_Start e selecione Adicionar>Classe....

   3. Na caixa de diálogo Adicionar Novo Item , atribua um nome ao ficheiro WebApiConfig.cs , em seguida, selecione o botão Adicionar.

   4. Substitua todo o conteúdo do ficheiro WebApiConfig.cs pelo seguinte código.

      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. Na Gerenciador de Soluções, clique com o botão direito do rato (ou selecione sem soltar) no projeto HelloWorldWeb e selecione Adicionar>Novo Item....

   6. Na caixa de diálogo Adicionar Novo Item , procure "global", selecione Classe De Aplicação Global e, em seguida, selecione o botão Adicionar . Por predefinição, o ficheiro é denominado Global.asax.

   7. Substitua todo o conteúdo do ficheiro Global.asax.cs pelo seguinte código.

      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. Na Gerenciador de Soluções, clique com o botão direito do rato (ou selecione sem soltar) o ficheiro Global.asax e selecioneVer Marcação.

   9. Substitua todo o conteúdo do ficheiro Global.asax pelo seguinte código.

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

6. Substitua todo o conteúdo do ficheiro PhotoController.cs pelo seguinte código que chama o serviço Bing para obter a fotografia do dia como uma cadeia codificada em Base64. Quando utiliza a API JavaScript do Office para inserir uma imagem num documento, os dados da imagem têm de ser especificados como uma cadeia codificada em 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. No arquivo Home.html, substitua TODO1 pela marcação a seguir. Essa marcação define o botão Inserir Imagem que aparecerá no painel de tarefas do suplemento.

   <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. No arquivo Home.js, substitua TODO1 pelo código a seguir para atribuir o manipulador de eventos ao botão Inserir Imagem.

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

9. No arquivo Home.js, substitua TODO2 pelo código a seguir para definir a função insertImage. Esta função busca a imagem do serviço Web Bing e chama a função insertImageFromBase64String para inserir a imagem no documento.

   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. No arquivo Home.js, substitua TODO3 pelo código a seguir para definir a função insertImageFromBase64String. 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 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);
                }
            });
    }
    

Testar o suplemento

1. Com o Visual Studio, teste o suplemento do PowerPoint recentemente criado ao premir F5 ou ao selecionar o botão Iniciar para iniciar o PowerPoint com o botão mostrar o suplemento Painel de Tarefas apresentado no friso. O suplemento será hospedado localmente no IIS.

   

2. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas no friso para o abrir.

   

3. No painel de tarefas, escolha o botão Inserir Imagem para adicionar a foto do dia do Bing ao slide atual.

   

   Observação

   Se receber um erro "Não foi possível localizar o ficheiro [...] \bin\roslyn\csc.exe" e, em seguida, faça o seguinte:

   1. Abra o ficheiro .\Web.config .
   2. Localize o nó do <compilador> para o .cs extensione, em seguida, remova o atributo e o type respetivo valor.
   3. Salve o arquivo.

4. No Visual Studio, pare o suplemento premindo Shift+F5 ou selecionando o botão Parar . O PowerPoint fechará automaticamente quando o suplemento for interrompido.

   

Personalizar elementos da interface de utilizador (IU)

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

1. No arquivo Home.html, substitua TODO2 pela marcação a seguir para adicionar uma seção de cabeçalho e um título ao 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 Home.html inclui uma referência à folha de estilo do 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. No arquivo Home.html, localize a div com class="footer" e exclua toda a div para remover a seção de rodapé do painel de tarefas.

Testar o suplemento

1. Com o Visual Studio, teste o suplemento PowerPoint ao premir F5 ou ao selecionar o botão Iniciar para iniciar o PowerPoint com o botão mostrar suplemento Painel de Tarefas apresentado no friso. O suplemento será hospedado localmente no IIS.

   

2. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas no friso para o abrir.

   

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

   

4. No Visual Studio, pare o suplemento premindo Shift+F5 ou selecionando o botão Parar . O PowerPoint fechará automaticamente quando o suplemento for interrompido.

   

Inserir texto

Conclua as seguintes etapas para adicionar o código que insere texto no slide de título que contém as fotos do dia do Bing.

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

       <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. No arquivo Home.js, substitua TODO4 pelo código a seguir para atribuir o manipulador de eventos ao botão Inserir Texto.

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

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

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

Testar o suplemento

1. Com o Visual Studio, teste o suplemento premindo F5 ou escolhendo o botão Iniciar para iniciar o PowerPoint com o botão mostrar suplemento Painel de Tarefas apresentado no friso. O suplemento será hospedado localmente no IIS.

   

2. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas no friso para o abrir.

   

3. No painel de tarefas, escolha o botão Inserir Imagem para adicionar a foto do dia do Bing ao slide atual e escolher um design para o slide que contém uma caixa de texto como título.

   

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

   

5. No Visual Studio, pare o suplemento premindo Shift+F5 ou selecionando o botão Parar . O PowerPoint fechará automaticamente quando o suplemento for interrompido.

   

Obter metadados do slide

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

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

   <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. No arquivo Home.js, substitua TODO6 pelo código a seguir para atribuir o manipulador de eventos para o botão Obter Metadados do Slide.

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

3. No arquivo Home.js, substitua TODO7 pelo código a seguir para definir a função getSlideMetadata. Esta função obtém metadados para os diapositivos selecionados e escreve-os numa janela de caixa de diálogo de pop-up no painel de tarefas do suplemento.

   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);
               }
           }
       );
   }
   

Testar o suplemento

1. Com o Visual Studio, teste o suplemento premindo F5 ou escolhendo o botão Iniciar para iniciar o PowerPoint com o botão mostrar suplemento Painel de Tarefas apresentado no friso. O suplemento será hospedado localmente no IIS.

   

2. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas no friso para o abrir.

   

3. No painel de tarefas, escolha o botão Obter metadados do slide para obter os metadados do slide selecionado. Os metadados do slide serão gravados na janela pop-up da caixa de diálogo na parte inferior do 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.

   

4. No Visual Studio, pare o suplemento premindo Shift+F5 ou selecionando o botão Parar . O PowerPoint fechará automaticamente quando o suplemento for interrompido.

   

Navegar entre slides

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

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

   <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. No ficheiro Home.js , substitua TODO8 pelo seguinte código para atribuir os processadores de eventos para adicionar diapositivos e quatro botões de navegação.

   $('#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. No ficheiro Home.js , substitua TODO9 pelo seguinte código 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();
   
           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);
               }
           });
   }
   

Testar o suplemento

1. Com o Visual Studio, teste o suplemento premindo F5 ou escolhendo o botão Iniciar para iniciar o PowerPoint com o botão mostrar suplemento Painel de Tarefas apresentado no friso. O suplemento será hospedado localmente no IIS.

   

2. Se o painel de tarefas do suplemento ainda não estiver aberto no PowerPoint, selecione o botão Mostrar Painel de Tarefas no friso para o abrir.

   

3. No painel de tarefas, selecione o botão Adicionar Diapositivos . São adicionados dois novos diapositivos ao documento e o último diapositivo no documento é selecionado e apresentado.

   

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

   

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

   

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

   

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

   

8. No Visual Studio, pare o suplemento premindo Shift+F5 ou selecionando o botão Parar . O PowerPoint fechará automaticamente quando o suplemento for interrompido.

   

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 imagem, texto, obtém metadados do slide e navega entre slides. Para saber mais sobre como criar suplementos do PowerPoint, prossiga para o artigo a seguir.

Visão geral dos Suplementos do SharePoint

Confira também

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