Ausweiten einer persönlichen Microsoft Teams-Registerkarte auf Microsoft 365

Persönliche Registerkarten bieten eine hervorragende Möglichkeit, das Benutzererlebnis in Microsoft Teams noch weiter zu verbessern. Mithilfe persönlicher Registerkarten können Sie einem Benutzer direkt innerhalb Microsoft Teams den Zugriff auf seine Anwendung ermöglichen, ohne dass er die Umgebung verlassen oder sich erneut anmelden muss. Persönliche Registerkarten können auch in anderen Microsoft 365-Anwendungen aufleuchten. In diesem Lernprogramm wird veranschaulicht, wie eine vorhandene persönliche Registerkarte in Teams aktualisiert wird, damit sie in Microsoft 365-Anwendungen ausgeführt werden kann.

Das Aktualisieren Ihrer persönlichen Teams-App zur Ausführung in anderen Microsoft 365-Anwendungen umfasst die folgenden Schritte:

• Aktualisieren Sie Ihr App-Manifest (zuvor als Teams-App-Manifest bezeichnet).
• Aktualisieren Sie Ihre Verweise auf die Microsoft Teams JavaScript-Clientbibliothek (TeamsJS).
• Ändern Sie die Header Ihrer Sicherheitsrichtlinien für Inhalte.
• Aktualisieren Sie Ihre Microsoft Entra-App-Registrierung für Single Sign-On (SSO).
• Laden Sie Ihre aktualisierte benutzerdefinierte App in Teams hoch.

Der Rest dieses Handbuchs führt Sie durch diese Schritte und zeigt Ihnen, wie Sie eine Vorschau Ihrer persönlichen Registerkarte in anderen Microsoft 365-Anwendungen anzeigen können.

Voraussetzungen

Für dieses Tutorial benötigen Sie Folgendes:

• Einen Sandkastenmandanten für das Microsoft 365-Entwicklerprogramm.
• Ein Computer, auf dem Microsoft 365-Apps vom aktuellen Kanal für Microsoft 365 Apps installiert sind.
• (Optional) Ihr Sandbox-Mandant ist bei gezielten Microsoft 365-Versionen registriert.
• (Optional) Ein Android-Gerät oder ein Android-Emulator, auf dem die Microsoft 365 für Android-App installiert ist.
• (Optional) Microsoft 365 Agents Toolkit-Erweiterung für Microsoft Visual Studio Code zum Aktualisieren Ihres Codes.

Erforderliche Komponenten installieren

Vorbereiten Ihrer persönlichen Registerkarte für das Upgrade

Wenn Sie über eine persönliche Registerkarten-App verfügen, erstellen Sie zu Testzwecken eine Kopie oder einen Zweig Ihres Produktionsprojekts, und aktualisieren Sie Ihre App-ID im App-Manifest, um zu Testzwecken einen neuen Bezeichner zu verwenden (der sich von der App-ID für die Produktion unterscheidet).

Wenn Sie Beispielcode anstelle Ihres eigenen Produktionscodes verwenden möchten, können Sie das Todo List-Beispiel verwenden. Sie können entweder die Einrichtungsschritte im GitHub-Beispielrepository "Todo List" ausführen oder die Erweiterung Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) verwenden, um eine neue Teams-App zu erstellen (wählen Sie "Aus einer Beispiel-Aufgabenliste>mit Back-End in Azure starten" aus). Nachdem Sie eine persönliche Registerkarte erstellt haben, kehren Sie zu diesem Artikel zurück, um sie auf Microsoft 365 auszuweiten.

Alternativ können Sie eine einfache Hello World-App für einmaliges Anmelden (Single Sign-On, SSO) verwenden, für die die Microsoft 365-App bereits aktiviert ist, wie im folgenden Schnellstartabschnitt gezeigt, und dann mit dem Hochladen Ihrer benutzerdefinierten App in Teams fortfahren.

Schnellstart

Verwenden Sie die Agents Toolkit-Erweiterung für Visual Studio Code, um mit einer persönlichen Registerkarte zu beginnen, die in Teams, Outlook und Microsoft 365 ausgeführt werden kann.

1. Öffnen Sie Visual Studio Code.

2. Wählen Sie das Symbol Microsoft 365 Agents Toolkit in der Aktivitätsleiste aus.

