Crie seu primeiro suplemento de painel de tarefas do Excel com o Visual Studio

Se você não estiver familiarizado com os Suplementos do Office, este início rápido é uma maneira rápida de criar um. Em cerca de 5 minutos, você criará um suplemento do painel de tarefas do Excel no Visual Studio que define a cor de preenchimento das células selecionadas.

Pré-requisitos

  • Visual Studio 2019 ou posterior com a carga de trabalho Desenvolvimento Office/SharePoint instalada.

    Observação

    Se você já instalou o Visual Studio, use o Instalador do Visual Studio para garantir que a carga de trabalho de desenvolvimento do Office/SharePoint esteja instalada.

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

Criar o projeto do suplemento

  1. No Visual Studio, escolha Criar um novo projeto.

  2. Usando a caixa de pesquisa, insira suplemento. Escolha suplemento do Excel Web , em seguida, selecione Próximo.

  3. Nomeie seu projeto ExcelWebAddIn1e selecione Criar.

  4. Na janela Criar Suplemento do Office, escolha Adicionar novas funcionalidades para o Excele clique em Concluir para criar o projeto.

  5. O Visual Studio cria uma solução, e os dois projetos dele são exibidos no Gerenciador de Soluções. O arquivo Home.html é aberto no Visual Studio.

Explorar a solução do Visual Studio

Ao concluir o assistente, o Visual Studio cria uma solução que contém dois projetos.

Project Descrição
Projeto de suplemento Contém apenas um arquivo de manifesto somente de suplemento formatado em XML, que contém todas as configurações que descrevem seu suplemento. As configurações ajudam o aplicativo do Office a determinar quando o suplemento deverá ser ativado e onde ele deverá aparecer. O Visual Studio gera o conteúdo desse arquivo para que você possa executar o projeto e usar o suplemento imediatamente. Altere essas configurações a qualquer momento modificando o arquivo XML.
Projeto de aplicativo Web Contém as páginas de conteúdo do suplemento, incluindo todos os arquivos e referências de arquivo de que você precisa para desenvolver páginas HTML e JavaScript com reconhecimento do Office. Enquanto você desenvolve o suplemento, o Visual Studio hospeda o aplicativo Web no servidor IIS local. Quando estiver pronto para publicar, você precisará implantar este projeto de aplicativo Web em um servidor Web.

Adicionar marcação inicial e script

  1. Home.html especifica o HTML que será renderizado no painel de tarefas do suplemento. Em Home.html, substitua o elemento <body> pela marcação a seguir e salve o arquivo.

    <body class="ms-font-m ms-welcome">
    <div id="content-header">
        <div class="padding">
            <h1>Welcome</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <p>Choose the button below to set the color of the selected range to green.</p>
            <br />
            <h3>Try it out</h3>
            <button class="ms-Button" id="set-color">Set color</button>
        </div>
    </div>
</body>

  2. Abra o arquivo Home.js na raiz do projeto do aplicativo Web. Este arquivo especifica o script do suplemento. Substitua todo o conteúdo pelo código a seguir e salve o arquivo.

    'use strict';

(function () {

    Office.onReady(function() {
        // Office is ready.
        $(document).ready(function () {
            // The document is ready.
            $('#set-color').on("click", setColor);
        });
    });

    async function setColor() {
        await Excel.run(async (context) => {
            const range = context.workbook.getSelectedRange();
            range.format.fill.color = 'green';

            await context.sync();
        }).catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
})();

  3. Abra o arquivo Home.css na raiz do projeto do aplicativo Web. Este arquivo especifica os estilos personalizados para o suplemento. Substitua todo o conteúdo pelo código a seguir e salve o arquivo.

    #content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

#content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.padding {
    padding: 15px;
}

Atualizar o manifesto

  1. No Gerenciador de Soluções, vá para o projeto de suplemento ExcelWebAddIn1e abra o diretório ExcelWebAddIn1Manifest. Este diretório contém seu arquivo de manifesto, ExcelWebAddIn1.xml. O arquivo de manifesto define as configurações e as funcionalidades do suplemento. Consulte a seção anterior Explorar a solução Visual Studio para obter mais informações sobre os dois projetos criados por sua solução Visual Studio.

  2. O elemento ProviderName tem um valor de espaço reservado. Substitua-o com seu nome.

  3. O atributo DefaultValue do elemento DisplayName tem um espaço reservado. Substitua-o pelo suplementos do My Office.

  4. O atributo DefaultValue do elemento Description tem um espaço reservado. Substitua-o com um suplemento do painel de tarefas do Excel.

  5. Salve o arquivo.

    ...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="A task pane add-in for Excel"/>
...

Experimente

  1. Usando o Visual Studio, teste o suplemento do Excel recém-criado pressionando F5 ou escolhendo o botão Iniciar para iniciar o Excel com o botão do suplemento Mostrar Painel de Tarefas exibido na faixa de opções. O suplemento será hospedado localmente no IIS. Se for solicitado que você confie em um certificado, faça isso para permitir que o suplemento se conecte ao aplicativo do Office.

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

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

  3. Selecione um intervalo de células na planilha.

  4. No painel de tarefas, escolha o botão Definir cor para definir a cor do intervalo selecionado como verde.

    O painel de tarefas do suplemento é aberto no Excel.

Observação

Para ver o console.log output, você precisará de um conjunto separado de ferramentas para desenvolvedores para um console de JavaScript. Para saber mais sobre as ferramentas F12 e o DevTools do Microsoft Edge, confira Depurar suplementos usando ferramentas de desenvolvedor no Microsoft Edge.

Próximas etapas

Agora você tem um suplemento de painel de tarefas do Excel funcional que define a cor de preenchimento das células selecionadas. Para continuar desenvolvendo suas habilidades de Suplementos do Office, saiba mais sobre como desenvolver Suplementos do Office com o Visual Studio.

Solução de problemas

  • Se o suplemento mostrar um erro (por exemplo, "Não foi possível iniciar este suplemento. Feche esta caixa de diálogo para ignorar o problema ou clique em "Reiniciar" para tentar novamente.") quando você pressiona F5 ou escolhe Iniciar Depuração> no Visual Studio, consulte Depurar Suplementos do Office no Visual Studio para obter outras opções de depuração.

Exemplos de código

Confira também

  • Last updated on