Erweitern einer Teams-Besprechungs-App auf Outlook

Im gesamten Microsoft 365-Ökosystem planen die meisten monatlichen Benutzer ihre Microsoft Teams-Besprechungen über Outlook. Um Benutzern zu helfen, im Arbeitsablauf zu bleiben, werden Teams-Besprechungs-Apps jetzt in Outlook unterstützt. Sie können Besprechungs-Apps konfigurieren und zu den Teams-Besprechungen hinzufügen, die von Outlook aus geplant sind, und auch Besprechungs-Apps im Outlook-Kalender ausführen.

Besprechungs-Apps sind im Wesentlichen Teams-Registerkarten-Apps, die die Zusammenarbeit vor, während und nach Besprechungen fördern sollen. Sie können angeben, welche Kontexte Ihre Besprechungs-App über das App-Manifest (früher Teams-App-Manifest genannt) über die konfigurierbarTabs.context-Eigenschaft unterstützt.

Hinweis

Zusätzlich zu configurableTabsmuss Ihre Besprechungs-App mindestens eine App-Funktion im persönlichen Bereich (z. B. ) enthalten, staticTabsdamit sie in Outlook verfügbar ist.

Die folgende Tabelle zeigt die in Outlook unterstützten Teams-Besprechungs-App-Kontexte:

Teams-Besprechungskontext	App-Manifestwert	TeamsJS-Wert	Outlook-Unterstützung
Besprechungsdetailsansicht	meetingDetailsTab	frameContext.content	✔️
Besprechungschatansicht	meetingChatTab	frameContext.content	✔️
Besprechungsseitenbereichsansicht	meetingSidePanel	frameContext.sidePanel	✔️
Besprechungsphasenansicht	meetingStage	frameContext.meetingStage	❌

Wenn Ihre Besprechungs-App Stageview, andere Besprechungseffekte unterstützt oder Funktionen wie Nachrichtenerweiterungen und Bots enthält, funktionieren diese weiterhin in Teams, wenn die Besprechung von Outlook aus geplant wird, aber nicht in Outlook angezeigt oder ausgeführt wird.

Voraussetzungen

Stellen Sie Folgendes sicher, um eine Vorschau Ihrer Teams-Besprechungs-App in Outlook anzuzeigen:

• Ein Microsoft 365-Entwickler-Sandboxmandant mit aktiviertem Hochladen.
• Eine Testumgebung, in der Outlook für Windows-Desktop über den aktuellen Kanal Microsoft 365 Apps installiert ist.
• NodeJS (mit npm) installiert.
• Über npm installierte TeamsFx CLI v2-Bibliothek.
• Visual Studio Code wird in Ihrer Entwicklungsumgebung installiert.
• Teams Toolkit-Erweiterung für Visual Studio Code.

Um eine Vorschau Ihrer Teams-Besprechungs-App in Outlook anzuzeigen, können Sie entweder eine neue Besprechungs-App mit dem Teams-Toolkit erstellen oder eine vorhandene Teams-Besprechungs-App in Outlook erweitern.

Erstellen einer Teams-Besprechungs-App für Outlook

Sie können eine Teams-Besprechungs-App für Outlook über die Teams Toolkit-Erweiterung für Visual Studio Code erstellen. So erstellen Sie eine Teams-Besprechungs-App für die Vorschau in Outlook:

1. Wechseln Sie zu Teams, und melden Sie sich mit Ihrem Sandbox-Mandantenkonto an.

2. Wählen Sie Kalender>Neue Besprechung aus, und planen Sie eine Besprechung.

   

3. Öffnen Sie die Teams Toolkit-Erweiterung in Visual Studio Code, und wählen Sie Beispiele anzeigen aus.

4. Wählen Sie Meine erste Besprechungs-App>erstellen aus, und geben Sie den Ordner zum Erstellen des Arbeitsbereichs an.

   

5. Drücken Sie F5 , um das Beispiel zu debuggen und lokal in Teams auszuführen. Teams fordert Sie auf, die App zu installieren.

6. Wählen Sie in der Dropdownliste zu einer Besprechung hinzufügen aus, und wählen Sie die Besprechung aus, die Sie zuvor geplant haben.

   

