Compartilhar via

Criar o seu primeiro suplemento do Outlook com o Visual Studio

Neste artigo, irá percorrer o processo de criação de um suplemento do painel de tarefas do Outlook no Visual Studio que apresenta 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 já instalou o Visual Studio 2019 ou posterior, utilize o Visual Studio Installer para garantir que a carga de trabalho de desenvolvimento do Office/SharePoint está 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 ficheiro de manifesto apenas de suplemento, que contém todas as definições que descrevem o 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 desenvolve o seu suplemento, o Visual Studio aloja a aplicação Web no servidor local dos Serviços de Informação Internet (IIS). 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 ficheiro de manifesto no projeto 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

  1. Com o Visual Studio, teste o suplemento do Outlook recentemente criado ao premir F5 ou ao selecionar o botão Iniciar . O suplemento será hospedado localmente no IIS.

  2. Na caixa de diálogo Ligar à conta de e-mail do Exchange , introduza o endereço de e-mail e a palavra-passe da sua conta Microsoft e, em seguida, selecione Ligar. 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 Ligar à conta de e-mail do Exchange lhe pedir repetidamente para iniciar sessão ou receber um erro de que não está autorizado, a autenticação Básica poderá ser desativada para contas no seu inquilino do Microsoft 365. Para testar este suplemento, tente iniciar sessão novamente depois de definir a propriedade Utilizar autenticação multifator como Verdadeiro na secção Implementação da caixa de diálogo propriedades do projeto do Suplemento Web ou, em alternativa, inicie sessão com uma conta Microsoft .

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

    Dica

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

  4. Na mensagem, navegue para a barra de ação e, em seguida, selecione Aplicações.

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

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

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

  6. Veja as propriedades da mensagem selecionada no painel de tarefas que é aberto.

    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 prime F5 ou seleciona Depurar>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