Criar seu primeiro suplemento do Outlook

Crie um suplemento de painel de tarefas para o Outlook que leia o assunto de uma mensagem selecionada. Este início rápido usa o gerador Yeoman para suplementos do Office (Yo Office) para estruturar o projeto, para que você possa se concentrar em escrever o código da API JavaScript do Office imediatamente.

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.

• Outlook na Web, novo Outlook no Windows, Outlook 2016 ou posterior no Windows (conectado a uma conta do Microsoft 365) ou Outlook no Mac.

Criar o projeto do suplemento

1. 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 o tipo de projeto - Office Add-in Task Pane project
   • Escolha o tipo de script - JavaScript
   • Qual será o nome do suplemento? - My Office Add-in
   • Você gostaria de proporcionar suporte para qual aplicativo cliente do Office? - Outlook
   • Qual manifesto você gostaria de usar? - Escolha um ou Unified manifest for Microsoft 365Add-in only manifest

   Observação

   O manifesto unificado para Microsoft 365 permite combinar um Suplemento do Office com um aplicativo do Teams em um Aplicativo para Microsoft 365 como uma única unidade de desenvolvimento e implantação. Para saber mais, confira Suplementos do Office com o manifesto unificado. Para obter um exemplo de um aplicativo para Microsoft 365 que combina um aplicativo do Teams e um suplemento do Outlook, consulte Ofertas de Desconto.

   Adoramos receber seus comentários sobre o manifesto unificado. Se você tiver alguma sugestão, crie um problema no repositório da Biblioteca JavaScript do Office.

   Dependendo da sua escolha de manifesto, os prompts e respostas devem se parecer com um dos seguintes:

   

   

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

2. Navegue até a pasta raiz do projeto do aplicativo Web.

   cd "My Office Add-in"
   

Explore o projeto

O gerador Yeoman cria um projeto em uma pasta com o nome do projeto que você escolheu. O projeto contém o código de exemplo para um suplemento de painel de tarefas muito básico. Veja a seguir os arquivos mais importantes.

• O arquivo ./manifest.json ou ./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 Outlook.

Experimente

1. Execute o seguinte comando no diretório raiz do seu projeto. Quando você executa esse comando, o servidor Web local é iniciado e seu suplemento é sideload.

   npm start
   

   Observação

   • 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 for exibida e você encontrar um erro de sideload ou tempo limite de logon, execute atk auth login m365 antes de executar npm start novamente.

   • Se o suplemento não foi carregado automaticamente, siga as instruções em Fazer sideload de suplementos do Outlook para testar o sideload manual do suplemento no Outlook.

2. No Outlook, exiba uma mensagem no Painel de leitura ou abra a mensagem em sua própria janela.

3. Selecione o botão Mostrar Painel de Tarefas para abrir o painel de tarefas do suplemento. A localização do botão do suplemento varia de acordo com o cliente Outlook que você está usando.

   • Outlook na Web e novo Outlook no Windows: Na barra de ações da mensagem, selecione Aplicativos. Em seguida, selecione Meu Suplemento do OfficeMostrar Painel de > Tarefas.
   • Outlook clássico no Windows: selecione a guia Página Inicial (ou a guia Mensagem , se você abriu a mensagem em uma nova janela). Em seguida, selecione Mostrar Painel de Tarefas na faixa de opções.
   • Outlook no Mac: selecione Meu Suplemento do Office na faixa de opções e selecione Mostrar Painel de Tarefas. Talvez seja necessário selecionar o botão de reticências (...) na faixa de opções para exibir seus suplementos.

   As capturas de tela a seguir mostram como o suplemento aparece no Outlook clássico no Windows.

   

4. Quando solicitado com a caixa de diálogo Parar na Carga do Modo de Exibição da Web, selecione OK.

   Observação

   Se você selecionar Cancelar, a caixa de diálogo não será mostrada novamente enquanto esta instância do suplemento estiver em execução. No entanto, se você reiniciar o suplemento, você verá a caixa de diálogo novamente.

5. Role para parte inferior do painel de tarefas e escolha o link Executar para escrever o assunto da mensagem no painel de tarefas.

   

   

6. 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 deve desinstalar o suplemento.

     npm stop
     

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

Próximas etapas

Parabéns, você criou o seu primeiro suplemento do painel de tarefas do Outlook! Em seguida, explore mais recursos de um suplemento do Outlook, seguindo o tutorial do suplemento do Outlook. No tutorial, você criará um suplemento mais complexo que incorpora um painel de tarefas, sobre o qual aprendeu no início rápido. Além disso, você criará um botão que invoca uma função sem interface do usuário.

Solução de problemas

• Certifique-se de que seu ambiente esteja 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 do 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.

• Você pode ver avisos gerados ao executar npm install o gerador Yeoman ou o projeto. Na maioria dos casos, você pode ignorar esses avisos com segurança. Às vezes, as dependências se tornam preteridas e suas substituições não têm suporte em outros pacotes dos quais o projeto depende. Se você quiser resolver esses avisos, use a npm-check-updates ferramenta.

  • No prompt de comando, enquanto estiver no diretório raiz do projeto, execute npm i -g npm-check-updates. Isso instala a ferramenta globalmente.
  • Execute ncu -u. Isso fornece um relatório de todos os pacotes e para quais versões eles serão atualizados.
  • Execute npm install para atualizar todos os pacotes.

  Para obter mais informações sobre avisos durante a execução npm install, consulte Avisos e dependências no mundo Node.js e npm.

• Se você não vir o botão do suplemento na faixa de opções (por exemplo, Mostrar Painel de Tarefas), selecione o botão Suplementos na guia da faixa de opções Página Inicial e escolha o suplemento de teste.

• Se você receber a mensagem de erro "Não é possível abrir este suplemento do localhost" no painel de tarefas, siga as etapas descritas no artigo de solução de problemas.

Exemplos de código

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

Confira também

• Suplementos do Office com o manifesto apenas de suplemento
• Usando o Visual Studio Code para publicar