Erstellen des ersten Outlook-Add-Ins

In diesem Artikel werden Sie schrittweise durch den Prozess der Erstellung eines Outlook-Aufgabenbereich-Add-Ins geführt, welches mindestens eine Eigenschaft einer ausgewählten Nachricht anzeigt.

Erstellen des Add-Ins

Für die Erstellung von Office-Add-Ins können Sie den Yeoman-Generator für Office-Add-Ins oder Visual Studio verwenden. Der Yeoman-Generator erstellt ein Node.js-Projekt, das mit Visual Studio Code oder einem beliebigen anderen Editor verwaltet werden kann, während Visual Studio eine Visual Studio-Lösung erstellt. Wählen Sie die Registerkarte für die Option aus, die Sie verwenden möchten und folgen Sie den Anweisungen, um das Add-In zu erstellen und lokal zu testen.

Yeoman-Generator

Voraussetzungen

• Node.js (die aktuellsteLTS-Version). Besuchen Sie die Node.js Website , um die richtige Version für Ihr Betriebssystem herunterzuladen und zu installieren.

• Die neueste Version von Yeoman und des Yeoman-Generators für Office-Add-Ins. Um diese Tools global zu installieren, führen Sie den folgenden Befehl an der Eingabeaufforderung aus.

  npm install -g yo generator-office
  

  Hinweis

  Selbst wenn Sie bereits den Yeoman-Generator installiert haben, empfehlen wir Ihnen, das npm-Paket auf die neueste Version zu aktualisieren.

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

  Hinweis

  Wenn Sie noch nicht über Office verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für ein Microsoft 365 E5-Entwicklerabonnement qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

• Outlook im Web, neues Outlook unter Windows (Vorschau), Outlook 2016 oder höher unter Windows (verbunden mit einem Microsoft 365-Konto) oder Outlook auf Mac.

Erstellen des Add-In-Projekts

1. Führen Sie den folgenden Befehl aus, um ein Add-In-Projekt mit dem Yeoman-Generator zu erstellen: Ein Ordner, der das Projekt enthält, wird dem aktuellen Verzeichnis hinzugefügt.

   yo office
   

   Hinweis

   Wenn Sie den yo office-Befehl ausführen, werden möglicherweise Eingabeaufforderungen zu den Richtlinien für die Datensammlung von Yeoman und den CLI-Tools des Office-Add-In angezeigt. Verwenden Sie die bereitgestellten Informationen, um auf die angezeigten Eingabeaufforderungen entsprechend zu reagieren.

   Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Informationen an, um das Add-In-Projekt zu erstellen:

   • Choose a project type - Office Add-in Task Pane project

   • Choose a script type - JavaScript

   • Wie soll Ihr Add-In heißen? - My Office Add-in

   • Which Office client application would you like to support? - Outlook

   

   Nach Abschluss des Assistenten erstellt der Generator erstellt das Projekt und installiert unterstützende Node-Komponenten.

   Hinweis

   Wenn Sie Node.js Version 20.0.0 oder höher verwenden, wird möglicherweise eine Warnung angezeigt, wenn der Generator die Installation ausführt, die über eine nicht unterstützte Engine verfügt. Wir arbeiten an einer Lösung dafür. In der Zwischenzeit wirkt sich die Warnung nicht auf den Generator oder das von Ihnen generierte Projekt aus, sodass sie ignoriert werden kann.

   Tipp

   Die vom Yeoman-Generator nach der Erstellung des Add-In-Projekts unter Nächste Schritte bereitgestellten Anweisungen können Sie ignorieren. Die Schritt-für-Schritt-Anleitungen in diesem Artikel enthalten alle Anweisungen, die Sie zum Durchführen dieses Tutorials benötigen.

2. Navigieren Sie zum Stammordner des Webanwendungsprojekts.

   cd "My Office Add-in"
   

Erkunden des Projekts

Das Add-In-Projekt, das Sie mit dem Yeoman-Generator erstellt haben, enthält Beispielcode für ein sehr einfaches Aufgabenbereich-Add-In.

• Die ./manifest.xml-Datei im Stammverzeichnis des Projekts definiert die Einstellungen und Funktionen des Add-Ins.
• Die ./src/taskpane/taskpane.html-Datei enthält das HTML-Markup für den Aufgabenbereich.
• Die ./src/taskpane/taskpane.css-Datei enthält das CSS, das auf die Inhalte im Aufgabenbereich angewendet wird.
• Die ./src/taskpane/taskpane.js-Datei enthält den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und Outlook erleichtert.

Aktualisieren des Codes

1. Öffnen Sie Ihr Projekt in VS-Code oder ihrem bevorzugten Code-Editor.

   Tipp

   In Windows können Sie über die Befehlszeile zum Stammverzeichnis des Projekts navigieren und dann code . eingeben, um diesen Ordner in VS Code zu öffnen. Auf einem Mac müssen Sie den code-Befehl zum Pfad hinzufügenbevor Sie diesen Befehl verwenden können, um den Projektordner in VS Code zu öffnen.

2. Öffnen Sie die Datei ./src/taskpane/taskpane.html, und ersetzen Sie das gesamte <Standard-Element> (innerhalb des <Body-Elements>) durch das folgende Markup. Dieses neue Markup fügt ein Bezeichnungsfeld hinzu, in dem ./src/taskpane/taskpane.js Daten schreibt.

   <main id="app-body" class="ms-welcome__main" style="display: none;">
       <h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
       <p><label id="item-subject"></label></p>
       <div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
           <span class="ms-Button-label">Run</span>
       </div>
   </main>
   