3. Wählen Sie "Neue Agentin/App erstellen" aus.

4. Wählen Sie Teams, Agents und Apps aus.

5. Wählen Sie andere Teams-Funktionen aus.

6. Registerkarte auswählen.

   

7. Wählen Sie eine bevorzugte Programmiersprache aus.

8. Wählen Sie auf Ihrem lokalen Computer einen Speicherort für den Arbeitsbereichsordner aus, und geben Sie den Namen Ihrer Anwendung ein.

9. Nachdem Ihre App erstellt wurde, stellen Sie in der Agents Toolkit-Erweiterung sicher, dass Sie beim entsprechenden Sandbox-Mandanten und Azure-Konto des Microsoft 365-Entwicklerprogramms angemeldet sind. Diese Optionen sind im Abschnitt KONTEN der Erweiterung verfügbar.

10. Wählen Sie Befehlspalette... unter der Option Ansicht oder STRG+UMSCHALT+P aus.

11. Geben Sie Microsoft 365-Agents ein: Bereitstellen zum Erstellen der Teams-App-Ressourcen wie Azure App Service, App Service-Plan, Azure Bot und verwaltete Identität in Ihrem Azure-Konto. Alternativ können Sie im Abschnitt LEBENSZYKLUS der Erweiterung die Option Bereitstellen auswählen.

12. Wählen Sie ein Abonnement und eine Ressourcengruppe aus. Wenn Sie eine neue Ressourcengruppe erstellen möchten, müssen Sie den Speicherort angeben.

13. Wählen Sie "Bereitstellen" aus.

14. Wählen Sie Befehlspalette... unter der Option Ansicht oder STRG+UMSCHALT+P aus.

15. Geben Sie Microsoft 365 Agents: Deploy ein, um den Beispielcode für die bereitgestellten Ressourcen in Azure bereitzustellen und die App zu starten. Alternativ können Sie im Abschnitt LEBENSZYKLUS der Erweiterung die Option Bereitstellen auswählen.

Von hier aus können Sie Ihre benutzerdefinierte App in Microsoft Teams hochladen und eine Vorschau Ihrer App in Outlook und der Microsoft 365-App anzeigen. Das App-Manifest und die TeamsJS-API-Aufrufe werden bereits für die Microsoft 365-App aktualisiert.

Ich bin auf ein Problem gestoßen

SharePoint-Framework (SPFx)-Apps

Ab Version 1.16 des SharePoint-Frameworks (SPFx) werden persönliche Registerkarten von Teams, die mit SPFx erstellt und gehostet werden, auch in Outlook und der Microsoft 365-App unterstützt. Führen Sie die folgenden Schritte aus, um eine persönliche SPFx-Teams-Registerkarten-App zu aktualisieren:

1. Stellen Sie sicher, dass Sie über die neueste Version von SPFx verfügen.

   npm install @microsoft/generator-sharepoint@latest --global
   

2. Aktualisieren Sie das App-Manifest.

3. Aktualisieren Sie die TeamsJS-Verweise.

Nachdem Sie TeamsJS-Referenzen aktualisiert haben, laden Sie Ihre App in Teams hoch , um eine Vorschau Ihrer persönlichen SPFx-Registerkarten-App anzuzeigen, die in Outlook und der Microsoft 365-App ausgeführt wird. Weitere Informationen finden Sie unter Erweitern von Outlook und der Microsoft 365-App mit dem SharePoint-Framework.

Ich bin auf ein Problem gestoßen

Aktualisieren des App-Manifests

Sie müssen die Schemaversion 1.13 des App-Manifests (oder höher) verwenden, damit Ihre persönliche Teams-Registerkarte in Outlook und der Microsoft 365-App ausgeführt werden kann. Weitere Informationen zur Schemaversion finden Sie unter App-Manifest.

Sie haben zwei Möglichkeiten zum Aktualisieren Ihres App-Manifests:

Agents Toolkit

1. Öffnen Sie die Befehlspalette: Ctrl+Shift+P.
2. Führen Sie den Microsoft 365 Agents: Upgrade Teams manifest-Befehl aus, und wählen Sie Ihre App-Manifestdatei aus. Änderungen werden vorgenommen.

Manuelle Anwendung

