Tutorial: criar um suplemento do painel de tarefas no Excel

  • Artigo

Neste tutorial: você criará um suplemento do painel de tarefas no Excel

  • Cria uma tabela
  • Filtra e classifica uma tabela
  • Cria um gráfico
  • Congela um cabeçalho de tabela
  • Protege uma planilha
  • Abre uma caixa de diálogo

Dica

Se você já concluiu o inicio rápido do Criar um suplemento do painel de tarefas no Excel usando o gerador Yeoman e deseja usar esse projeto como ponto de partida para este tutorial, vá diretamente para a seção Criar uma tabela para iniciar este tutorial.

Se você quiser uma versão concluída deste tutorial, vá até o repositório de exemplos de Suplementos do Office no GitHub.

Pré-requisitos

  • Node.js (a versão mais recente de LTS). Visite o siteNode.js para baixar e instalar a versão certa para 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 tiver o Office, poderá se qualificar para uma assinatura de desenvolvedor Microsoft 365 E5 por meio do Programa de Desenvolvedor do Microsoft 365; para obter detalhes, confira as perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou comprar um plano do Microsoft 365.

Criar seu 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

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 um tipo de projeto:Office Add-in Task Pane project
  • Escolha um tipo de script:JavaScript
  • O que você deseja nomear seu suplemento?My Office Add-in
  • Qual aplicativo cliente do Office você gostaria de dar suporte?Excel

A interface da linha de comando do gerador de suplementos do Yeoman Office.

Depois que você concluir o assistente, o gerador criará o projeto e instalará os componentes Node de suporte. Talvez seja necessário executar npm install manualmente na pasta raiz do projeto se algo falhar durante a configuração inicial.

Observação

Se você estiver usando Node.js versão 20.0.0 ou posterior, poderá ver um aviso quando o gerador executar a instalação de que você tem um mecanismo sem suporte. Estamos trabalhando em uma correção para isso. Enquanto isso, o aviso não afeta o gerador ou o projeto que você gera, portanto, ele pode ser ignorado.

Dica

Você pode ignorar as orientações da próximas etapas fornecidas pelo gerador Yeoman após a criação do projeto de suplemento. As instruções passo a passo deste artigo fornecem todas as orientações necessárias para concluir este tutorial.

Criar uma tabela

Nesta etapa do tutorial, você testará no programa se o suplemento é compatível com a versão atual do Excel do usuário, adicionará uma tabela a uma planilha, depois preencherá e formatará a tabela com os dados.

Codificação do suplemento

  1. Abra o projeto em seu editor de código.

  2. Abra o arquivo ./src/taskpane/taskpane.html. Ele contém a marcação HTML para o painel de tarefas.

  3. Localize o elemento <main> e exclua todas as linhas que aparecem após a marca de abertura <main> e antes da marca de fechamento </main>.

  4. Adicione a seguinte marcação imediatamente após a marca de abertura <main>.

    <button class="ms-Button" id="create-table">Create Table</button><br/><br/>

  5. Abra o arquivo ./src/taskpane/taskpane.js. Este arquivo contém o código da API JavaScript do Office que facilita a interação entre o painel de tarefas e o aplicativo do cliente Office.

  6. Remova todas as referências ao botão run e à função run() da seguinte forma:

    • Localize e exclua a linha document.getElementById("run").onclick = run;.

    • Localize e exclua toda a função run().

  7. Na chamada de função Office.onReady, localize a linha if (info.host === Office.HostType.Excel) { e adicione o seguinte código imediatamente após ela. Observação:

    • Esse código adiciona um manipulador de eventos para o create-table botão.
    • A createTable função é encapsulada em uma chamada para tryCatch (ambas as funções serão adicionadas na próxima etapa). Isso permite que todos os erros gerados pela camada JavaScript do Office sejam tratados separados do código de serviço.
    // Assign event handlers and other initialization logic.
document.getElementById("create-table").onclick = () => tryCatch(createTable);

  8. Adicione as seguintes funções ao final do arquivo. Observação:

    • A lógica de negócios de Excel.js será adicionada à função que passar por Excel.run. Essa lógica não é executada imediatamente. Em vez disso, ela é adicionada à fila de comandos pendentes.

    • O método context.sync envia todos os comandos da fila para execução no Excel.

    • A tryCatch função será usada por todas as funções que interagem com a pasta de trabalho do painel de tarefas. Capturar erros do JavaScript do Office dessa forma é uma maneira conveniente de lidar genericamente com quaisquer erros não íntepromos.

    Observação

    O código a seguir usa o JavaScript ES6, que não é compatível com versões mais antigas do Office que usam o mecanismo do navegador Trident (Internet Explorer 11). Para obter informações sobre como dar suporte a essas plataformas em produção, consulte Suporte a versões mais antigas da Webviews da Microsoft e do Office. Você pode se qualificar para uma assinatura de desenvolvedor Microsoft 365 E5, que tem os aplicativos mais recentes do Office, para usar para desenvolvimento 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 comprar um plano do Microsoft 365.

    async function createTable() {
    await Excel.run(async (context) => {

        // TODO1: Queue table creation logic here.

        // TODO2: Queue commands to populate the table with data.

        // TODO3: Queue commands to format the table.

        await context.sync();
    });
}

/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
    try {
        await callback();
    } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
    }
}

  9. Na função createTable(), substitua TODO1 pelo código a seguir. Observação:

    • O código cria uma tabela usando o add método da coleção de tabelas de uma planilha, que sempre existe mesmo que esteja vazia. Essa é a maneira padrão de criar objetos no Excel.js. Não há nenhuma API do construtor de classe e você nunca usará um operador new para criar um objeto do Excel. Em vez disso, adicione a um objeto de conjunto pai.

    • O primeiro parâmetro do método addé o intervalo apenas da linha superior da tabela, não o intervalo inteiro que a tabela por fim usará. Isso ocorre porque, quando o suplemento preenche as linhas de dados (na próxima etapa), ele adicionará novas linhas à tabela, em vez de gravar os valores nas células das linhas existentes. Esse é um padrão comum, pois o número de linhas que uma tabela terá geralmente é desconhecido quando a tabela é criada.

    • Os nomes de tabelas devem ser exclusivos pela pasta de trabalho inteira, não só na planilha.

    const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
