Erstellen des ersten Outlook-Add-Ins

Erstellen Sie ein Aufgabenbereich-Add-In für Outlook, das den Betreff einer ausgewählten Nachricht vorliest. In dieser Schnellstartanleitung wird der Yeoman-Generator für Office-Add-Ins (Yo Office) verwendet, um das Projekt zu strukturieren, sodass Sie sich sofort auf das Schreiben von Office JavaScript-API-Code konzentrieren können.

Voraussetzungen

• Node.js (die neueste Active LTS-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 FAQ. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

• Outlook im Web, das neue Outlook unter Windows, Outlook 2016 oder höher unter Windows (verbunden mit einem Microsoft 365-Konto) oder Outlook auf dem 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
   • Welches Manifest möchten Sie verwenden? - Wählen Sie entweder Unified manifest for Microsoft 365 oder Add-in only manifest

   Hinweis

   Das einheitliche Manifest für Microsoft 365 ermöglicht es Ihnen, ein Office-Add-In mit einer Teams-App in einer App für Microsoft 365 als eine einzige Entwicklungs- und Bereitstellungseinheit zu kombinieren. Weitere Informationen finden Sie unter Office-Add-Ins mit dem einheitlichen Manifest. Ein Beispiel für eine App für Microsoft 365, die eine Teams-App und ein Outlook-Add-In kombiniert, finden Sie unter Rabattangebote.

   Wir freuen uns über Ihr Feedback zum einheitlichen Manifest. Wenn Sie Vorschläge haben, erstellen Sie bitte ein Problem im Repository für die Office-JavaScript-Bibliothek.

   Je nach Auswahl des Manifests sollten die Eingabeaufforderungen und Antworten wie folgt aussehen:

   

   

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

2. Navigieren Sie zum Stammordner des Webanwendungsprojekts.

   cd "My Office Add-in"
   

Erkunden des Projekts

Der Yeoman-Generator erstellt ein Projekt in einem Ordner mit dem von Ihnen ausgewählten Projektnamen. Das Projekt enthält Beispielcode für ein sehr einfaches Aufgabenbereich-Add-In. Im Folgenden finden Sie die wichtigsten Dateien.

• Die Datei ./manifest.json oder ./manifest.xml 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.

Probieren Sie es aus

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 Sie den Yeoman-Generator zum ersten Mal verwenden, um ein Office-Add-In zu entwickeln, öffnet Ihr Standardbrowser ein Fenster, in dem Sie aufgefordert werden, sich bei Ihrem Microsoft 365-Konto anzumelden. Wenn kein Anmeldefenster angezeigt wird und ein Querlade- oder Anmeldetimeoutfehler auftritt, führen atk auth login m365 Sie es aus, bevor Sie es erneut ausführen npm start .

   • Wenn Ihr Add-In nicht automatisch quergeladen wurde, folgen Sie den Anweisungen unter Querladen von Outlook-Add-Ins zum Testen , um das Add-In manuell in Outlook 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 Schaltfläche "Aufgabenbereich anzeigen " aus, um den Add-In-Aufgabenbereich zu öffnen. Die Position der Add-In-Schaltfläche variiert je nach verwendetem Outlook-Client.

   • Outlook im Web und das neue Outlook unter Windows: Wählen Sie in der Aktionsleiste der Nachricht "Apps" aus. Wählen Sie dann Mein Office-Add-In>Aufgabenbereich anzeigen.
   • Klassisches Outlook unter Windows: Wählen Sie die Registerkarte "Start" aus (oder die Registerkarte "Nachricht", wenn Sie die Nachricht in einem neuen Fenster geöffnet haben). Wählen Sie dann im Menüband die Option "Aufgabenbereich anzeigen " aus.
   • Outlook für Mac: Wählen Sie im Menüband "Mein Office-Add-In" und dann "Aufgabenbereich anzeigen" aus. Möglicherweise müssen Sie die Schaltfläche mit den Auslassungspunkten (...) aus dem Menüband auswählen, um Ihre Add-Ins anzuzeigen.

   Die folgenden Screenshots zeigen, wie das Add-In im klassischen Outlook unter Windows angezeigt wird.

   

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.

   

   

6. Wenn Sie den lokalen Webserver beenden und das Add-In deinstallieren möchten, befolgen Sie die entsprechenden Anweisungen:

   • Führen Sie den folgenden Befehl aus, um den Server anzuhalten. Falls Sie verwendet haben npm start, sollte der folgende Befehl auch das Add-In deinstallieren.

     npm stop
     

   • Wenn Sie das Add-In manuell quergeladen haben, lesen Sie Entfernen eines quergeladenen Add-Ins.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich Ihr erstes Outlook-Aufgabenbereich-Add-In erstellt! Erkunden Sie als Nächstes weitere Funktionen eines Outlook-Add-Ins, indem Sie das Outlook-Add-In-Lernprogramm nachlesen. Im Lernprogramm erstellen Sie ein komplexeres Add-In mit einem Aufgabenbereich, den Sie im Schnellstart kennengelernt haben. Darüber hinaus erstellen Sie eine Schaltfläche, die eine Funktion ohne Benutzeroberfläche aufruft.

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, kann fehlschlagen. Wenn beim Ausführen npm startFehler auftreten, navigieren Sie in einer Eingabeaufforderung zum neu erstellten Projektordner, und führen Sie den Befehl manuell aus npm install. Weitere Informationen zu Yo Office finden Sie unter Erstellen von Office-Add-In-Projekten mit dem Yeoman-Generator.

• Möglicherweise werden Warnungen angezeigt, die bei der Ausführung npm install für den Yeoman-Generator oder das Projekt generiert werden. In den meisten Fällen können Sie diese Warnungen ignorieren. Manchmal sind Abhängigkeiten veraltet, und ihre Ersetzungen werden von anderen Paketen, von denen das Projekt abhängt, nicht unterstützt. Wenn Sie diese Warnungen beheben möchten, verwenden Sie das npm-check-updates Tool.

  • Führen Sie in der Eingabeaufforderung im Stammprojektverzeichnis aus npm i -g npm-check-updates. Dadurch wird das Tool global installiert.
  • Ausführen ncu -u. Dadurch wird ein Bericht über alle Pakete und die Versionen bereitgestellt, auf die sie aktualisiert werden.
  • Führen Sie die Zeichenfolge aus npm install , um alle Pakete zu aktualisieren.

  Weitere Informationen zu Warnungen beim Ausführen npm installfinden Sie unter Warnungen und Abhängigkeiten in der Node.js- und npm-Welt.

• Wenn die Add-In-Schaltfläche im Menüband nicht angezeigt wird (z. B. Aufgabenbereich anzeigen), wählen Sie auf der Registerkarte "Start" des Menübands die Schaltfläche "Add-Ins" und dann das Test-Add-In aus.

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

Siehe auch

• Office-Add-Ins mit dem reinen Add-In-Manifest
• Visual Studio Code zum Veröffentlichen verwenden