Öffnen Sie Ihr App-Manifest, und aktualisieren Sie das $schema und manifestVersion manuell mit der entsprechenden Version. Versionsinformationen finden Sie im Entwicklermanifest von Teams :

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

Sie können das Agents-Toolkit verwenden, um Ihr App-Manifest zu überprüfen und eventuelle Fehler zu identifizieren.

Ich bin auf ein Problem gestoßen

Angeben der Anforderungen an die Hostlaufzeit

Um sicherzustellen, dass Ihre App den Kunden immer qualitativ hochwertige Erfahrungen bietet, können Sie das Verhalten Ihrer App in geeigneten Microsoft 365-Hosts anpassen oder in Kontexten, die Sie nicht unterstützen möchten, nicht auftauchen. Verwenden Sie das App-Manifest, um alle Abhängigkeitsbeziehungen zwischen den Funktionen Ihrer App sowie spezifische Laufzeitanforderungen Ihrer statischen Registerkarten, Nachrichtenerweiterungen und Bots anzugeben.

Weitere Informationen finden Sie unter Angeben der Laufzeitanforderungen für Microsoft 365 Host in Ihrem App-Manifest.

Aktualisieren von TeamsJS-Verweisen

Ihre App muss auf das npm-Paket @microsoft/teams-js@2.19.0 (oder höher) verweisen, um in Outlook und Microsoft 365 ausgeführt zu werden. Frühere Versionen von TeamsJS sind in Outlook- und Microsoft 365-Apps weiterhin funktionsfähig, aber Veraltungswarnungen werden protokolliert. Die Unterstützung für die vorherigen Versionen wird schließlich sowohl in Outlook als auch in Microsoft 365 eingestellt. Informationen zum Ermitteln der neuesten Version von TeamsJS finden Sie im TeamsJS-GitHub-Repository.

Sie können das Agents-Toolkit verwenden, um die erforderlichen Codeänderungen für ein Upgrade von 1.x-TeamsJS-Versionen auf TeamsJS-Versionen 2.x.x zu identifizieren und zu automatisieren. Alternativ können Sie die gleichen Schritte manuell ausführen. Weitere Informationen finden Sie in der TeamsJS-Bibliothek .

1. Öffnen Sie die Befehlspalette: Ctrl+Shift+P.
2. Führen Sie den Befehl Microsoft 365 Agents: Upgrade Teams JS SDK and code references aus.

Nach Abschluss werden Ihre package.json Dateiverweise @microsoft/teams-js@2.0.0 (oder später) und Ihre *.js/.ts*.jsx/.tsx und Dateien aktualisiert mit:

• Importanweisungen für teams-js@2.x.x
• Funktions-, Enumerations- und Schnittstellenaufrufe für teams-js@2.x.x
• TODO Kommentarerinnerungen zur Kennzeichnung von Bereichen, die von Änderungen der Kontextschnittstelle betroffen sein könnten
• TODO Kommentarerinnerungen zum Konvertieren von Rückruffunktionen in Zusagen

Wichtig

Code in .html Dateien wird von den Upgradetools nicht unterstützt und erfordert manuelle Änderungen.

Ich bin auf ein Problem gestoßen

Konfigurieren der Header von Inhaltssicherheitsrichtlinien

Wie in Microsoft Teams werden Registerkartenanwendungen in iframe-Elementen in Microsoft 365-App- und Outlook-Webclients gehostet.

Wenn Ihre App CSP-Header ( Content Security Policy ) verwendet, stellen Sie sicher, dass Sie alle folgenden Frame-Vorgänger in Ihren CSP-Headern zulassen:

Microsoft 365-App-Host	Frame-Vorgängerberechtigung
Alle Hosts (Neu)	*.cloud.microsoft
Teams	teams.microsoft.com, *.teams.microsoft.com
Microsoft 365-App	*.microsoft365.com, *.office.com,
Outlook	outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com

Warnung

Die Clouddienste von Microsoft, einschließlich Webversionen von Teams, Outlook und Microsoft 365-Domänen, werden auf die *.cloud.microsoft Domäne migriert. Führen Sie die folgenden Schritte so bald wie möglich aus, um sicherzustellen, dass Ihre App weiterhin auf unterstützten Microsoft 365-Webclienthosts gerendert wird:

