Freigeben über

Erstellen Ihres ersten Outlook-Add-Ins mit Visual Studio

In diesem Artikel erfahren Sie, wie Sie ein Outlook-Aufgabenbereich-Add-In in Visual Studio erstellen, das mindestens eine Eigenschaft einer ausgewählten Nachricht anzeigt.

Voraussetzungen

  • Visual Studio 2019 oder höher mit installierter Office/SharePoint-Entwicklungsworkload

    Hinweis

    Wenn Sie Visual Studio 2019 oder höher bereits installiert haben, verwenden Sie die Visual Studio-Installer, um sicherzustellen, dass die Workload Office/SharePoint-Entwicklung installiert ist.

  • Office in Verbindung mit einem Microsoft 365-Abonnement (einschließlich Office im Internet).

Erstellen des Add-In-Projekts

  1. Klicken Sie auf der Menüleiste von Visual Studio auf Datei>Neu>Projekt aus.

  2. Erweitern Sie in der Liste der Projekttypen unter Visual C# oder Visual Basic die Option Office/SharePoint, klicken Sie auf Add-Ins, und wählen Sie dann Outlook-Web-Add-In als Projekttyp aus.

  3. Geben Sie einen Namen für das Projekt ein, und klicken Sie dann auf OK.

  4. Visual Studio erstellt eine Projektmappe, und die beiden Projekte werden im Projektmappen-Explorer angezeigt. Die MessageRead.html-Datei wird in Visual Studio geöffnet.

Erkunden der Visual Studio-Projektmappe

Wenn Sie den Assistenten abgeschlossen haben, erstellt Visual Studio eine Projektmappe, die zwei Projekte enthält.

Project Beschreibung
Add-In-Projekt Enthält eine Manifestdatei, die nur Add-Ins enthält, die alle Einstellungen enthält, die Ihr Add-In beschreiben. Anhand dieser Einstellungen kann die Office-Anwendung ermitteln, wann das Add-In aktiviert und wann das Add-In angezeigt werden sollte. Visual Studio generiert die Inhalte dieser Datei für Sie, damit Sie das Projekt ausführen und das Add-In sofort verwenden können. Sie können diese Einstellungen jederzeit ändern, indem Sie die XML-Datei bearbeiten.
Webanwendungsprojekt Enthält die Inhaltsseiten Ihres Add-Ins, darunter alle Dateien und Dateiverweise, die Sie zum Entwickeln von Office-fähigen HTML- und JavaScript-Seiten benötigen. Während Sie Ihr Add-In entwickeln, hostet Visual Studio die Webanwendung auf Ihrem lokalen IIS-Server (Internet Information Services). Sobald Sie Ihr Add-In veröffentlichen möchten, müssen Sie dieses Webanwendungsprojekt auf einem Webserver bereitstellen.

Aktualisieren des Codes

  1. MessageRead.html Diese Datei gibt den HTML-Code an, der im Add-In-Aufgabenbereich gerendert wird. Ersetzen Sie inMessageRead.htmldas <body-Element> durch das folgende Markup, und speichern Sie die Datei.

    <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. Öffnen Sie die Datei MessageRead.js im Stammordner des Webanwendungsprojekts. Diese Datei gibt das Skript für das Add-In an. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.

    '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. Öffnen Sie die Datei MessageRead.css im Stammordner des Webanwendungsprojekts. Diese Datei gibt die benutzerdefinierten Formatvorlagen für das Add-In an. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.

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

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

.content-main {
    margin: 10px;
}

Aktualisieren des Manifests

  1. Öffnen Sie die Manifestdatei im Add-In-Projekt. Diese Datei legt die Einstellungen und Funktionen des Add-Ins fest.

  2. Das <ProviderName-Element> verfügt über einen Platzhalterwert. Ersetzen Sie dieses nur Ihren Namen.

  3. Das DefaultValue-Attribut des <DisplayName-Elements> verfügt über einen Platzhalter. Ersetzen Sie diesen durch My Office Add-in.

  4. Das DefaultValue-Attribut des <Description-Elements> verfügt über einen Platzhalter. Ersetzen Sie diesen durch My First Outlook add-in.

  5. Speichern Sie die Datei.

    ...
