Crie seu primeiro suplemento do Outlook com o Visual Studio

Neste artigo, você percorrerá o processo de criação de um suplemento do painel de tarefas do Outlook no Visual Studio que exibe pelo menos uma propriedade de uma mensagem selecionada.

Pré-requisitos

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

    Observação

    Se você instalou anteriormente o Visual Studio 2019 ou posterior, use o Visual Studio Installer para garantir que a carga de trabalho de desenvolvimento do Office/SharePoint seja instalada.

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

Criar o projeto do suplemento

  1. Na barra de menus do Visual Studio, selecione Arquivo>Novo>Projeto.

  2. Na lista de tipos de projeto sob Visual C# ou Visual Basic, expanda a opção Office/SharePoint, escolha Suplementos e depois Suplemento da Web do Outlook como o tipo de projeto.

  3. Dê um nome ao projeto e escolha OK.

  4. O Visual Studio cria uma solução, e os dois projetos dele aparecem no Gerenciador de Soluções. O arquivo MessageRead.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 um arquivo de manifesto somente do suplemento, 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. Você pode alterar 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 seu suplemento, o Visual Studio hospeda o aplicativo Web no servidor IIS (Serviços de Informações da Internet) local. Quando estiver pronto para publicar, você precisará implantar este projeto de aplicativo Web em um servidor Web.

Atualizar o código

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

    <body class="ms-font-m ms-welcome">
    <div class="ms-Fabric content-main">
        <h1 class="ms-font-xxl">Message properties</h1>
        <table class="ms-Table ms-Table--selectable">
            <thead>
                <tr>
                    <th>Property</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Id</strong></td>
                    <td class="prop-val"><code><label id="item-id"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Subject</strong></td>
                    <td class="prop-val"><code><label id="item-subject"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Message Id</strong></td>
                    <td class="prop-val"><code><label id="item-internetMessageId"></label></code></td>
                </tr>
                <tr>
                    <td><strong>From</strong></td>
                    <td class="prop-val"><code><label id="item-from"></label></code></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

  2. Abra o arquivo MessageRead.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
            loadItemProps(Office.context.mailbox.item);
        });
    });

    function loadItemProps(item) {
        // Write message property values to the task pane
        $('#item-id').text(item.itemId);
        $('#item-subject').text(item.subject);
        $('#item-internetMessageId').text(item.internetMessageId);
        $('#item-from').html(item.from.displayName + " &lt;" + item.from.emailAddress + "&gt;");
    }
})();

  3. Abra o arquivo MessageRead.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.

    html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

td.prop-val {
    word-break: break-all;
}

.content-main {
    margin: 10px;
}

Atualizar o manifesto

  1. Abra o arquivo de manifesto no projeto do suplemento. Este arquivo define as configurações e os recursos do suplemento.

  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 por My Office Add-in.

  4. O atributo DefaultValue do elemento <Description> tem um espaço reservado. Substitua-o por My First Outlook add-in.

  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="My First Outlook add-in"/>
...

Experimente

Importante

Devido à desativação do EWS (Serviços Web do Exchange) para o Exchange Online a partir de outubro de 2026 (consulte o Blog da Equipe do Exchange), a depuração F5 não funcionará mais para suplementos da Web do Outlook direcionados ao Exchange Online. Você precisará fazer o sideload manual do suplemento no Outlook. Para obter instruções, consulte Fazer sideload de suplementos do Outlook e Fazer sideload de um suplemento na Web ao usar o Visual Studio. Essas etapas também abrangem a atualização do manifesto antes do sideload.

  1. Usando o Visual Studio, teste o suplemento recém-criado do Outlook pressionando F5 ou escolhendo o botão Iniciar . O suplemento será hospedado localmente no IIS.

  2. Na caixa de diálogo Conectar à conta de email do Exchange , insira o endereço de email e a senha da sua conta Microsoft e escolha Conectar. Quando a página de login do Outlook.com for aberta em um navegador, entre em sua conta de email com as mesmas credenciais que você inseriu anteriormente.

    Observação

    Se a caixa de diálogo Conectar à conta de email do Exchange solicitar repetidamente que você entre ou se você receber um erro informando que não está autorizado, a autenticação Básica poderá ser desativada para contas em seu locatário do Microsoft 365. Para testar esse suplemento, tente entrar novamente depois de definir a propriedade Usar autenticação multifator como True na seção Implantação da caixa de diálogo de propriedades do projeto do Suplemento da Web ou entre usando uma conta Microsoft . Um erro semelhante ocorrerá após a desativação do EWS.

  3. Sua caixa de correio é aberta no Outlook na Web. Selecione ou abra uma mensagem.

    Dica

    Você também pode testar o suplemento no Outlook clássico no Windows, desde que o servidor IIS esteja em execução.

  4. Dentro da mensagem, navegue até a barra de ação e selecione Aplicativos.

    Uma janela de mensagem no Outlook na Web com a opção Aplicativos selecionada.

  5. Na lista de suplementos, selecione Meu Suplemento do Office e escolha Mostrar painel de tarefas.

    Uma janela de mensagem no Outlook na Web com a opção

  6. Exibir as propriedades da mensagem selecionada no painel de tarefas que se abre.

    O painel de tarefas do suplemento no Outlook na Web exibindo propriedades da mensagem.

    Observação

    Se o painel de tarefas não carregar, tente verificar abrindo-o em um navegador no mesmo computador.

Próximas etapas

Parabéns, você criou o seu primeiro suplemento do painel de tarefas do Outlook! Em seguida, 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.
  • Se você receber a mensagem de erro "Não é possível abrir este suplemento do localhost" no painel de tarefas, siga as etapas descritas no artigo de solução de problemas.

Exemplos de código

Confira também

  • Last updated on