Criar um suplemento autônomo do Office com base em seu código do Script Lab

Se você criou um trecho no Script Lab, convém transformá-lo em um suplemento autônomo. É possível copiar o código do Script Lab para um projeto gerado pelo Gerador Yeoman para suplementos do Office (também chamado de "Yo Office"). Em seguida, é possível continuar desenvolvendo o código como um suplemento que pode eventualmente implantar em outras pessoas.

As etapas neste artigo referem-se ao Visual Studio Code, mas é possível usar qualquer editor de código que preferir.

Criar um novo projeto Yo Office

Crie o projeto de suplemento autônomo. Este projeto é o novo local de desenvolvimento do seu código de snippet. Siga as diretrizes em Criar projetos de Suplemento do Office usando o Gerador Yeoman. Se o snippet for uma função personalizada, use uma das opções de funções personalizadas no gerador e pule para a seção Funções personalizadas.

Abra o trecho no Script Lab

  1. Abra o Office (Word, Excel, PowerPoint ou Outlook) e abra o Script Lab.
  2. Selecione Script Lab>Código.
  3. Abra o snippet no Script Lab.

Copiar o código de trecho para o código do Visual Studio

Agora você pode copiar o código do snippet para o projeto Yo Office no Visual Studio Code.

No Visual Studio Code, abra o projeto do suplemento. Nas próximas etapas, você copiará o código de várias guias no Script Lab.

Guias no Script Lab.

Copiar código do painel de tarefas

  1. No Visual Studio Code, abra o arquivo /src/taskpane/taskpane.ts. Se você estiver usando um projeto JavaScript, o nome do arquivo será taskpane.js.
  2. No Script Lab, selecione a guia Script.
  3. Copie todo o código na guia Script para a área de transferência. Substitua todo o conteúdo do taskpane.ts (ou taskpane.js para JavaScript) pelo código que você copiou.

Copiar HTML do painel de tarefas

  1. No Visual Studio Code, abra o arquivo /src/taskpane/taskpane.html.
  2. No Script Lab, selecione a guia HTML.
  3. Copie todo o HTML na guia HTML para a área de transferência. Substitua todo o HTML dentro da marca <body> pelo HTML que você copiou.

Copiar CSS do painel de tarefas

  1. No Visual Studio Code, abra o arquivo /src/taskpane/taskpane.css.
  2. No Script Lab, selecione a guia CSS.
  3. Copie todo o CSS na guia CSS para a área de transferência. Substitua todo o conteúdo de taskpane.css pelo CSS copiado.
  4. Salve todas as alterações nos arquivos que você atualizou nas etapas anteriores.

Adicionar mais suporte à biblioteca

Se você criou um trecho com dependências de biblioteca adicionais, adicione-as ao projeto do Yo Office usando as etapas a seguir.

  1. Localize uma lista de todas as dependências de biblioteca na guia Bibliotecas no Script Lab.
  2. Para cada biblioteca, adicione uma <script> marca ao <head> arquivo /src/taskpane/taskpane.html .
  3. Defina o src atributo da marca como a URL da biblioteca.

Para obter mais informações, consulte Atributo src da tag de script HTML.

Inicialização do identificador

O Script Lab manipula automaticamente a Office.onReady inicialização. Você precisa modificar o código para fornecer seu próprio Office.onReady manipulador.

  1. Abra o arquivo taskpane.ts (ou outaskpane.js para JavaScript).

  2. Envolva as atribuições do manipulador de eventos em retornos de chamada para os eventos carregados de conteúdodo Office onReady e HTML DOM. Por exemplo, substitua:

    document.getElementById("run").addEventListener("click", () => tryCatch(run));

    por:

    Office.onReady(function () {
  // Office is ready.      
  document.addEventListener("DOMContentLoaded", () => {
    // The document is ready.
    document.getElementById("run").addEventListener("click", () => tryCatch(run));
  });
});

  3. Salve o arquivo.

Funções personalizadas

Para transformar funções personalizadas em um suplemento autônomo, siga estas etapas.

  1. Abra p Excel e, em seguida, abra p Script Lab.
  2. Selecione Script Lab>Código.
  3. Abra o snippet no Script Lab.
  4. Abra o arquivo /src/functions/functions.ts. Se você estiver usando um projeto JavaScript, o nome do arquivo será functions.js.
  5. No Script Lab, selecione a guia Script.
  6. Copie todo o código na guia Script para a área de transferência. Cole o código na parte superior da functions.ts (ou functions.js para JavaScript) com o código que você copiou.
  7. Salve o arquivo.

Testar o suplemento autônomo

Depois de concluir todas as etapas, execute e teste seu suplemento autônomo. Abra um prompt de comando, terminal ou shell bash na raiz do projeto e execute o seguinte comando para começar.

npm start

O Office é iniciado, e você pode abrir o painel de tarefas do seu suplemento a partir da faixa de opções. Parabéns! Agora é possível continuar criando seu suplemento como um projeto autônomo.

Quando você estiver pronto para interromper o servidor de desenvolvimento e desinstalar o suplemento, execute o comando a seguir.

npm stop

Para obter mais informações sobre sideload, teste e solução de problemas de um suplemento, consulte a seção Teste e depuração da documentação.

Log do console

Muitos trechos no Script Lab gravam a saída em uma seção de console na parte inferior do painel de tarefas. O projeto Yo Office não tem uma seção de console. Todas as console.log* instruções são gravadas no console de depuração padrão (como as ferramentas de desenvolvedor do navegador). Se você quiser que a saída vá para o painel de tarefas, será necessário atualizar o código.

  • Last updated on