1. Aktualisieren Sie die TeamsJS-Bibliothek auf Version 2.19.0 oder höher. Sie müssen anrufen microsoftTeams.app.initialize() , um zu vermeiden, dass in der neuen Domäne eine Warnung angezeigt wird. Weitere Informationen zur neuesten Version von TeamsJS finden Sie unter Microsoft Teams JavaScript-Clientbibliothek.

2. Wenn Sie CSP-Header ( Content Security Policy ) für Ihre App definiert haben, aktualisieren Sie die Frame-Ancestors-Direktive , um die *.cloud.microsoft Domäne einzuschließen. Um die Abwärtskompatibilität während der Migration sicherzustellen, behalten Sie die vorhandenen frame-ancestors Werte in Ihren CSP-Headern bei. Durch diesen Ansatz wird sichergestellt, dass Ihre App sowohl in vorhandenen als auch in zukünftigen Microsoft 365-Hostanwendungen weiterhin funktioniert, und die Notwendigkeit nachfolgender Änderungen wird minimiert.

Aktualisieren Sie die folgende Domäne in der frame-ancestors Direktive der CSP-Header Ihrer App:

https://*.cloud.microsoft

Aktualisieren der Microsoft Entra-App-Registrierung für SSO

Microsoft Entra Single-Sign-On (SSO) für persönliche Registerkarten funktioniert in der Microsoft 365-App und Outlook genauso wie in Teams. Sie müssen jedoch der Microsoft Entra-App-Registrierung Ihrer Registerkarten-App im App-Registrierungen-Portal Ihres Mandanten mehrere Clientanwendungsbezeichner hinzufügen.

1. Melden Sie sich mit Ihrem Sandkastenmandantenkonto beim Microsoft Azure-Portal an.

2. Öffnen Sie App-Registrierungen.

3. Wählen Sie den Namen Ihrer persönlichen Registerkartenanwendung aus, um die entsprechende App-Registrierung zu öffnen.

4. Wählen Sie API verfügbar machen (unter Verwalten) aus.

   

5. Stellen Sie im Abschnitt Autorisierte Clientanwendungen sicher, dass alle folgenden Client Id-Werte hinzugefügt wurden:

   Microsoft 365-Clientanwendung	Client-ID
   Teams-Desktop, Mobil	1fec8e78-bce4-4aaf-ab1b-5451cc387264
   Teams-Web	5e3ce6c0-2b1f-4285-8d4b-75ee78787346
   Microsoft 365 Web	4765445b-32c6-49b0-83e6-1d93765276ca
   Microsoft 365 Desktop	0ec893e0-5785-4de6-99da-4ed124e5296c
   Microsoft 365 Mobile	d3590ed6-52b3-4102-aeff-aad2292ab01c
   Outlook Desktop	d3590ed6-52b3-4102-aeff-aad2292ab01c
   Outlook Web	bc59ab01-8403-45c6-8796-ac3ef710b3e3
   Outlook Mobile	27922004-5251-4030-b22d-91ecd9a37ea4

   Hinweis

   Einige Microsoft 365-Clientanwendungen verwenden Client-IDs gemeinsam.

Ich bin auf ein Problem gestoßen

Hochladen Ihrer benutzerdefinierten App in Teams

Der letzte Schritt zum Ausführen Ihrer App in Microsoft 365 und Outlook besteht darin, Ihr aktualisiertes App-Paket "Persönliche Registerkarte" in Microsoft Teams hochzuladen.

1. Verpacken Sie Ihr (App-Manifest und App-Symbole) in eine ZIP-Datei. Wenn Sie das Agents Toolkit zum Erstellen Ihrer App verwendet haben, können Sie dies ganz einfach mit der Option "Zip Teams App-Paket" im Abschnitt "UTILITY " des Agents Toolkit tun. Wählen Sie die manifest.json Datei für Ihre App und die entsprechende Umgebung aus.

   

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

3. Wählen Sie Apps aus, um den Bereich Apps verwalten zu öffnen. Wählen Sie dann App hochladen aus.

   

4. Wählen Sie die Option "Benutzerdefinierte App hochladen " und dann Ihr App-Paket aus.

   