const expensesTable = currentWorksheet.tables.add("A1:D1", true /*hasHeaders*/);
expensesTable.name = "ExpensesTable";

  10. Na função createTable(), substitua TODO2 pelo código a seguir. Observação:

    • Os valores das células de um intervalo são definidos em uma matriz de matrizes.

    • Novas linhas são criadas em uma tabela ao chamar o método add do conjunto de linhas da tabela. Você pode adicionar várias linhas em uma única chamada de add ao incluir várias matrizes de valores de células na matriz pai que é passada como segundo parâmetro.

    expensesTable.getHeaderRowRange().values =
    [["Date", "Merchant", "Category", "Amount"]];

expensesTable.rows.add(null /*add at the end*/, [
    ["1/1/2017", "The Phone Company", "Communications", "120"],
    ["1/2/2017", "Northwind Electric Cars", "Transportation", "142.33"],
    ["1/5/2017", "Best For You Organics Company", "Groceries", "27.9"],
    ["1/10/2017", "Coho Vineyard", "Restaurant", "33"],
    ["1/11/2017", "Bellows College", "Education", "350.1"],
    ["1/15/2017", "Trey Research", "Other", "135"],
    ["1/15/2017", "Best For You Organics Company", "Groceries", "97.88"]
]);

  11. Na função createTable(), substitua TODO3 pelo código a seguir. Observação:

    • O código recebe uma referência para a coluna quantidade ao passar o índice com base em zero para o método getItemAt do conjunto de colunas da tabela.

      Observação

      Os objetos do conjunto Excel.js, como TableCollection, WorksheetCollection, e TableColumnCollection, têm a propriedade items que é como uma matriz dos tipos de objetos filhos, como Table ou Worksheet ou TableColumn; mas um objeto *Collection não é uma matriz.

    • O código formata o intervalo da coluna quantidade como Euros com um segundo decimal. Saiba mais sobre a sintaxe de formato de número do Excel no artigo Códigos de formato de número/

    • Por fim, isso garante que a largura das colunas e a altura das linhas sejam grandes o suficiente para o maior (ou o mais alto) item de dados. Observe que o código deve receber os objetos Range a formatar. Os objetos TableColumn e TableRow não têm propriedades de formato.

    expensesTable.columns.getItemAt(3).getRange().numberFormat = [['\u20AC#,##0.00']];
expensesTable.getRange().format.autofitColumns();
expensesTable.getRange().format.autofitRows();

  12. Verifique se você salvou todas as alterações feitas no projeto.

Testar o suplemento

  1. Conclua as etapas a seguir para iniciar o servidor Web local e fazer o sideload do seu suplemento.

    Observação

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

    Dica

    Se você estiver testando seu suplemento no Mac, execute o seguinte comando no diretório raiz do seu projeto antes de continuar. O servidor Web local é iniciado quando este comando é executado.

    npm run dev-server

    • Para testar o seu suplemento no Excel, execute o seguinte comando no diretório raiz do projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o Excel com o suplemento carregado.

      npm start

    • Para testar seu suplemento no Excel na Web, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua “{url}” pelo URL de um documento do Excel no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

      Observação

      Se você estiver desenvolvendo em um Mac, inclua as {url} aspas em um único. Não faça isso no Windows.

      npm run start:web -- --document {url}

      Eis alguns exemplos.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Se o suplemento não carregar de lado no documento, o carregará manualmente seguindo as instruções em suplementos de sideload manualmente para Office na Web.

  2. No Excel, escolha a guia Página Inicial e escolha o botão Mostrar Taskpane na faixa de opções para abrir o painel de tarefas de suplemento.

    O menu da Página Inicial do Excel, com o botão Mostrar Painel de Tarefas destacado.

  3. No painel de tarefas, escolha o botão Criar tabela.

    Excel exibindo um painel de tarefas de suplemento com um botão Criar Tabela e uma tabela na planilha preenchida com dados Data, Comerciante, Categoria e Quantidade.

Filtrar e classificar uma tabela

Nesta etapa do tutorial, você vai filtrar e classificar a tabela que criou anteriormente.

Filtrar a tabela

  1. Abra o arquivo ./src/taskpane/taskpane.html.

  2. Localize o elemento <button> do botão create-table e adicione a seguinte marcação logo após essa linha.

    <button class="ms-Button" id="filter-table">Filter Table</button><br/><br/>

  3. Abra o arquivo ./src/taskpane/taskpane.js.

  4. Na chamada de função Office.onReady, localize a linha que atribui um manipulador de cliques ao botão create-table e adicione o seguinte código após ela.

    document.getElementById("filter-table").onclick = () => tryCatch(filterTable);

  5. Adicione a seguinte função ao final do arquivo.

    async function filterTable() {
    await Excel.run(async (context) => {

        // TODO1: Queue commands to filter out all expense categories except
        //        Groceries and Education.

        await context.sync();
    });
}

  6. Na função filterTable(), substitua TODO1 pelo código a seguir. Observação:

    • O código primeiro faz referência à coluna que precisa de filtragem ao passar o nome da coluna para o método getItem, em vez de passar o índice para o método getItemAt como o método createTable faz. Como os usuários podem mover as colunas da tabela, a coluna de um determinado índice pode mudar depois da criação da tabela. Portanto, é mais seguro usar o nome da coluna como referência dela. Usamos de forma segura getItemAt em um tutorial anterior porque usamos o mesmo método que cria a tabela. Assim não existe a chance de um usuário mover a coluna.

    • O método applyValuesFilter é um dos vários métodos de filtragem do objeto Filter.

    const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