<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"/>
...

Probieren Sie es aus

  1. Testen Sie mithilfe von Visual Studio das neu erstellte Outlook-Add-In, indem Sie F5 drücken oder die Schaltfläche Start auswählen. Das Add-In wird lokal auf IIS gehostet.

  2. Geben Sie im Dialogfeld Verbindung mit Exchange-E-Mail-Konto herstellen die E-Mail-Adresse und das Kennwort für Ihr Microsoft-Konto ein, und wählen Sie dann Verbinden aus. Wenn die Outlook.com-Anmeldeseite in einem Browser geöffnet wird, melden Sie sich mit denselben Anmeldeinformationen wie zuvor bei Ihrem E-Mail-Konto an.

    Hinweis

    Wenn Sie im Dialogfeld Verbindung mit Exchange-E-Mail-Konto herstellen wiederholt aufgefordert werden, sich anzumelden, oder wenn Sie eine Fehlermeldung erhalten, dass Sie nicht autorisiert sind, ist die Standardauthentifizierung für Konten in Ihrem Microsoft 365-Mandanten möglicherweise deaktiviert. Um dieses Add-In zu testen, versuchen Sie erneut, sich anzumelden, nachdem Sie im Dialogfeld Web-Add-In-Projekteigenschaften im Abschnitt Bereitstellung die Eigenschaft Mehrstufige Authentifizierung verwenden auf True festgelegt haben, oder melden Sie sich stattdessen mit einem Microsoft-Konto an.

  3. Ihr Postfach wird in Outlook im Web geöffnet. Wählen Sie eine Nachricht aus, oder öffnen Sie sie.

    Tipp

    Sie können das Add-In auch im klassischen Outlook unter Windows testen, solange der IIS-Server ausgeführt wird.

  4. Navigieren Sie in der Nachricht zur Aktionsleiste, und wählen Sie dann Apps aus.

    Ein Meldungsfenster in Outlook im Web, in dem die Option Apps ausgewählt ist.

  5. Wählen Sie in der Liste der Add-Ins Die Option Mein Office-Add-In und dann Aufgabenbereich anzeigen aus.

    Ein Meldungsfenster in Outlook im Web, in dem die Option

  6. Zeigen Sie die Eigenschaften der ausgewählten Nachricht im aufgabenbereich an, der geöffnet wird.

    Der Aufgabenbereich des Add-Ins in Outlook im Web, in dem Nachrichteneigenschaften angezeigt werden.

    Hinweis

    Wenn der Aufgabenbereich nicht geladen wird, überprüfen Sie, ob Sie ihn in einem Browser auf demselben Computer öffnen können.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich Ihr erstes Outlook-Aufgabenbereich-Add-In erstellt! Als Nächstes, weitere Informationen zum Entwickeln eines Office-Add-Ins mit Visual Studio.

Problembehandlung

  • Wenn ihr Add-In einen Fehler anzeigt (z. B. "Dieses Add-In konnte nicht gestartet werden. Schließen Sie dieses Dialogfeld, um das Problem zu ignorieren, oder klicken Sie auf "Neu starten", um es erneut zu versuchen.) Wenn Sie F5 drücken oder Debuggen>starten in Visual Studio auswählen, finden Sie weitere Debugoptionen unter Debuggen von Office-Add-Ins in Visual Studio .
  • Wenn Sie im Aufgabenbereich die Fehlermeldung "Wir können dieses Add-In nicht von localhost aus öffnen" erhalten, befolgen Sie die im Artikel Fehlerbehebung beschriebenen Schritte.

Codebeispiele

  • Outlook-Add-In "Hallo Welt": Erfahren Sie, wie Sie ein einfaches Office-Add-In mit nur einem Manifest, einer HTML-Webseite und einem Logo erstellen.

Siehe auch