Crie seu primeiro suplemento do painel de tarefas do OneNote

Neste artigo, você percorre o processo de criação de um suplemento do painel de tarefas do OneNote.

Pré-requisitos

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

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

  npm install -g yo generator-office
  

  Observação

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

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

  Observação

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

Criar o projeto do suplemento

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

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
• Como você deseja nomear seu suplemento?My Office Add-in
• Qual aplicativo cliente do Office você gostaria de dar suporte?OneNote

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

Explore o projeto

O projeto de suplemento que você criou com o gerador do Yeoman contém um exemplo de código para um suplemento de painel de tarefas bem básico.

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

Atualizar o código

No seu editor de código, abra o arquivo ./src/taskpane/taskpane.js e adicione o seguinte código na função run. Este código usa a API JavaScript do OneNote para definir o título da página e adicionar um contorno ao corpo da página.

try {
    await OneNote.run(async (context) => {

        // Get the current page.
        const page = context.application.getActivePage();

        // Queue a command to set the page title.
        page.title = "Hello World";

        // Queue a command to add an outline to the page.
        const html = "<p><ol><li>Item #1</li><li>Item #2</li></ol></p>";
        page.addOutline(40, 90, html);

        // Run the queued commands.
        await context.sync();
    });
} catch (error) {
    console.log("Error: " + error);
}

Experimente

1. Navegue até a pasta raiz do projeto.

   cd "My Office Add-in"
   

2. Inicie o servidor Web local. Execute o seguinte comando no diretório raiz do seu projeto.

   npm run dev-server
   

   Observação

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

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

     

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

3. No OneNote Online, abra um bloco de anotações e crie uma nova página.

4. Escolha Inserir Suplementos>do Office para abrir a caixa de diálogo Suplementos do Office.

   • Se você estiver conectado à sua conta de consumidor, selecione a guia MEUS SUPLEMENTOS e escolha Carregar Meu Suplemento.

   • Se você estiver conectado com a sua conta corporativa ou de estudante, selecione a guia MINHA ORGANIZAÇÃO e escolha Carregar Meu Suplemento.

   A imagem a seguir mostra a guia MEUS SUPLEMENTOS para blocos de anotações do consumidor.

   

5. Na caixa de diálogo Carregar Suplemento , navegue até manifest.xml na pasta do projeto e escolha Carregar.

6. Na guia Página Inicial , escolha o botão Mostrar Painel de Tarefas na faixa de opções. O painel de tarefa do suplemento abre em um iFrame ao lado da página do OneNote.

7. Na parte inferior do painel de tarefas, escolha o link Executar para definir o título da página e adicionar um contorno ao corpo da página.

   

8. Quando você quiser parar o servidor Web local e desinstalar o suplemento, siga estas instruções:

   • Para parar o servidor, execute o seguinte comando.

     npm stop
     

   • Para desinstalar o suplemento sideload, confira Remover um suplemento sideload.

Próximas etapas

Parabéns, você criou um suplemento do painel de tarefas do OneNote! Em seguida, saiba mais sobre os principais conceitos de criação de suplementos do OneNote.

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.

Confira também

• Visão geral da plataforma Suplementos do Office
• Desenvolver Suplementos do Office
• Visão geral da programação da API JavaScript do OneNote
• Referência da API JavaScript do OneNote
• Exemplo: Suplemento do painel de tarefas do avaliador de rubrica para o OneNote na Web
• Usando o Visual Studio Code para publicar