7. Wählen Sie die Konfiguration der Beispielregisterkarte und dann Speichern aus. Die App ist in der Besprechungschatansicht verfügbar.

   

Erweitern einer vorhandenen Teams-Besprechungs-App auf Outlook

Um Ihre vorhandene Teams-Besprechungs-App in Outlook zu erweitern, stellen Sie Folgendes sicher:

• Aktualisieren Sie Ihr App-Manifest.
• Verwenden Sie die Microsoft Teams JavaScript-Clientbibliothek (TeamsJS) v2.5.0 oder höher.
• Konfigurieren Sie Inhaltssicherheitsrichtlinienheader.
• Aktualisieren Microsoft Entra App-Registrierung für einmaliges Anmelden (Single Sign-On, SSO).
• Laden Sie Ihre aktualisierte App in Teams Admin Center hoch.

Wenn Sie über eine vorhandene Besprechungs-App verfügen, erstellen Sie eine Kopie oder einen Branch Ihres Produktionsprojekts, und aktualisieren Sie Ihre App id im App-Manifest, um einen neuen Bezeichner zu verwenden, der sich von der Produktions-App-ID zum Testen unterscheidet.

Aktualisieren Ihres App-Manifests

Aktualisieren Sie die Schemaversion des App-Manifests (früher Teams-App-Manifest genannt) auf 1.13 oder höher.

Öffnen Sie Ihr Teams-App-Manifest, und aktualisieren Sie die $schema Eigenschaften und manifestVersion wie folgt:

{
    "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
    "manifestVersion" : "1.16"
}

Verwenden von TeamsJS Version 2.5.0 oder höher

Verwenden Sie die TeamsJS-Clientbibliothek Version 2.5.0 oder höher, um Ihre Teams-Besprechungs-App so zu erweitern, dass sie in Outlook ausgeführt wird. Wenn Ihre App TeamsJS v2.5.0 oder höher verwendet, sind keine Anwendungscodeänderungen erforderlich, um in Outlook ausgeführt werden zu können.

Wenn Sie Ihr TeamsJS-npm-Paket von v1.x.x auf die neueste Version v2.x.x TeamsJS aktualisieren müssen, können Sie das Teams Toolkit verwenden, um die erforderlichen Codeänderungen zu identifizieren und zu automatisieren. Weitere Informationen finden Sie unter TeamsJS-Bibliothek.

Führen Sie die folgenden Schritte aus, um Ihre TeamsJS mithilfe des Teams Toolkits auf die neueste Version zu aktualisieren:

1. Öffnen Sie Ihre App in Visual Studio Code, und wählen Sie Teams Toolkit-Erweiterung aus.
2. Wählen Sie unter Ansicht befehlspalette... oder STRG+UMSCHALT+P aus.
3. Führen Sie den Befehl Teams: Upgrade Teams JS SDK and code references aus.

Ihre package.json Dateiverweise @microsoft/teams-js@2.x.x und Ihre *.js/.ts Dateien und *.jsx/.tsx werden aktualisiert mit:

• Importanweisungen für teams-js@2.x.x.
• Funktions-, Enumerations- und Schnittstellenaufrufe für teams-js@2.x.x.
• Neue "TODO" Kommentarerinnerungen kennzeichnen Bereiche, die möglicherweise von Änderungen an der Kontextschnittstelle betroffen sind.
• Neue "TODO" Kommentarerinnerungen zum Konvertieren von Rückruffunktionen in Zusagen.

Hinweis

Beim Upgrade auf die neueste TeamsJS-Version über das Teams Toolkit wird der Code in den HTML-Dateien nicht aktualisiert. Sie müssen die HTML-Dateien manuell aktualisieren.

Konfigurieren von CSP-Headern für Outlook

Teams-Registerkartenanwendungen werden in iframe-Elementen in Outlook gehostet, wie sie sich in Teams befinden. Wenn Ihre App CSP-Header ( Content Security Policy ) verwendet, fügen Sie outlook.office.com als Frame-Vorgänger hinzu.

Aktualisieren Microsoft Entra App-Registrierung für SSO

Microsoft Entra einmaliges Anmelden (Single Sign-On, SSO) für Besprechungs-Apps funktioniert in Outlook genauso wie in Teams. Sie müssen die Outlook-Anwendungs-ID jedoch manuell zu Ihrer Microsoft Entra App-Registrierung hinzufügen.

