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, 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