3. Öffnen Sie in Ihrem Code-Editor die Datei ./src/taskpane/taskpane.js, und fügen Sie dann der Run-Funktion den folgenden Code hinzu. Dieser Code verwendet die Office-JavaScript-API zum Abrufen eines Verweises auf die aktuelle Nachricht und schreibt den entsprechenden subject-Eigenschaftswert in den Aufgabenbereich.

   // Get a reference to the current message
   const item = Office.context.mailbox.item;
   
   // Write message property value to the task pane
   document.getElementById("item-subject").innerHTML = "<b>Subject:</b> <br/>" + item.subject;
   

   Ihre taskpane.js-Datei sollte nun den folgenden Code enthalten.

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
    * See LICENSE in the project root for license information.
    */
   
   /* global document, Office */
   
   Office.onReady((info) => {
     if (info.host === Office.HostType.Outlook) {
       document.getElementById("sideload-msg").style.display = "none";
       document.getElementById("app-body").style.display = "flex";
       document.getElementById("run").onclick = run;
     }
   });
   
   export async function run() {
     // Get a reference to the current message
     const item = Office.context.mailbox.item;
   
     // Write message property value to the task pane
     document.getElementById("item-subject").innerHTML = "<b>Subject:</b> <br/>" + item.subject;
   }
   

Probieren Sie es aus

Hinweis

Office-Add-Ins sollten auch während der Entwicklung HTTPS und nicht HTTP verwenden. Wenn Sie aufgefordert werden, ein Zertifikat zu installieren, nachdem Sie einen der folgenden Befehle ausgeführt haben, akzeptieren Sie die Eingabeaufforderung, um das Zertifikat zu installieren, das der Yeoman-Generator bereitstellt. Möglicherweise ist es auch erforderlich, dass Sie Ihre Eingabeaufforderung oder Ihr Terminal als Administrator ausführen, damit die Änderungen vorgenommen werden können.

1. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet, und Das Add-In wird quergeladen.

   npm start
   

   Hinweis

   Wenn Ihr Add-In nicht automatisch quergeladen wurde, befolgen Sie die Anweisungen unter Querladen von Outlook-Add-Ins zum Testen , um das Add-In in Outlook manuell querzuladen.

2. Zeigen Sie in Outlook eine Nachricht im Lesebereich an, oder öffnen Sie die Nachricht in einem eigenen Fenster.

3. Wählen Sie die Registerkarte Start (oder die Registerkarte Nachricht , wenn Sie die Nachricht in einem neuen Fenster geöffnet haben), und wählen Sie dann die Schaltfläche Aufgabenbereich anzeigen im Menüband aus, um den Add-In-Aufgabenbereich zu öffnen.

   

4. Wenn Sie mit dem Dialogfeld WebView beim Laden beenden aufgefordert werden, wählen Sie OK aus.

   Hinweis

   Wenn Sie Abbrechen auswählen, wird das Dialogfeld nicht mehr angezeigt, solange diese Instanz des Add-Ins ausgeführt wird. Wenn Sie Ihr Add-In jedoch neu starten, wird das Dialogfeld wieder angezeigt.

5. Scrollen Sie zum unteren Rand des Aufgabenbereichs, und wählen Sie den Link Ausführen, um den Nachrichtenbetreff in den Aufgabenbereich zu schreiben.

   

   

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich Ihr erstes Outlook-Aufgabenbereich-Add-In erstellt! Als Nächstes, erfahren Sie mehr über die Funktionen eines Outlook-Add-Ins, und erstellen Sie ein komplexeres Add-In mithilfe des Outlook-Add-In-Lernprogramms.

Visual Studio

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.

Projekt	Beschreibung
Add-In-Projekt	Enthält nur eine XML-Manifestdatei, die alle Einstellungen enthält, die das 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 + " <" + item.from.emailAddress + ">");
       }
   })();
   

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 das XML-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 in 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.

   

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

   

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

   

   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

• Stellen Sie sicher, dass Ihre Umgebung für die Office-Entwicklung bereit ist, indem Sie die Anweisungen unter Einrichten Ihrer Entwicklungsumgebung befolgen.

• Der automatische npm install Schritt, den Yo Office ausführt, schlägt möglicherweise fehl. Wenn beim Ausführen npm startvon Fehler angezeigt werden, navigieren Sie in einer Eingabeaufforderung zum neu erstellten Projektordner, und führen Sie manuell aus npm install. Weitere Informationen zu Yo Office finden Sie unter Create Office-Add-In-Projekte mithilfe des Yeoman-Generators.

• 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 .

• Einige des Beispielcodes verwenden ES6-JavaScript. Dies ist nicht kompatibel mit älteren Versionen von Office, die das Trident (Internet Explorer 11)-Browsermodul verwenden. Informationen zur Unterstützung dieser Plattformen in Ihrem Add-In finden Sie unter Unterstützen älterer Microsoft-Webviews und Office-Versionen. Wenn Sie noch nicht über ein Microsoft 365-Abonnement für die Entwicklung verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für ein Microsoft 365 E5 Entwicklerabonnement qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

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 "Hello Welt": Erfahren Sie, wie Sie ein einfaches Office-Add-In mit nur einem Manifest, einer HTML-Webseite und einem Logo erstellen.

Siehe auch

• XML-Manifest für Office-Add-Ins
• Visual Studio Code zum Veröffentlichen verwenden