const expensesTable = currentWorksheet.tables.getItem('ExpensesTable');
const categoryFilter = expensesTable.columns.getItem('Category').filter;
categoryFilter.applyValuesFilter(['Education', 'Groceries']);

Classificar a tabela

  1. Abra o arquivo ./src/taskpane/taskpane.html.

  2. Localize o elemento <button> do botão filter-table e adicione a seguinte marcação logo após essa linha.

    <button class="ms-Button" id="sort-table">Sort Table</button><br/><br/>

  3. Abra o arquivo ./src/taskpane/taskpane.js.

  4. Na chamada de função Office.onReady, localize a linha que atribui um manipulador de cliques ao botão filter-table e adicione o seguinte código após ela.

    document.getElementById("sort-table").onclick = () => tryCatch(sortTable);

  5. Adicione a seguinte função ao final do arquivo.

    async function sortTable() {
    await Excel.run(async (context) => {

        // TODO1: Queue commands to sort the table by Merchant name.

        await context.sync();
    });
}

  6. Na função sortTable(), substitua TODO1 pelo código a seguir. Observação:

    • O código cria uma matriz de objetos SortField, que possui apenas um membro, pois o suplemento é classificado apenas na coluna Merchant.

    • A propriedade key de um objeto SortField é o índice baseado em zero da coluna usada para classificação. As linhas da tabela são classificadas com base nos valores da coluna referenciada.

    • O membro sort de uma Table é um objeto TableSort, não um método. Os SortFields são passados para o método apply do objeto TableSort.

    const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
const expensesTable = currentWorksheet.tables.getItem('ExpensesTable');
const sortFields = [
    {
        key: 1,            // Merchant column
        ascending: false,
    }
];

expensesTable.sort.apply(sortFields);

  7. Verifique se você salvou todas as alterações feitas no projeto.

Testar o suplemento

  1. Se o servidor da Web local já estiver em execução e seu suplemento já estiver carregado no Word, prossiga para a etapa 2. Inicie o servidor Web local e realize o sideload no seu suplemento:

    • Para testar o seu suplemento no Excel, execute o seguinte comando no diretório raiz do projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o Excel com o suplemento carregado.

      npm start

    • Para testar seu suplemento no Excel na Web, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua “{url}” pelo URL de um documento do Excel no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

      Observação

      Se você estiver desenvolvendo em um Mac, inclua as {url} aspas em um único. Não faça isso no Windows.

      npm run start:web -- --document {url}

      Eis alguns exemplos.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Se o suplemento não carregar de lado no documento, o carregará manualmente seguindo as instruções em suplementos de sideload manualmente para Office na Web.

  2. Se o painel de tarefas de suplemento ainda não estiver aberto no Excel, acesse a guia Página Inicial e escolha o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

  3. Se a tabela que você adicionou anteriormente neste tutorial não estiver presente na planilha aberta, escolha o botão Criar tabela no painel de tarefas.

  4. Escolha os botões Filtrar Tabela e Classificar Tabela, em qualquer ordem.

    Botões do Excel com Tabela de Filtro e Tabela de Classificação visíveis no painel de tarefas de suplemento.

Criar um gráfico

Nesta etapa do tutorial, você vai criar um gráfico com dados da tabela que você criou anteriormente e depois vai formatar o gráfico.

Gráfico de um gráfico com dados de tabela

  1. Abra o arquivo ./src/taskpane/taskpane.html.

  2. Localize o elemento <button> do botão sort-table e adicione a seguinte marcação logo após essa linha.

    <button class="ms-Button" id="create-chart">Create Chart</button><br/><br/>

  3. Abra o arquivo ./src/taskpane/taskpane.js.

  4. Na chamada de função Office.onReady, localize a linha que atribui um manipulador de cliques ao botão sort-table e adicione o seguinte código após ela.

    document.getElementById("create-chart").onclick = () => tryCatch(createChart);

  5. Adicione a seguinte função ao final do arquivo.

    async function createChart() {
    await Excel.run(async (context) => {

        // TODO1: Queue commands to get the range of data to be charted.

        // TODO2: Queue command to create the chart and define its type.

        // TODO3: Queue commands to position and format the chart.

        await context.sync();
    });
}

  6. Na função createChart(), substitua TODO1 pelo código a seguir. Para excluir a linha de cabeçalho, o código usa o método Table.getDataBodyRange para acessar o intervalo de dados que você deseja representar graficamente em vez do método getRange.

    const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