Nachdem Ihre persönliche Registerkarte in Teams hochgeladen wurde, ist sie in Outlook und der Microsoft 365-App verfügbar. Sie müssen sich mit denselben Anmeldeinformationen anmelden, die Sie zum Hochladen Ihrer App in Teams verwendet haben. Wenn Sie die Microsoft 365 für Android-App ausführen, müssen Sie die App neu starten, um Ihre persönliche Registerkarten-App aus der Microsoft 365-App zu verwenden.

Sie können die App für den schnellen Zugriff anheften, oder Sie finden Ihre App im Flyout mit den Auslassungszeichen (...) unter den zuletzt verwendeten Anwendungen in der Randleiste auf der linken Seite. Beachten Sie, dass das Anheften einer App in Teams sie nicht als App in der Microsoft 365-App oder in Outlook anheftet.

Ich bin auf ein Problem gestoßen

Anzeigen einer Vorschau Ihrer persönlichen Registerkarte in anderen Microsoft 365-Umgebungen

Hier erfahren Sie, wie Sie eine Vorschau Ihrer App anzeigen, die in Microsoft 365 und Outlook-, Web- und Windows-Desktopclients ausgeführt wird.

Hinweis

Die Microsoft 365 (Office)-App wird in Microsoft 365 Copilot-App umbenannt. Das App-Symbol ändert sich ebenfalls, von zu . Updates an der App-Benutzeroberfläche und dem Symbol werden bereitgestellt.

Hinweis

Wenn Sie die Agents Toolkit-Beispiel-App verwenden und aus Teams deinstallieren, wird sie aus den Katalogen Weitere Apps in Outlook und der Microsoft 365-App entfernt.

Outlook unter Windows

So zeigen Sie Ihre App an, die in Outlook auf Windows Desktop ausgeführt wird:

1. Starten Sie Outlook, und melden Sie sich mit Ihrem Entwickler-Mandantenkonto an.

2. Wählen Sie auf der Seitenleiste "Weitere Apps" aus. Der hochgeladene benutzerdefinierte App-Titel wird zwischen Ihren installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App in Outlook zu starten.

   

Ich bin auf ein Problem gestoßen

Outlook im Web

So zeigen Sie Ihre App in Outlook im Web an:

1. Wechseln Sie zu Outlook im Web, und melden Sie sich mit Ihrem Entwicklungsmandantenkonto an.

2. Wählen Sie in der Seitenleiste "Apps" aus. Der hochgeladene benutzerdefinierte App-Titel wird zwischen Ihren installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App, die in Outlook im Web ausgeführt wird, zu starten und in der Vorschau anzuzeigen.

   

Ich bin auf ein Problem gestoßen

Outlook für Android-App

So zeigen Sie Ihre App an, die in der Outlook für Android-App ausgeführt wird:

1. Öffnen Sie die Outlook-App auf Ihrem Android-Gerät, und melden Sie sich mit Ihrem Entwicklermandantenkonto an. Wenn die Outlook-App für Android bereits vor dem Hochladen Ihrer benutzerdefinierten App ausgeführt wurde, starten Sie die Outlook-App neu, um sie im Abschnitt "Installierte Apps" anzuzeigen.

2. Wählen Sie das Symbol "Apps " aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App in Outlook für Android zu öffnen.

   

Ich bin auf ein Problem gestoßen

Outlook-App für iOS

So zeigen Sie Ihre App an, die in der Outlook-App für iOS ausgeführt wird:

1. Öffnen Sie die Outlook-App auf Ihrem Gerät, und melden Sie sich mit Ihrem Entwicklermandantenkonto an. Wenn die Outlook-App bereits vor dem Hochladen Ihrer benutzerdefinierten App in Teams ausgeführt wurde, starten Sie Outlook neu, um sie im Abschnitt "Installierte Apps" anzuzeigen.

2. Wählen Sie das Symbol "Mehr" aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App in der Outlook-App zu öffnen.

   

Ich bin auf ein Problem gestoßen

Microsoft 365 unter Windows

So zeigen Sie Ihre App an, die in Microsoft 365 auf dem Windows-Desktop ausgeführt wird:

1. Starten Sie Microsoft 365 und melden Sie sich mit Ihrem Dev-Mandantenkonto an.

