Erstellen von Office-Add-In-Projekten mit dem Teams-Toolkit (Vorschau)

Erweiterungen der Microsoft 365-Plattform sind jetzt unter "Teams-Apps" enthalten, auch wenn die Erweiterung vollständig außerhalb der Teams-Anwendung selbst liegt. Ein primäres Tool für die Entwicklung von Teams-Apps ist das Teams-Toolkit. Sie können Office-Add-Ins mit dem Teams-Toolkit mit den folgenden Einschränkungen erstellen:

  • Derzeit können nur Outlook-Add-Ins und nur für Outlook unter Windows erstellt werden. Wir arbeiten hart daran, die Unterstützung im Teams Toolkit für Add-Ins für andere Office-Anwendungen und -Plattformen zu aktivieren.
  • Add-Ins, die mit dem Teams-Toolkit erstellt wurden, verwenden das einheitliche Manifest für Microsoft 365 , das sich derzeit in der Vorschauphase befindet. Wir empfehlen Ihnen, mit dem Erstellen von Add-Ins mithilfe des Toolkits zu experimentieren, aber nicht das einheitliche Manifest für Produktions-Add-Ins zu verwenden.

Installieren Sie die neueste Version des Teams-Toolkits in Visual Studio Code, wie unter Installieren des Teams-Toolkits beschrieben.

Erstellen eines Outlook-Add-In-Projekts

  1. Öffnen Sie Visual Studio Code, und wählen Sie das Symbol Teams Toolkit in der Aktivitätsleiste aus.

    Symbol

  2. Wählen Sie Neue App erstellen aus.

  3. Wählen Sie in der Dropdownliste Neues Projekt die Option Outlook-Add-In aus.

    Die vier Optionen in der Dropdownliste Neues Projekt. Die vierte Option heißt

  4. Wählen Sie in der Dropdownliste App-Features Verwenden eines Outlook-Add-Insdie Option Aufgabenbereich aus.

    Die beiden Optionen in der Dropdownliste App-Features mithilfe eines Outlook-Add-Ins. Die erste Option

  5. Wählen Sie im daraufhin geöffneten Dialogfeld Arbeitsbereichsordner den Ordner aus, in dem Sie das Projekt erstellen möchten.

  6. Geben Sie dem Projekt (ohne Leerzeichen) einen Namen, wenn Sie dazu aufgefordert werden. Teams Toolkit erstellt das Projekt mit grundlegenden Dateien und Gerüsten. Anschließend wird das Projekt in einem zweiten Visual Studio Code-Fenster geöffnet. Schließen Sie das ursprüngliche Visual Studio Code-Fenster.

  7. Navigieren Sie im Visual Studio Code-TERMINAL zum Stammverzeichnis des Projekts, und führen Sie aus npm install.

  8. Bevor Sie Änderungen am Projekt vornehmen, überprüfen Sie, ob Sie Ihr Outlook-Add-In aus Visual Studio Code querladen können. Verfahren Sie dazu wie folgt:

    1. Stellen Sie sicher, dass Ihr Konto in Ihrem Microsoft 365-Entwicklermandanten auch ein E-Mail-Konto in Outlook desktop ist. Wenn dies nicht der Fall ist, befolgen Sie die Anleitung unter Hinzufügen eines E-Mail-Kontos zu Outlook.
    2. Schließen Sie den Outlook-Desktop.
    3. Öffnen Sie in Visual Studio Code teams Toolkit.
    4. Vergewissern Sie sich im Abschnitt KONTEN , dass Sie bei Microsoft 365 angemeldet sind.
    5. Wählen Sie In Visual Studio Codeausführenanzeigen | aus. Wählen Sie im Dropdownmenü AUSFÜHREN UND DEBUGGEN die Option Outlook Desktop (Edge Chromium) aus, und drücken Sie dann F5. Das Projekt wird erstellt, und ein Node dev-server-Fenster wird geöffnet. Dieser Vorgang kann einige Minuten dauern. Irgendwann wird Outlook-Desktop geöffnet.
    6. Öffnen Sie den PosteingangIhrer Microsoft 365-Kontoidentität , und öffnen Sie eine beliebige Nachricht. Eine Contoso-Add-In-Registerkarte mit zwei Schaltflächen wird im Menüband Start (oder im Menüband Nachricht angezeigt, wenn Sie die Nachricht in einem eigenen Fenster geöffnet haben).
    7. Klicken Sie auf die Schaltfläche Aufgabenbereich anzeigen , und ein Aufgabenbereich wird geöffnet. Klicken Sie auf die Schaltfläche Aktion ausführen , und am oberen Rand der Nachricht wird eine kleine Benachrichtigung angezeigt.
    8. Um das Debuggen zu beenden und das Add-In zu deinstallieren, wählen Sie Debuggen in Visual Studio Code ausführen | beenden aus.

Jetzt können Sie das Projekt ändern und entwickeln. Befolgen Sie an Stellen, an denen die Anleitungen in der Dokumentation zu Office-Add-Ins abhängig davon, welcher Manifesttyp verwendet wird, die Anweisungen für das einheitliche Manifest.