const expensesTable = currentWorksheet.tables.getItem('ExpensesTable');
const dataRange = expensesTable.getDataBodyRange();

  7. Na função createChart(), substitua TODO2 pelo código a seguir. Observe os seguintes parâmetros.

    • O primeiro parâmetro para o método add especifica o tipo de gráfico. Há diversos tipos.

    • O segundo parâmetro especifica um intervalo de dados a incluir no gráfico.

    • O terceiro parâmetro determina se uma série de pontos de dados da tabela deve estar representada por linha ou por coluna. A opção auto informa ao Excel para decidir o melhor método.

    const chart = currentWorksheet.charts.add('ColumnClustered', dataRange, 'Auto');

  8. Na função createChart(), substitua TODO3 pelo código a seguir. A maior parte do código é autoexplicativa. Observação:

    • Os parâmetros do método setPosition especificam as células da esquerda superior e da direita inferior da área da planilha que deve conter o gráfico. O Excel ajusta detalhes como a largura da linha para criar uma boa aparência para o gráfico no espaço fornecido.

    • "Série" é um conjunto de pontos de dados de uma coluna da tabela. Como há apenas uma coluna sem cadeia de caracteres na tabela, o Excel deduz que essa é a única coluna de pontos de dados no gráfico. Ele interpreta outras colunas como rótulos do gráfico. Portanto, haverá apenas uma série no gráfico e será necessário o índice 0. Ele será rotulado como "Valor em €".

    chart.setPosition("A15", "F30");
chart.title.text = "Expenses";
chart.legend.position = "Right";
chart.legend.format.fill.setSolidColor("white");
chart.dataLabels.format.font.size = 15;
chart.dataLabels.format.font.color = "black";
chart.series.getItemAt(0).name = 'Value in \u20AC';

  9. Verifique se você salvou todas as alterações feitas no projeto.

Testar o suplemento

  1. Se o servidor da Web local já estiver em execução e seu suplemento já estiver carregado no Word, prossiga para a etapa 2. Inicie o servidor Web local e realize o sideload no seu suplemento:

    • Para testar o seu suplemento no Excel, execute o seguinte comando no diretório raiz do projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o Excel com o suplemento carregado.

      npm start

    • Para testar seu suplemento no Excel na Web, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua “{url}” pelo URL de um documento do Excel no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

      Observação

      Se você estiver desenvolvendo em um Mac, inclua as {url} aspas em um único. Não faça isso no Windows.

      npm run start:web -- --document {url}

      Eis alguns exemplos.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Se o suplemento não carregar de lado no documento, o carregará manualmente seguindo as instruções em suplementos de sideload manualmente para Office na Web.

  2. Se o painel de tarefas de suplemento ainda não estiver aberto no Excel, acesse a guia Página Inicial e escolha o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

  3. Se a tabela que você adicionou anteriormente neste tutorial não estiver presente na planilha aberta, escolha o botão Criar tabela e depois os botões Filtrar Tabela e Classificar Tabela, em qualquer ordem.

  4. Clique no botão Criar gráfico. Um gráfico é criado e incluirá somente os dados das linhas que foram filtradas. Os rótulos dos pontos de dados na parte inferior estão na ordem de classificação do gráfico, ou seja, nomes de comerciantes em ordem alfabética inversa.

    Excel com um botão Criar Gráfico visível no painel de tarefas de suplemento e um gráfico na planilha que exibe dados de despesas de supermercado e educação.

Congelar um cabeçalho de tabela

Quando uma tabela for longa o suficiente para que um usuário precise rolar para ver algumas linhas, a linha de cabeçalho poderá ficar fora da vista. Nesta etapa do tutorial, você precisará congelar a linha do cabeçalho da tabela que criou anteriormente para que ela permaneça visível, mesmo que o usuário role ao longo da planilha.

Congelar a linha de cabeçalho da tabela

  1. Abra o arquivo ./src/taskpane/taskpane.html.

  2. Localize o elemento <button> do botão create-chart e adicione a seguinte marcação logo após essa linha.

    <button class="ms-Button" id="freeze-header">Freeze Header</button><br/><br/>

  3. Abra o arquivo ./src/taskpane/taskpane.js.

  4. Na chamada de função Office.onReady, localize a linha que atribui um manipulador de cliques ao botão create-chart e adicione o seguinte código após ela.

    document.getElementById("freeze-header").onclick = () => tryCatch(freezeHeader);

  5. Adicione a seguinte função ao final do arquivo.

    async function freezeHeader() {
    await Excel.run(async (context) => {

        // TODO1: Queue commands to keep the header visible when the user scrolls.

        await context.sync();
    });
}

  6. Na função freezeHeader(), substitua TODO1 pelo código a seguir. Observação:

    • A coleção Worksheet.freezePanes é um conjunto de painéis da planilha que fica congelado ou fixado no mesmo lugar quando rolamos a planilha.

    • O método freezeRows usa como parâmetro o número de linhas, a partir do topo, que devem ser fixadas no lugar. Passamos 1 para fixar a primeira linha no lugar.

    const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
currentWorksheet.freezePanes.freezeRows(1);

  7. Verifique se você salvou todas as alterações feitas no projeto.

Testar o suplemento

  1. Se o servidor da Web local já estiver em execução e seu suplemento já estiver carregado no Word, prossiga para a etapa 2. Inicie o servidor Web local e realize o sideload no seu suplemento:

    • Para testar o seu suplemento no Excel, execute o seguinte comando no diretório raiz do projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o Excel com o suplemento carregado.

      npm start

    • Para testar seu suplemento no Excel na Web, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua “{url}” pelo URL de um documento do Excel no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

      Observação

      Se você estiver desenvolvendo em um Mac, inclua as {url} aspas em um único. Não faça isso no Windows.

      npm run start:web -- --document {url}

      Eis alguns exemplos.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Se o suplemento não carregar de lado no documento, o carregará manualmente seguindo as instruções em suplementos de sideload manualmente para Office na Web.

  2. Se o painel de tarefas de suplemento ainda não estiver aberto no Excel, acesse a guia Página Inicial e escolha o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

  3. Se a tabela que você adicionou anteriormente neste tutorial estiver presente na planilha, faça a exclusão dela.

  4. No painel de tarefas, escolha o botão Criar tabela.

  5. No painel de tarefas, escolha o botão Congelar Cabeçalho.

  6. Role a planilha para baixo o suficiente para ver que o cabeçalho da tabela permanece visível na parte superior mesmo ao rolar até que as primeiras linhas fiquem fora da vista.

    Uma planilha do Excel com um cabeçalho de tabela congelado.

