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

  • Artigo

Se você criou um snippet no Script Lab, talvez queira 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

É necessário criar o projeto de suplemento autônomo que será o novo local de desenvolvimento para o código do trecho.

Execute o comando yo office --projectType taskpane --ts true --host <host> --name "my-add-in", onde <host> é um dos seguintes valores.

  • excel
  • outlook
  • powerpoint
  • palavra

Importante

O --name de argumento deve estar entre aspas duplas, mesmo que não tenha espaços.

O comando anterior cria uma nova pasta de projeto chamada my-add-in. Ele está configurado para ser executado no host especificado e usa TypeScript. O Script Lab usa TypeScript por padrão, mas a maioria dos trechos é JavaScript. É possível criar um projeto Yo Office JavaScript, se preferir, mas certifique-se de que qualquer código que você copiar seja JavaScript.

Abra o trecho no Script Lab

Use um trecho existente no Script Lab para saber como copiar um trecho para um projeto gerado pelo Yo Office.

  1. Abra o Office (Word, Excel, PowerPoint ou Outlook) e abra o Script Lab.
  2. Selecione Script Lab>Código. Se você estiver trabalhando no Outlook, abra uma mensagem de email para ver o Script Lab na faixa de opções.
  3. Abra o snippet no Script Lab. Se você quiser começar com um exemplo existente, vá para o painel de tarefas Script Lab e escolha Exemplos.

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

Agora é possível copiar o código do trecho para o projeto Yo Office no VS Code.

  • No VS Code, abra o projeto my-add-in .

Nas próximas etapas, você copiará o código de várias guias no Script Lab.

Guias em Script Lab.

Copiar código do painel de tarefas

  1. No VS 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 de taskpane.ts (ou taskpane.js para JavaScript) pelo código copiado.

Copiar HTML do painel de tarefas

  1. No VS 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 VS 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 suporte ao jQuery

O Script Lab usa jQuery nos trechos. É necessário adicionar essa dependência ao projeto Yo Office para executar o código com êxito.

  1. Abra o arquivo taskpane.html e adicione a seguinte marca de script à seção <head>.

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>

    Observação

    A versão específica do jQuery pode variar. É possível determinar qual versão Script Lab está sendo usada escolhendo a guia Bibliotecas.

  2. Abra um terminal no VS Code e insira os comandos a seguir.

    npm install --save-dev jquery@3.1.1
npm install --save-dev @types/jquery@3.3.1

Se você criou um trecho que tem dependências de biblioteca adicionais, certifique-se de adicioná-las ao projeto Yo Office. Localize uma lista de todas as dependências de biblioteca na guia Bibliotecas no Script Lab.

Inicialização do identificador

O Script Lab lida com a inicialização Office.onReady automaticamente. Será necessário modificar o código para fornecer seu próprio identificador Office.onReady.

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

  2. Para Excel, PowerPoint ou Word, substitua:

    $("#run").on("click", () => tryCatch(run));

    por:

    Office.onReady(function () {
  // Office is ready.
  $(document).ready(function () {
    // The document is ready.
    $("#run").on("click", () => tryCatch(run));
  });
});

  3. Para Outlook, substitua:

    $("#get").on("click", get);
$("#set").on("click", set);
$("#save").on("click", save);

    por:

    Office.onReady(function () {
  // Office is ready
  $(document).ready(function () {
    // The document is ready
    $("#get").on("click", get);
    $("#set").on("click", set);
    $("#save").on("click", save);
  });
});

  4. Salve o arquivo.

Funções personalizadas

Se o trecho usar funções personalizadas, será necessário usar o modelo de funções personalizadas do Yo Office. Para transformar funções personalizadas em um suplemento autônomo, siga estas etapas.

  1. Execute o comando yo office --projectType excel-functions --ts true --name "my-functions".

    Importante

    O --name de argumento deve estar entre aspas duplas, mesmo que não tenha espaços.

  2. Abra p Excel e, em seguida, abra p Script Lab.

  3. Selecione Script Lab>Código.

  4. Abra o snippet no Script Lab. Se você quiser começar com um exemplo existente, vá para o painel de tarefas Script Lab, escolha Exemplos e pesquise na seção Funções Personalizadas.

  5. Abra o arquivo /src/functions/functions.ts. Se você estiver usando um projeto JavaScript, o nome do arquivo será functions.js.

  6. No Script Lab, selecione a guia Script.

  7. Copie todo o código na guia Script para a área de transferência. Cole o código na parte superior do functions.ts (ou functions.js para JavaScript) com o código copiado.

  8. Salve o arquivo.

Testar o suplemento autônomo

Depois que todas as etapas forem concluídas, execute e teste seu suplemento autônomo. Execute o comando a seguir para começar.

npm start

O Office será iniciado e será possível abrir o painel de tarefas do suplemento na faixa de opções. Parabéns! Agora é possível continuar criando seu suplemento como um projeto autônomo.

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 do Yo Office não tem uma seção de console. Todas as instruções console.log* serã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.