2. Wählen Sie das Symbol "Apps " auf der Seitenleiste aus. Der hochgeladene benutzerdefinierte App-Titel wird zwischen Ihren installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App in Microsoft 365 zu starten.

   

Ich bin auf ein Problem gestoßen

Microsoft 365 im Web

So zeigen Sie eine Vorschau Ihrer App an, die in Microsoft 365 im Web ausgeführt wird:

1. Melden Sie sich mit den Anmeldeinformationen des Testmandanten bei microsoft365.com an.

2. Wählen Sie das Symbol "Apps " auf der Seitenleiste aus. Der hochgeladene benutzerdefinierte App-Titel wird zwischen Ihren installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App in Microsoft 365 im Web zu starten.

   

Ich bin auf ein Problem gestoßen

Microsoft 365 für Android-App

So zeigen Sie Ihre App an, die in der Microsoft 365 für Android-App ausgeführt wird:

1. Starten Sie die Microsoft 365-App auf Ihrem Gerät, und melden Sie sich mit Ihrem Entwicklermandantenkonto an. Wenn die Microsoft 365-App bereits vor dem Hochladen Ihrer benutzerdefinierten App in Teams ausgeführt wurde, müssen Sie Teams neu starten, damit sie in Ihren installierten Apps angezeigt wird.

2. Wählen Sie das Symbol "Apps " aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App in der Microsoft 365-App zu starten.

   

Ich bin auf ein Problem gestoßen

Microsoft 365 für iOS

So zeigen Sie Ihre App an, die in Microsoft 365 für iOS ausgeführt wird:

1. Starten Sie die Microsoft 365-App auf Ihrem Gerät, und melden Sie sich mit Ihrem Entwicklermandantenkonto an. Wenn die Microsoft 365-App bereits vor dem Hochladen Ihrer benutzerdefinierten App in Teams ausgeführt wurde, müssen Sie Teams neu starten, damit sie in Ihren installierten Apps angezeigt wird.

2. Wählen Sie das Symbol "Apps " aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.

3. Wählen Sie Ihr App-Symbol aus, um Ihre App in der Microsoft 365-App zu starten.

   

Ich bin auf ein Problem gestoßen

Problembehandlung

In Outlook- und Microsoft 365-Clients wird nur eine Teilmenge der Teams-Anwendungstypen und -Funktionen unterstützt. Weitere Informationen zum Überprüfen der Hostunterstützung für verschiedene TeamsJS-Funktionen finden Sie unter Microsoft 365-App-Unterstützung.

Eine allgemeine Zusammenfassung der Host- und Plattformunterstützung von Microsoft 365 für Teams-Apps finden Sie unter Erweitern von Teams-Apps auf Microsoft 365.

Sie können die Hostunterstützung einer bestimmten Funktion zur Laufzeit überprüfen, indem Sie die isSupported() Funktion für diese Funktion (Namespace) aufrufen und das App-Verhalten entsprechend anpassen. Mit dieser Aktion kann Ihre App die Benutzeroberfläche und Funktionalität auf Hosts, die dies nicht unterstützen, aufleuchten und auf Hosts, die dies nicht tun, eine elegante Fallback-Erfahrung bieten. Weitere Informationen finden Sie unter Differenzieren Ihrer App-Erfahrung.

Verwenden Sie die Kanäle der Microsoft Teams-Entwicklercommunity, um Probleme zu melden und Feedback zu geben.

Debugging

Sie können Ihre Registerkartenanwendung, die in Teams, der Microsoft 365-App und Outlook mit dem Agents Toolkit in Visual Studio Code ausgeführt wird, debuggen.

Wählen Sie die gewünschte Debugmethode und dann die Taste F5 aus. Bei der ersten Ausführung des lokalen Debuggens werden Sie vom Agents Toolkit aufgefordert, sich bei Ihrem Microsoft 365-Mandantenkonto anzumelden.

Geben Sie Feedback und melden Sie Probleme mit der Agents Toolkit-Debugerfahrung im Microsoft 365 Agents Toolkit GitHub Repo.

Debuggen auf Mobilgerät

Debuggen von Outlook für Android

So debuggen Sie Ihre App in Outlook für Android:

1. Wählen Sie im mobilen Teams-Client das Symbol "Mehr" aus, und öffnen Sie Ihre hochgeladene benutzerdefinierte App, um sie in der Outlook-App auszuführen.