Proteger uma planilha

Nesta etapa do tutorial, você adicionará um botão à faixa de opções que ativa ou desativa a proteção da planilha.

Configure o manifesto para adicionar um segundo botão à faixa de opções

  1. Abra o arquivo de manifesto ./manifest.xml.

  2. Localize o <elemento Control> . Esse elemento define o botão Mostrar Painel de Tarefas na faixa de opções Início que você usa para iniciar o suplemento. Vamos adicionar um segundo botão ao mesmo grupo na faixa de opções Início. Entre a marca de fechamento</controle> e a marca de fechamento< /Grupo>, adicione a marcação a seguir.

    <Control xsi:type="Button" id="<!--TODO1: Unique (in manifest) name for button -->">
    <Label resid="<!--TODO2: Button label -->" />
    <Supertip>
        <Title resid="<!-- TODO3: Button tool tip title -->" />
        <Description resid="<!-- TODO4: Button tool tip description -->" />
    </Supertip>
    <Icon>
        <bt:Image size="16" resid="Icon.16x16"/>
        <bt:Image size="32" resid="Icon.32x32"/>
        <bt:Image size="80" resid="Icon.80x80"/>
    </Icon>
    <Action xsi:type="<!-- TODO5: Specify the type of action-->">
        <!-- TODO6: Identify the function.-->
    </Action>
</Control>

  3. No XML que você acabou de adicionar ao arquivo de manifesto, substitua TODO1 por uma sequência que forneça ao botão um ID exclusivo nesse arquivo de manifesto. Como nosso botão ativará ou desativará a proteção da planilha, use "ToggleProtection". Quando você terminar, a marca de abertura para o elemento Control deverá ficar assim:

    <Control xsi:type="Button" id="ToggleProtection">

  4. Os próximos três TODOs definem IDs de recurso ou resids. Um recurso é uma cadeia de caracteres (com um comprimento máximo de 32 caracteres), e você cria essas três cadeias em uma etapa posterior. Por enquanto, você precisa fornecer IDs aos recursos. O rótulo do botão deve ser "Toggle Protection", mas o ID dessa cadeia de caracteres deve ser "ProtectionButtonLabel", para que o elemento Label fique assim:

    <Label resid="ProtectionButtonLabel" />

  5. O elemento SuperTip define a dica de ferramenta do botão. O título da dica de ferramenta deve ser o mesmo que o rótulo do botão, por isso, usamos a mesma ID de recurso: "ProtectionButtonLabel". A descrição da dica de ferramenta será "Click to turn protection of the worksheet on and off". Mas o resid será "ProtectionButtonToolTip". Portanto, quando você terminar, o elemento SuperTip deverá ficar assim:

    <Supertip>
    <Title resid="ProtectionButtonLabel" />
    <Description resid="ProtectionButtonToolTip" />
</Supertip>

    Observação

    Em um suplemento de produção,não é recomendável usar o mesmo ícone para dois botões diferentes; mas, para simplificar este tutorial, faremos isso. Portanto, a marcação Icon em nosso novo Control é apenas uma cópia do elemento Icon do Control existente.

  6. O elemento Action dentro do elemento original Control tem seu tipo definido como ShowTaskpane, mas nosso novo botão não abre um painel de tarefas; ele executará uma função personalizada criada em uma etapa posterior. Portanto, substitua TODO5 por ExecuteFunction, que é o tipo de ação para botões que acionam funções personalizadas. A marca de abertura para o elemento Action deve ficar assim:

    <Action xsi:type="ExecuteFunction">

  7. O elemento Action original tem elementos filhos que especificam uma ID do painel de tarefas e uma URL da página que deve ser aberta no painel de tarefas. No entanto, um elemento Action do tipo ExecuteFunction tem um único elemento filho que nomeia a função executada pelo controle. Você criará essa função em uma etapa posterior e ela será chamada de toggleProtection. Portanto, substitua TODO6 pela marcação a seguir.

    <FunctionName>toggleProtection</FunctionName>

    A marcação Control inteira deve ter a aparência a seguir:

    <Control xsi:type="Button" id="ToggleProtection">
    <Label resid="ProtectionButtonLabel" />
    <Supertip>
        <Title resid="ProtectionButtonLabel" />
        <Description resid="ProtectionButtonToolTip" />
    </Supertip>
    <Icon>
        <bt:Image size="16" resid="Icon.16x16"/>
        <bt:Image size="32" resid="Icon.32x32"/>
        <bt:Image size="80" resid="Icon.80x80"/>
    </Icon>
    <Action xsi:type="ExecuteFunction">
       <FunctionName>toggleProtection</FunctionName>
    </Action>
</Control>

  8. Role para baixo até a seção Resources do manifesto.

  9. Adicione a seguinte marcação como filho do elemento bt:ShortStrings.

    <bt:String id="ProtectionButtonLabel" DefaultValue="Toggle Worksheet Protection" />

  10. Adicione a seguinte marcação como filho do elemento bt:LongStrings.

    <bt:String id="ProtectionButtonToolTip" DefaultValue="Click to protect or unprotect the current worksheet." />

  11. Salve o arquivo.

