Criar um suplemento do painel de tarefas do Excel

Neste artigo, você passará pelo processo de criação de um suplemento do painel de tarefas do Excel.

Criar o suplemento

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

Pré-requisitos

• Node.js (a versão mais recente de LTS). Visite o siteNode.js para baixar e instalar a versão certa para 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 tiver o Office, poderá se qualificar para uma assinatura de desenvolvedor Microsoft 365 E5 por meio do Programa de Desenvolvedor do Microsoft 365; para obter detalhes, confira as perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 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. Uma pasta que contém o projeto será adicionada 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
• O que você deseja nomear seu suplemento?My Office Add-in
• Qual aplicativo cliente do Office você gostaria de dar suporte?Excel

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

Observação

Se você estiver usando Node.js versão 20.0.0 ou posterior, poderá ver um aviso quando o gerador executar a instalação de que você tem um mecanismo sem suporte. Estamos trabalhando em uma correção para isso. Enquanto isso, o aviso não afeta o gerador ou o projeto que você gera, portanto, ele pode ser ignorado.

Dica

Você pode ignorar as orientações da próximas etapas fornecidas pelo gerador Yeoman após a criação do projeto de suplemento. As instruções passo a passo deste artigo fornecem todas as orientações necessárias para concluir este tutorial.

Explore o projeto

O projeto de suplemento que você criou com o gerador Yeoman contém um código de exemplo para um suplemento básico do painel de tarefas. Se você quiser examinar os componentes do seu projeto de suplemento, abra o projeto no seu editor de código e revise os arquivos listados abaixo. Quando estiver pronto para experimentar o suplemento, prossiga para a próxima seção.

• O arquivo ./manifest.xml no diretório raiz do projeto define as configurações e os recursos do suplemento.
• O arquivo ./src/taskpane/taskpane.html contém a marcação HTML do painel de tarefas.
• O arquivo ./src/taskpane/taskpane.css contém o CSS que é aplicado ao conteúdo no painel de tarefas.
• O arquivo ./src/taskpane/taskpane.js contém o código da API JavaScript do Office que facilita a interação entre o painel de tarefas e o aplicativo cliente do Office.

Experimente

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 enquanto você estiver desenvolvendo. Se você for solicitado a instalar um certificado depois de executar um dos comandos a seguir, aceite o prompt 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.

   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 o seu suplemento no Excel, execute o seguinte comando no diretório raiz do projeto. Isso inicia o servidor Web local e abre o Excel com seu suplemento carregado.

     npm start
     

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

     Observação

     Se você estiver desenvolvendo em um Mac, inclua as {url} aspas em um único. 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 carregar de lado no documento, o carregará manualmente seguindo as instruções em suplementos de sideload manualmente para Office na Web.

3. No Excel, escolha a guia Página Inicial e escolha o botão Mostrar Taskpane na faixa de opções para abrir o painel de tarefas de suplemento.

   

4. Selecione um intervalo de células na planilha.

5. Na parte inferior do painel de tarefas, escolha o link Executar para definir a cor do intervalo selecionado como amarelo.

   

Próximas etapas

Parabéns, você criou com êxito um suplemento do painel de tarefas do Excel! Em seguida, saiba mais sobre os recursos de um suplemento do Excel e crie um suplemento mais complexo seguindo as etapas deste tutorial de suplemento do Excel.

Visual Studio

Pré-requisitos

• Visual Studio 2019 ou posterior com a carga de trabalho Desenvolvimento 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).

Criar o projeto do suplemento

1. No Visual Studio, escolha Criar um novo projeto.

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

3. Nomeie seu projeto ExcelWebAddIn1e selecione Criar.

4. Na janela Criar Suplemento do Office, escolha Adicionar novas funcionalidades para o Excele clique em 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.

Explorar a solução do Visual Studio

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

Projeto	Descrição
Projeto de suplemento	Contém somente um arquivo de manifesto XML, que contém todas as configurações que descrevem o 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 essas configurações a qualquer momento modificando o arquivo 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.

Atualizar o código

1. Home.html especifica o HTML que será renderizado no painel de tarefas do suplemento. Em Home.html, substitua o elemento <body> pela marcação a seguir e salve o arquivo.

   <body class="ms-font-m ms-welcome">
       <div id="content-header">
           <div class="padding">
               <h1>Welcome</h1>
           </div>
       </div>
       <div id="content-main">
           <div class="padding">
               <p>Choose the button below to set the color of the selected range to green.</p>
               <br />
               <h3>Try it out</h3>
               <button class="ms-Button" id="set-color">Set color</button>
           </div>
       </div>
   </body>
   

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.

   'use strict';
   
   (function () {
   
       Office.onReady(function() {
           // Office is ready
           $(document).ready(function () {
               // The document is ready
               $('#set-color').on("click", setColor);
           });
       });
   
       async function setColor() {
           await Excel.run(async (context) => {
               const range = context.workbook.getSelectedRange();
               range.format.fill.color = 'green';
   
               await context.sync();
           }).catch(function (error) {
               console.log("Error: " + error);
               if (error instanceof OfficeExtension.Error) {
                   console.log("Debug info: " + JSON.stringify(error.debugInfo));
               }
           });
       }
   })();
   