2. Stellen Sie sicher, dass Ihr Android-Gerät mit Ihrem Entwicklungscomputer verbunden ist. Öffnen Sie auf Ihrem Entwicklungscomputer Ihren Browser zur DevTools-Inspektionsseite. Wechseln Sie beispielsweise zu edge://inspect/#devices In Microsoft Edge, um eine Liste der debugfähigen Android-WebAnsichten anzuzeigen.

3. Suchen Sie die Microsoft Teams Tab mit Ihrer Registerkarten-URL, und wählen Sie "Überprüfen " aus, um mit dem Debuggen Ihrer App mit DevTools zu beginnen.

   

4. Debuggen Sie Ihre Registerkarten-App in Android WebView auf die gleiche Weise wie Remotedebuggen einer normalen Website auf einem Android-Gerät.

Ich bin auf ein Problem gestoßen

Debuggen von Microsoft 365 für Android

Agents Toolkit (F5) unterstützt das Debuggen von Android-Apps in Microsoft 365 nicht. Hier erfahren Sie, wie Sie Ihre App, die in der Microsoft 365 für Android-App ausgeführt wird, remote debuggen:

1. Wenn Sie mit einem physischen Android-Gerät debuggen, verbinden Sie es mit Ihrem Entwicklungscomputer und aktivieren Sie die Option für USB-Debugging. Diese Option ist im Android-Emulator standardmäßig aktiviert.

2. Starten Sie die Microsoft 365-App von Ihrem Android-Gerät aus.

3. Öffnen Sie Ihr Profileinstellungen >> , Debuggen zulassen, und aktivieren Sie die Option Remotedebuggen aktivieren.

   

4. Einstellungen verlassen.

5. Verlassen Sie Ihren Profilbildschirm.

6. Wählen Sie Apps aus, und starten Sie Ihre hochgeladene benutzerdefinierte App, um sie in der Microsoft 365-App auszuführen.

7. Stellen Sie sicher, dass Ihr Android-Gerät mit Ihrem Entwicklungscomputer verbunden ist. Öffnen Sie auf Ihrem Entwicklungscomputer Ihren Browser zur DevTools-Inspektionsseite. Wechseln Sie beispielsweise zu edge://inspect/#devices In Microsoft Edge, um eine Liste der debugfähigen Android-WebAnsichten anzuzeigen.

8. Suchen Sie die Microsoft Teams Tab mit Ihrer Registerkarten-URL, und wählen Sie "Überprüfen " aus, um mit dem Debuggen Ihrer App mit DevTools zu beginnen.

   

9. Debuggen Sie Ihre Registerkarten-App in Android WebView auf die gleiche Weise wie Remotedebuggen einer normalen Website auf einem Android-Gerät.

Ich bin auf ein Problem gestoßen

Codebeispiel

Beispielname	Beschreibung	Node.js
Aufgabenliste	Bearbeitbare Aufgabenliste mit SSO, erstellt mit React und Azure Functions. Funktioniert nur in Teams (verwenden Sie diese Beispiel-App, um den in diesem Lernprogramm beschriebenen Upgradeprozess auszuprobieren).	View
Aufgabenliste (Microsoft 365)	Bearbeitbare Aufgabenliste mit SSO, erstellt mit React und Azure Functions. Funktioniert in Teams, Outlook, Microsoft 365 App.	View
Bild-Editor (Microsoft 365-App)	Erstellen, Bearbeiten, Öffnen und Speichern von Bildern mithilfe der Microsoft Graph-API. Funktioniert in Teams, Outlook, Microsoft 365 App.	View
Northwind Orders-App	Veranschaulicht, wie Sie die TeamsJS-Bibliothek v.2 verwenden, um die Teams-Anwendung auf andere Microsoft 365-Host-Apps zu erweitern. Funktioniert in Teams, Outlook, Microsoft 365 App. Optimiert für Mobilgeräte.	View

Nächster Schritt

Veröffentlichen Sie Ihre App, damit sie in Teams, Outlook und der Microsoft 365-App gefunden werden kann:

Veröffentlichen von Teams-Apps für Outlook und Office

Siehe auch

• Erweitern von Teams-Apps auf Microsoft 365
• Öffentliche Entwicklervorschau für Teams