Criar a função que protege a planilha

  1. Abra o arquivo .\commands\commands.js.

  2. Adicione a seguinte função imediatamente após a função action. Especificamos um parâmetro args para a função, e a última linha da função chama args.completed. Esse é um requisito para todos os comandos de suplemento do tipo ExecuteFunction. Ele sinaliza para o aplicativo do cliente Office que a função terminou e que a interface do usuário podem ficar responsiva novamente.

    async function toggleProtection(args) {
    try {
        await Excel.run(async (context) => {

            // TODO1: Queue commands to reverse the protection status of the current worksheet.

            await context.sync();
        });
    } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
    }

    args.completed();
}

  3. Adicione a linha a seguir imediatamente após a função para registrá-la.

    Office.actions.associate("toggleProtection", toggleProtection);

  4. Na função toggleProtection, substitua TODO1 pelo código a seguir. O código usa propriedade de proteção do objeto de planilha em um padrão de botão de alternância padrão. O TODO2 será explicado na próxima seção.

    const sheet = context.workbook.worksheets.getActiveWorksheet();

// TODO2: Queue command to load the sheet's "protection.protected" property from
//        the document and re-synchronize the document and task pane.

if (sheet.protection.protected) {
    sheet.protection.unprotect();
} else {
    sheet.protection.protect();
}

Adicione código para buscar propriedades do documento em objetos de script do painel de tarefas

Em cada função criada neste tutorial até agora, você enfileirou comandos para gravar no documento do Office. Cada função terminou com uma chamada para o método context.sync(), que envia os comandos em fila para o documento a ser executado. No entanto, o código que você adicionou na última etapa chama o sheet.protection.protected property. Essa é uma diferença significativa das funções anteriores que você escreveu, porque o objeto sheet é apenas um objeto proxy que existe no script do painel de tarefas. O objeto proxy não conhece o estado real de proteção do documento, portanto, sua propriedade protection.protected não pode ter um valor real. Para evitar um erro de exceção, você deve primeiro buscar o status de proteção do documento e usá-lo para definir o valor desheet.protection.protected. Esse processo de busca tem três etapas.

  1. Coloque em fila um comando para carregar (ou seja, fetch) as propriedades que seu código precisa ler.

  2. Chame o método sync do objeto de contexto para enviar o comando em fila para o documento para execução e retornar as informações solicitadas.

  3. Como o método sync é assíncrono, certifique-se de que ele tenha sido concluído antes que o código chame as propriedades que foram buscadas.

Essas etapas devem ser concluídas sempre que seu código precisar ler informações do documento do Office.

  1. Na função toggleProtection, substitua TODO2 pelo código a seguir. Observação:

    • Todos os objetos do Excel têm um método load. Especifique as propriedades do objeto que você deseja ler no parâmetro como uma cadeia de caracteres de nomes delimitados por vírgulas. Nesse caso, a propriedade que você precisa ler é uma subpropriedade de protection. Referencie a subpropriedade quase exatamente como você faria em qualquer lugar do seu código, mas usando uma barra (“/”) em vez de um ponto (".").

    • Para garantir que a lógica de alternância, que lê sheet.protection.protected, não seja executada até que o sync seja concluído e o sheet.protection.protected tenha recebido o valor correto obtido do documento, ele deverá vir depois que o operador await garantir que sync tenha sido concluído.

    sheet.load('protection/protected');
await context.sync();

    Quando terminar, a função inteira deve se parecer com o seguinte:

    async function toggleProtection(args) {
    try {
        await Excel.run(async (context) => {
            const sheet = context.workbook.worksheets.getActiveWorksheet();

            sheet.load('protection/protected');
            await context.sync();

            if (sheet.protection.protected) {
                sheet.protection.unprotect();
            } else {
                sheet.protection.protect();
            }

            await context.sync();
        });
    } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
    }

    args.completed();
}

  2. Verifique se você salvou todas as alterações feitas no projeto.

Testar o suplemento

  1. Feche todos os aplicativos do Office, incluindo o Excel (ou feche a guia do navegador se você estiver usando Excel na Web).

  2. Desmarque o cache do Office. Isso é necessário para limpar completamente a versão anterior do suplemento do aplicativo cliente. As instruções para esse processo estão no artigo Limpar o cache do Office.

  3. Se o servidor da Web local já estiver em execução, interrompa-o digitando o seguinte comando no prompt de comando. Isso deve fechar a janela de comando do nó.

    npm stop

  4. Como o arquivo de manifesto foi atualizado, você deve carregar o suplemento novamente usando esse arquivo. Inicie o servidor Web local e realize o sideload no seu suplemento.

    • Para testar o seu suplemento no Excel, execute o seguinte comando no diretório raiz do projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o Excel com o suplemento carregado.

      npm start

    • Para testar seu suplemento no Excel na Web, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua “{url}” pelo URL de um documento do Excel no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

      Observação

      Se você estiver desenvolvendo em um Mac, inclua as {url} aspas em um único. Não faça isso no Windows.

      npm run start:web -- --document {url}

      Eis alguns exemplos.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Se o suplemento não carregar de lado no documento, o carregará manualmente seguindo as instruções em suplementos de sideload manualmente para Office na Web.

  5. Na guia Página Inicial no Excel, escolha o botão Proteger Planilha. A maioria dos controles da faixa de opções está desabilitada e esmaecida, como mostra a captura de tela a seguir.

    A faixa de opções do Excel com o botão Proteção de Planilha de Alternância realçada e habilitada. A maioria dos outros botões aparece cinza e desabilitado.

  6. Selecione uma célula e tente editar seu conteúdo. O Excel exibe uma mensagem de erro indicando que a planilha está protegida.

  7. Escolha o botão Proteger Planilha novamente. Os controles são reabilitados, e você pode alterar os valores das células novamente.

