Freigeben über

Erstellen des ersten Outlook-Add-Ins

  • Artikel

In diesem Artikel erfahren Sie, wie Sie mithilfe von Yo Office ein Outlook-Aufgabenbereich-Add-In erstellen, das mindestens eine Eigenschaft einer ausgewählten Nachricht anzeigt.

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, 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
    • Welches Manifest möchten Sie verwenden? – Wählen Sie entweder Unified manifest for Microsoft 365 oder aus. Add-in only manifest

    Hinweis

    Mit dem einheitlichen Manifest für Microsoft 365 können Sie ein Outlook-Add-In mit einer Teams-App als einzelne Entwicklungs- und Bereitstellungseinheit kombinieren. Wir arbeiten daran, die Unterstützung für das einheitliche Manifest auf Excel, PowerPoint, Word, benutzerdefinierte Copilot-Entwicklung und andere Erweiterungen von Microsoft 365 zu erweitern. Weitere Informationen hierzu finden Sie unter Office-Add-Ins mit dem einheitlichen Manifest. Ein Beispiel für eine kombinierte Teams-App und ein Outlook-Add-In finden Sie unter Rabattangebote.

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

    Je nach Wahl des Manifests sollten die Eingabeaufforderungen und Antworten wie eine der folgenden aussehen:

    Die Eingabeaufforderungen und Antworten für den Yeoman-Generator, wenn Aufgabenbereich, JavaScript, Outlook und nur Add-In-Manifest ausgewählt werden.

    Die Eingabeaufforderungen und Antworten für den Yeoman-Generator, wenn Aufgabenbereich, JavaScript, Outlook und das einheitliche Manifest ausgewählt werden.

    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 sind die wichtigsten Dateien aufgeführt.

  • 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

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.

  • Wenn Sie zum ersten Mal ein Office-Add-In auf Ihrem Computer entwickeln, werden Sie möglicherweise in der Befehlszeile aufgefordert, Microsoft Edge WebView eine Loopback-Ausnahme zu gewähren ("Localhost-Loopback für Microsoft Edge WebView zulassen?"). Wenn Sie dazu aufgefordert werden, geben Sie ein Y , um die Ausnahme zuzulassen. Beachten Sie, dass Sie Administratorrechte benötigen, um die Ausnahme zuzulassen. Sobald dies zulässig ist, sollten Sie nicht zur Eingabe einer Ausnahme aufgefordert werden, wenn Sie Office-Add-Ins in Zukunft querladen (es sei denn, Sie entfernen die Ausnahme von Ihrem Computer). Weitere Informationen finden Sie unter "Wir können dieses Add-In nicht über localhost öffnen", wenn Sie ein Office-Add-In laden oder Fiddler verwenden.

    Die Eingabeaufforderung in der Befehlszeile, um Microsoft Edge WebView eine Loopbackausnahme zu ermöglichen.

  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 Schaltfläche Aufgabenbereich anzeigen aus, um den Add-In-Aufgabenbereich zu öffnen. Der Speicherort der Add-In-Schaltfläche variiert je nach verwendetem Outlook-Client.

    • Outlook im Web und neues Outlook unter Windows: Wählen Sie auf der Aktionsleiste der Nachricht Apps aus. Wählen Sie dann Mein Office-Add-In>Aufgabenbereich anzeigen aus.
    • 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 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 im Menüband die Schaltfläche mit den Auslassungspunkten (...) auswählen, um Ihre Add-Ins anzuzeigen.

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

    Ein Nachrichtenfenster in Outlook mit hervorgehobener Schaltfläche des Add-In-Menübands.

  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.

    Der Aufgabenbereich des Add-Ins mit hervorgehobenem Link

    Der Aufgabenbereich des Add-Ins, in dem der Betreff der Nachricht angezeigt wird.

  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 zu beenden. Wenn Sie verwendet haben npm start, sollte auch der folgende Befehl 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! 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.

Problembehandlung

  • 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 Erstellen von Office-Add-In-Projekten mithilfe des Yeoman-Generators.
  • 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