3. Abra o arquivo Home.css na raiz do projeto do aplicativo Web. Este arquivo especifica os estilos personalizados para o suplemento. Substitua todo o conteúdo pelo código a seguir e salve o arquivo.

   #content-header {
       background: #2a8dd4;
       color: #fff;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 80px;
       overflow: hidden;
   }
   
   #content-main {
       background: #fff;
       position: fixed;
       top: 80px;
       left: 0;
       right: 0;
       bottom: 0;
       overflow: auto;
   }
   
   .padding {
       padding: 15px;
   }
   

Atualizar o manifesto

1. No Gerenciador de Soluções, vá para o projeto de suplemento ExcelWebAddIn1e abra o diretório ExcelWebAddIn1Manifest. Este diretório contém seu arquivo de manifesto, ExcelWebAddIn1.xml. O arquivo de manifesto XML define as configurações e recursos do suplemento. Consulte a seção anterior Explorar a solução Visual Studio para obter mais informações sobre os dois projetos criados por sua solução Visual Studio.

2. O elemento ProviderName tem um valor de espaço reservado. Substitua-o com seu nome.

3. O atributo DefaultValue do elemento DisplayName tem um espaço reservado. Substitua-o pelo suplementos do My Office.

4. O atributo DefaultValue do elemento Description tem um espaço reservado. Substitua-o com um suplemento do painel de tarefas do Excel.

5. Salve o arquivo.

   ...
   <ProviderName>John Doe</ProviderName>
   <DefaultLocale>en-US</DefaultLocale>
   <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
   <DisplayName DefaultValue="My Office Add-in" />
   <Description DefaultValue="A task pane add-in for Excel"/>
   ...
   

Experimente

1. Usando o Visual Studio, teste o suplemento do Excel recém-criado pressionando F5 ou escolhendo o botão Iniciar para iniciar o Excel com o botão Mostrar suplemento taskpane exibido na faixa de opções. O suplemento será hospedado localmente no IIS. Se for solicitado que você confie em um certificado, faça-o para permitir que o suplemento se conecte ao seu aplicativo do Office.

2. No Excel, escolha a guia Página Inicial e escolha o botão Mostrar Taskpane na faixa de opções para abrir o painel de tarefas de suplemento.

   

3. Selecione um intervalo de células na planilha.

4. No painel de tarefas, escolha o botão Definir cor para definir a cor do intervalo selecionado como verde.

   

Observação

Para ver o console.log output, você precisará de um conjunto separado de ferramentas para desenvolvedores para um console de JavaScript. Para saber mais sobre as ferramentas F12 e o Microsoft Edge DevTools, visite Depurar suplementos usando ferramentas de desenvolvedor para Internet Explorer, Depurar suplementos usando ferramentas de desenvolvedor para a Versão Prévia do Microsoft Edge ou Depurar suplementos usando ferramentas de desenvolvedor no Microsoft Edge (baseado em Chromium).

Próximas etapas

Parabéns, você criou com êxito um suplemento do painel de tarefas do Excel! Em seguida, saiba mais sobre como desenvolver suplementos do Office com o Visual Studio.

Solução de problemas

• Verifique se o ambiente está pronto para o desenvolvimento do Office seguindo as instruções em Configurar seu ambiente de desenvolvimento.

• A etapa automática npm install que o Yo Office executa pode falhar. Se você vir erros ao tentar executar npm start, navegue até a pasta de projeto recém-criada em um prompt de comando e execute npm installmanualmente . Para obter mais informações sobre o Yo Office, consulte Criar projetos de suplemento do Office usando o Gerador yeoman.

• Se o suplemento mostrar um erro (por exemplo, "Esse suplemento não pôde ser iniciado. Feche essa caixa de diálogo para ignorar o problema ou clique em "Reiniciar" para tentar novamente.") ao pressionar F5 ou escolher Depurar>Iniciar Depuração no Visual Studio, consulte Depurar suplementos do Office no Visual Studio para outras opções de depuração.

• Alguns dos códigos de exemplo usam JavaScript ES6. Isso não é compatível com versões mais antigas do Office que usam o mecanismo do navegador Trident (Internet Explorer 11). Para obter informações sobre como dar suporte a essas plataformas em seu suplemento, consulte Suporte a versões mais antigas da Microsoft webviews e office. Se você ainda não tiver uma assinatura do Microsoft 365 a ser usada para desenvolvimento, poderá se qualificar para uma assinatura de desenvolvedor Microsoft 365 E5 por meio do Programa de Desenvolvedor do Microsoft 365; para obter detalhes, confira as perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou comprar um plano do Microsoft 365.

Exemplos de código

• Suplemento do Excel "Hello mundo": saiba como criar um suplemento simples do Office com apenas um manifesto, uma página da Web HTML e um logotipo.

Confira também

• Visão geral da plataforma Suplementos do Office
• Desenvolver Suplementos do Office
• Modelo de objeto JavaScript do Excel em Suplementos do Office
• Exemplos de código do suplemento do Excel
• Referência da API JavaScript do Excel
• Usando o Visual Studio Code para publicar