Abrir uma caixa de diálogo

Nesta etapa final do tutorial, você abre uma caixa de diálogo no suplemento, passa uma mensagem do processo de caixa de diálogo para o processo de painel de tarefas e fecha a caixa de diálogo. As caixas de diálogo Suplemento do Office não são demodal: um usuário pode continuar a interagir com o documento no aplicativo do Office e com a página host no painel de tarefas.

Crie a página da caixa de diálogo

  1. Na pasta ./src localizada na raiz do projeto, crie uma pasta chamada dialogs.

  2. Na pasta ./src/dialogs, crie um novo arquivo chamado popup.html.

  3. Adicione a seguinte marcação a popup.html. Observação:

    • A página possui um campo <input> onde o usuário digitará seu nome e um botão que enviará esse nome para o painel de tarefas em que será exibido.

    • a marcação carrega um script chamado popup.js que você criará em uma etapa posterior.

    • Ela também carrega a biblioteca Office.js porque esta será usada em popup.js.

    <!DOCTYPE html>
<html>
    <head lang="en">
        <title>Dialog for My Office Add-in</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui. -->
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

        <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
        <script type="text/javascript" src="popup.js"></script>

    </head>
    <body style="display:flex;flex-direction:column;align-items:center;justify-content:center">
        <p class="ms-font-xl">ENTER YOUR NAME</p>
        <input id="name-box" type="text"/><br/><br/>
        <button id="ok-button" class="ms-Button">OK</button>
    </body>
</html>

  4. Na pasta ./src/dialogs, crie um arquivo chamado popup.js.

  5. Adicione o código a seguir a popup.js. Observe o seguinte sobre este código.

    • Todas as páginas que chamam APIs na biblioteca Office.JS devem primeiro garantir que a biblioteca tenha sido totalmente inicializada. A melhor maneira de fazer isso é chamando a função Office.onReady(). A chamada de Office.onReady() deve ser executada antes de qualquer chamada para Office.js; por isso, a tarefa se encontra em um arquivo de script que é carregado pela página, como neste caso.
    Office.onReady((info) => {
    // TODO1: Assign handler to the OK button.
});

// TODO2: Create the OK button handler.

  6. Substitua TODO1 pelo código a seguir. Você criará a função sendStringToParentPage na próxima etapa.

    document.getElementById("ok-button").onclick = () => tryCatch(sendStringToParentPage);

  7. Substitua TODO2 pelo código a seguir. O método messageParent passa seu parâmetro para a página pai, neste caso, a página no painel de tarefas. O parâmetro deve ser uma cadeia de caracteres, que inclui qualquer coisa que possa ser serializada como uma cadeia de caracteres, como XML ou JSON, ou qualquer tipo que possa ser convertido em uma cadeia de caracteres. Isso também adiciona o mesmo tryCatch método usado em taskpane.js para tratamento de erros.

    function sendStringToParentPage() {
    const userName = document.getElementById("name-box").value;
    Office.context.ui.messageParent(userName);
}

/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
    try {
        await callback();
    } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
    }
}

Observação

O arquivo popup.html e o arquivo popup.js que ele carrega são executados em um processo do Internet Explorer completamente separado do painel de tarefas do suplemento. Se o popup.js foi transcompilado no mesmo arquivo bundle.js que o arquivo app.js, o suplemento precisará carregar duas cópias do arquivo bundle.js, o que anula o propósito do agrupamento. Portanto, esse suplemento não transcompila o arquivo popup.js.

Atualizar as configurações webpack config

Abra o arquivo webpack.config.js no diretório raiz do projeto e conclua as seguintes etapas.

  1. Localize o objeto entry dentro do objeto config e adicione uma nova entrada para popup.

    popup: "./src/dialogs/popup.js"

    Após fazer isso, o novo objeto entry terá a seguinte aparência.

    entry: {
  polyfill: "@babel/polyfill",
  taskpane: "./src/taskpane/taskpane.js",
  commands: "./src/commands/commands.js",
  popup: "./src/dialogs/popup.js"
},

  2. Localize a matriz plugins no objeto config e adicione o seguinte objeto ao final dela.

    new HtmlWebpackPlugin({
  filename: "popup.html",
  template: "./src/dialogs/popup.html",
  chunks: ["polyfill", "popup"]
})

    Após fazer isso, a nova plugins matriz terá a seguinte aparência.

    plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    filename: "taskpane.html",
    template: "./src/taskpane/taskpane.html",
    chunks: ['polyfill', 'taskpane']
  }),
  new CopyWebpackPlugin([
  {
    to: "taskpane.css",
    from: "./src/taskpane/taskpane.css"
  }
  ]),
  new HtmlWebpackPlugin({
    filename: "commands.html",
    template: "./src/commands/commands.html",
    chunks: ["polyfill", "commands"]
  }),
  new HtmlWebpackPlugin({
    filename: "popup.html",
    template: "./src/dialogs/popup.html",
    chunks: ["polyfill", "popup"]
  })
],

  3. Se o servidor Web local estiver em execução, interrompa-o digitando o seguinte comando no prompt de comando. Isso deve fechar a janela de comando do nó.

    npm stop

  4. Execute o seguinte comando para recriar o projeto.

    npm run build