1. Melden Sie sich mit Ihrem Testmandantenkonto bei Azure-Portal an.

2. Öffnen Sie App-Registrierungen.

3. Wählen Sie Ihre App aus.

4. Wählen Sie Verwalten>Api verfügbar machen aus.

5. Fügen Sie im Abschnitt Autorisierte Clientanwendungen den folgenden Client Id Wert hinzu:

   Microsoft 365-Clientanwendung	Client-ID
   Outlook Desktop	d3590ed6-52b3-4102-aeff-aad2292ab01c

   Weitere Informationen zu Clientanwendungs-IDs, die zum Erweitern von Teams-Apps in Microsoft 365 verwendet werden, finden Sie unter Teams-Registerkarten in Microsoft 365 und Outlook.

Sie können Ihre benutzerdefinierte App im Teams Admin Center hochladen und eine Vorschau Ihrer Besprechungs-App in Outlook anzeigen.

Hochladen Ihrer benutzerdefinierten App in Teams Admin Center

Um Ihre App in Microsoft 365 und Outlook zu testen, laden Sie Ihr App-Paket in das Teams Admin Center hoch.

1. Packen Sie Ihr Teams-App-Manifest und Die App-Symbole in einer ZIP-Datei. Informationen zum Erstellen eines App-Pakets über das Teams-Toolkit finden Sie unter Erstellen eines App-Pakets.

2. Wechseln Sie zum Teams Admin Center , und wählen Sie Teams-Apps>Apps verwalten aus.

3. Wählen Sie Neue App hochladen und dann Ihr App-Paket aus.

Nachdem Ihre Besprechungs-App in das Teams Admin Center hochgeladen wurde, ist sie sowohl in Teams als auch in Outlook verfügbar. Damit Ihre App im Menü Apps angezeigt wird, warten Sie einige Minuten, und starten Sie Outlook für Windows neu.

Vorschau ihrer Besprechungs-App in Outlook

Um eine Vorschau Ihrer Besprechungs-App in Outlook für Windows anzuzeigen, stellen Sie sicher, dass die App lokal ausgeführt wird, und führen Sie die folgenden Schritte aus:

1. Öffnen Sie Outlook für Windows, das mit Ihrem Testmandantenkonto angemeldet ist. Wenn Outlook bereits ausgeführt wird, schließen Sie es, und starten Sie es erneut neu.

2. Öffnen Sie Kalender>Neue Besprechung. Damit eine Besprechungs-App in Outlook ausgeführt werden kann, stellen Sie sicher, dass es sich bei der Besprechung um eine Teams-Besprechung handelt, da andere von Outlook geplante Besprechungen nicht unterstützt werden.

3. Wählen Sie im Besprechungsplanungsfenster Alle Apps aus. Ihre hochgeladene Besprechungs-App wird unter Ihren installierten Besprechungs-Apps angezeigt.

   

4. Wählen Sie Ihre Besprechungs-App aus. Ein Konfigurationsdialogfeld wird angezeigt, in dem der Benutzer alle relevanten App-Einstellungen für seine spezifische Besprechung konfiguriert.

   

5. Wählen Sie Hinzufügen. Ihre Besprechungs-App wird im Abschnitt Apps und im Seitenbereich des Planungsfensters angezeigt.

Um Ihre App im Zeitplanungsfenster zu entfernen oder zu konfigurieren, wählen Sie das Dropdownmenü ihrer App aus, und wählen Sie Folgendes aus:

• Info: Wie die App im Microsoft Teams Store angezeigt wird.
• Einstellungen: Aktualisieren Sie die App-Konfiguration für die jeweilige Besprechung.
• Entfernen: Entfernen Sie die App aus der Besprechung.

Codebeispiel

Beispielname	Beschreibung	Node.js
HelloWorld In-Meeting-App	Einfache Besprechungs-App zur Veranschaulichung der Besprechungsdetails, der Chatansicht und des Seitenbereichs. Funktioniert in Teams und Outlook.	Anzeigen

Siehe auch

• Erweitern von Teams-Apps auf Microsoft 365
• Support und Feedback