Abra a caixa de diálogo do painel de tarefas

  1. Abra o arquivo ./src/taskpane/taskpane.html.

  2. Localize o elemento <button> do botão freeze-header e adicione a seguinte marcação logo após essa linha.

    <button class="ms-Button" id="open-dialog">Open Dialog</button><br/><br/>

  3. A caixa de diálogo solicitará que o usuário insira um nome e passará o nome de usuário para o painel de tarefas. O painel de tarefas o exibirá em um rótulo. Imediatamente após o button que você adicionou, adicione a marcação a seguir.

    <label id="user-name"></label><br/><br/>

  4. Abra o arquivo ./src/taskpane/taskpane.js.

  5. Na chamada de função Office.onReady, localize a linha que atribui um manipulador de cliques ao botão freeze-header e adicione o seguinte código após ela. Você criará o método openDialog em uma etapa posterior.

    document.getElementById("open-dialog").onclick = openDialog;

  6. Adicione a seguinte declaração ao final do arquivo: Essa variável é usada para armazenar um objeto no contexto de execução da página pai que atua como um intermediador no contexto de execução da página da caixa de diálogo.

    let dialog = null;

  7. Adicione a seguinte função ao final do arquivo, após a declaração de dialog. É importante observar o que esse código não contém: não há nenhuma chamada de Excel.run. Isso ocorre porque a API para abrir uma caixa de diálogo é compartilhada com todos os aplicativos do Office, portanto, ela faz parte da API Comum de JavaScript do Office, não da API específica do Excel.

    function openDialog() {
    // TODO1: Call the Office Common API that opens a dialog.
}

  8. Substitua TODO1 pelo código a seguir. Observação:

    • O métododisplayDialogAsync abre uma caixa de diálogo no centro da tela.

    • O primeiro parâmetro é a URL da página a ser aberta.

    • O segundo parâmetro passa opções. height e width são porcentagens do tamanho da janela do aplicativo do Office.

    Office.context.ui.displayDialogAsync(
    'https://localhost:3000/popup.html',
    {height: 45, width: 55},

    // TODO2: Add callback parameter.
);

Processar a mensagem da caixa de diálogo e depois fechá-la

  1. Na função openDialog no arquivo ./src/taskpane/taskpane.js, substitua TODO2 pelo código a seguir. Observação:

    • O retorno de chamada é executado imediatamente depois que a caixa de diálogo é aberta com êxito e antes de usuário executar a ação na caixa de diálogo.

    • O result.value é o objeto que atua como intermediário entre os contextos de execução das páginas pai e de diálogo.

    • A função processMessage será criada em uma etapa posterior. Esse identificador processará os valores que sejam enviados da página da caixa de diálogo com chamadas da função messageParent.

    function (result) {
    dialog = result.value;
    dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
}

  2. Adicione a seguinte função após a função openDialog.

    function processMessage(arg) {
    document.getElementById("user-name").innerHTML = arg.message;
    dialog.close();
}

  3. Verifique se você salvou todas as alterações feitas no projeto.

Testar o suplemento

  1. Se o servidor da Web local já estiver em execução e seu suplemento já estiver carregado no Word, prossiga para a etapa 2. Inicie o servidor Web local e realize o sideload no seu suplemento:

    • Para testar o seu suplemento no Excel, execute o seguinte comando no diretório raiz do projeto. Isso inicia o servidor Web local (caso ainda não esteja em execução) e abre o Excel com o suplemento carregado.

      npm start

    • Para testar seu suplemento no Excel na Web, execute o seguinte comando no diretório raiz do seu projeto. O servidor Web local é iniciado quando este comando é executado. Substitua “{url}” pelo URL de um documento do Excel no seu OneDrive ou uma biblioteca do SharePoint para a qual você tenha permissões.

      Observação

      Se você estiver desenvolvendo em um Mac, inclua as {url} aspas em um único. Não faça isso no Windows.

      npm run start:web -- --document {url}

      Eis alguns exemplos.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Se o suplemento não carregar de lado no documento, o carregará manualmente seguindo as instruções em suplementos de sideload manualmente para Office na Web.

  2. Se o painel de tarefas de suplemento ainda não estiver aberto no Excel, acesse a guia Página Inicial e escolha o botão Mostrar Painel de Tarefas na faixa de opções para abri-lo.

  3. Escolha o botão Abrir Caixa de Diálogo no painel de tarefas.

  4. Quando a caixa de diálogo estiver aberta, arraste-a e redimensione-a. Observe que você pode interagir com a planilha e pressionar outros botões no painel de tarefas. No entanto, não é possível iniciar uma segunda caixa de diálogo na mesma página do painel de tarefas.

  5. Na caixa de diálogo, digite um nome e escolha o botão OK. O nome aparecerá no painel de tarefas e a caixa de diálogo será fechada.

  6. Opcionalmente, no arquivo ./src/taskpane/taskpane.js , comente a linha dialog.close(); na processMessage função. Em seguida, repita as etapas desta seção. A caixa de diálogo permanece aberta e você pode alterar o nome. É possível fechá-la manualmente pressionando o botão X no canto superior direito.

    Excel com um botão Abrir Caixa de Diálogo visível no painel de tarefas de suplemento e uma caixa de diálogo exibida na planilha.

Próximas etapas

Neste tutorial você criou um suplemento do Excel que interage com tabelas, gráficos, planilhas e caixas de diálogo em uma pasta de trabalho do Excel. Para saber mais sobre o desenvolvimento de suplementos do Excel, continue no artigo a seguir.

Visão geral dos suplementos do Excel

Exemplos de código

Confira também