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

Artikel
10/17/2024

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 Tutorial wird veranschaulicht, wie Sie eine vorhandene persönliche Registerkarte von Teams verwenden und aktualisieren, um sie in Microsoft 365-Anwendungen auszuführen.

Das Aktualisieren Ihrer persönlichen Teams-App für die 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 Microsoft Teams JavaScript-Clientbibliotheksverweise (TeamsJS).
Ändern Sie die Header ihrer Inhaltssicherheitsrichtlinie.
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 Leitfadens führt Sie durch diese Schritte und zeigt Ihnen, wie Sie eine Vorschau Ihrer persönlichen Registerkarte in anderen Microsoft 365-Anwendungen anzeigen.

Voraussetzungen

Für dieses Tutorial benötigen Sie Folgendes:

Einen Sandkastenmandanten für das Microsoft 365-Entwicklerprogramm.
Ein Computer, auf dem Microsoft 365-Apps über den aktuellen Kanal Microsoft 365 Apps installiert sind.
(Optional) Ihr Sandboxmandant, der in Microsoft 365 Targeted Releases registriert ist.
(Optional) Ein Android-Gerät oder -Emulator mit installierter Microsoft 365 für Android-App.
(Optional) Teams Toolkit-Erweiterung für Microsoft Visual Studio Code, um Ihren Code zu aktualisieren.

Erforderliche Komponenten installieren

Vorbereiten Ihrer persönlichen Registerkarte für das Upgrade

Wenn Sie über eine vorhandene persönliche Registerkarten-App verfügen, erstellen Sie eine Kopie oder einen Branch Ihres Produktionsprojekts zum Testen, und aktualisieren Sie Ihre App-ID im App-Manifest, um einen neuen Bezeichner (anders als die Produktions-App-ID, zu Testzwecken) zu verwenden.

Wenn Sie Beispielcode anstelle Ihres eigenen Produktionscodes verwenden möchten, können Sie das Beispiel für die Aufgabenliste verwenden. Sie können entweder die Einrichtungsschritte im GitHub-Repository Beispiel für Todo-Liste ausführen oder die Teams Toolkit-Erweiterung verwenden, um eine neue Teams-App zu erstellen (wählen Sie Start aus einer Beispiel-Todo-Liste>mit Back-End in Azure aus). Nachdem Sie eine persönliche Registerkarte erstellt haben, kehren Sie zu diesem Artikel zurück, um sie auf Microsoft 365 zu erweitern.

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

Schnellstart

Verwenden Sie die Teams Toolkit-Erweiterung für Visual Studio Code, um mit einer persönlichen Registerkarte zu beginnen, die für die Ausführung in Teams, Outlook und Microsoft 365 aktiviert ist.

Öffnen Sie Visual Studio Code.
Wählen Sie in der Aktivitätsleiste das Symbol Teams Toolkit aus.
Wählen Sie Neue App erstellenaus.
Wählen Sie Tab aus.
Wählen Sie Die Registerkarte "Basic" aus.
Wählen Sie eine bevorzugte Programmiersprache aus.
Wählen Sie einen Speicherort auf Ihrem lokalen Computer für den Arbeitsbereichsordner aus, und geben Sie ihren Anwendungsnamen ein.
Nachdem Ihre App erstellt wurde, stellen Sie in der Teams Toolkit-Erweiterung sicher, dass Sie beim entsprechenden Microsoft 365 Developer Program Sandbox-Mandanten und Azure-Konto angemeldet sind. Diese Optionen sind im Abschnitt ACCOUNTS der Erweiterung verfügbar.
Wählen Sie befehlspalette... unter der Option Ansicht oder STRG+UMSCHALT+P aus.
Geben Sie Teams: Bereitstellen ein, um die Teams-App-Ressourcen wie Azure App Service, App Service Plan, Azure Bot und verwaltete Identität in Ihrem Azure-Konto zu erstellen. Alternativ können Sie im Abschnitt LIFECYCLE der Erweiterung bereitstellen auswählen.
Wählen Sie ein Abonnement und eine Ressourcengruppe aus. Wenn Sie eine neue Ressourcengruppe erstellen möchten, müssen Sie den Speicherort angeben.
Wählen Sie Bereitstellen aus.
Wählen Sie befehlspalette... unter der Option Ansicht oder STRG+UMSCHALT+P aus.
Geben Sie Teams: Deploy ein, um den Beispielcode für die bereitgestellten Ressourcen in Azure bereitzustellen, und starten Sie die App. Alternativ können Sie im Abschnitt LIFECYCLE der Erweiterung bereitstellen auswählen.

Von hier aus können Sie fortfahren, um Ihre benutzerdefinierte App in Teams hochzuladen und eine Vorschau Ihrer App in Outlook und der Microsoft 365-App anzuzeigen. Das App-Manifest und die TeamsJS-API-Aufrufe wurden bereits für die Microsoft 365-App aktualisiert.

SharePoint-Framework -Apps (SPFx)

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

Stellen Sie sicher, dass Sie über die neueste Version von SPFx verfügen.
```
npm install @microsoft/generator-sharepoint@latest --global
```
Aktualisieren Sie das App-Manifest.
Aktualisieren Sie die TeamsJS-Verweise.

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

Aktualisieren des App-Manifests

Sie müssen die App-Manifestschemaversion 1.13 (oder höher) verwenden, um die Ausführung Ihrer persönlichen Teams-Registerkarte in Outlook- und Microsoft 365-Apps zu ermöglichen. Weitere Informationen zur Schemaversion finden Sie unter App-Manifest.

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

Teams Toolkit
Manuelle Anwendung

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

Öffnen Sie Ihr App-Manifest, und aktualisieren Sie und $schemamanifestVersion manuell mit der entsprechenden Version. Versionsinformationen finden Sie im Microsoft Teams-Entwicklermanifest :

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

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

Angeben der Hostruntime-Anforderungen (Entwicklervorschau)

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

Weitere Informationen finden Sie unter Angeben von Microsoft 365-Hostruntime-Anforderungen 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 werden zu können. Frühere Versionen von TeamsJS sind in Outlook- und Microsoft 365-Apps weiterhin funktionsfähig, aber Veraltetkeitswarnungen 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 unter TeamsJS GitHub-Repository.

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

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

Nach Abschluss des Vorgangs werden Ihre package.json Dateiverweise @microsoft/teams-js@2.0.0 (oder höher) und Ihre *.js/.ts Dateien und *.jsx/.tsx aktualisiert mit:

Importanweisungen für teams-js@2.x.x
Funktions-, Enumerations- und Schnittstellenaufrufe für teams-js@2.x.x
TODO Kommentarerinnerungen kennzeichnen Bereiche, die möglicherweise von Änderungen an der Kontextschnittstelle betroffen sind
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.

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 zur *.cloud.microsoft Domäne migriert. Führen Sie vor September 2024 die folgenden Schritte aus, um sicherzustellen, dass Ihre App weiterhin auf unterstützten Microsoft 365-Webclienthosts gerendert wird:

Aktualisieren Sie die TeamsJS-Bibliothek auf v.2.19.0 oder höher. Weitere Informationen zur neuesten Version von TeamsJS finden Sie unter Microsoft Teams JavaScript-Clientbibliothek.
Wenn Sie CSP-Header ( Content Security Policy ) für Ihre App definiert haben, aktualisieren Sie die Frame-Vorgängerdirektive , 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. Dieser Ansatz stellt sicher, dass Ihre App weiterhin sowohl für vorhandene als auch für zukünftige Microsoft 365-Hostanwendungen funktioniert, und minimiert den Bedarf an nachfolgenden Änderungen.

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

https://*.cloud.microsoft

Aktualisieren Microsoft Entra App-Registrierung für SSO

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

Melden Sie sich mit Ihrem Sandkastenmandantenkonto beim Microsoft Azure-Portal an.
Öffnen Sie App-Registrierungen.
Wählen Sie den Namen Ihrer persönlichen Registerkartenanwendung aus, um die entsprechende App-Registrierung zu öffnen.
Wählen Sie Eine API verfügbar machen aus (unter Verwalten).

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 teilen Client-IDs.

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 für persönliche Registerkarten in Microsoft Teams hochzuladen.

Packen Sie Ihre (App-Manifest und App-Symbole) in eine ZIP-Datei. Wenn Sie teams Toolkit zum Erstellen Ihrer App verwendet haben, können Sie dies ganz einfach mithilfe der Option Zip Teams App Package im Abschnitt UTILITY des Teams Toolkits tun. Wählen Sie die manifest.json Datei für Ihre App und die entsprechende Umgebung aus.
Wechseln Sie zu Microsoft Teams, und melden Sie sich mit Ihrem Sandbox-Mandantenkonto an.
Wählen Sie Apps aus, um den Bereich Apps verwalten zu öffnen. Wählen Sie dann App hochladen aus.
Wählen Sie die Option Benutzerdefinierte App hochladen aus, und wählen Sie Ihr App-Paket aus.

Nachdem sie in Teams hochgeladen wurde, ist Ihre persönliche Registerkarte in Outlook und der Microsoft 365-App verfügbar. Sie müssen sich mit den gleichen 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 nicht als App in Microsoft 365-App oder Outlook erfolgt.

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

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

Outlook unter Windows

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

Starten Sie Outlook, und melden Sie sich mit Ihrem Entwickler-Mandantenkonto an.
Wählen Sie auf der Seitenleiste Weitere Apps aus. Der Titel Ihrer hochgeladenen benutzerdefinierten App wird unter Ihren installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App in Outlook zu starten.

Outlook im Web

So zeigen Sie Ihre App in Outlook im Web an:

Wechseln Sie zu Outlook im Web, und melden Sie sich mit Ihrem Entwicklermandantenkonto an.
Wählen Sie auf der Seitenleiste Apps aus. Der Titel Ihrer hochgeladenen benutzerdefinierten App wird unter Ihren installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App zu starten und eine Vorschau anzuzeigen, die in Outlook im Web ausgeführt wird.

Outlook für Android-App

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

Ö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.
Wählen Sie das Symbol Apps aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App in Outlook für Android zu öffnen.

Outlook-App für iOS

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

Ö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 es im Abschnitt installierte Apps anzuzeigen.
Wählen Sie das Symbol Mehr aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App in der Outlook-App zu öffnen.

Microsoft 365 unter Windows

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

Starten Sie Microsoft 365, und melden Sie sich mit Ihrem Entwicklermandantenkonto an.
Wählen Sie auf der Seitenleiste das Symbol Apps aus. Der Titel Ihrer hochgeladenen benutzerdefinierten App wird unter Ihren installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App in Microsoft 365 zu starten.

Microsoft 365 im Web

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

Melden Sie sich mit den Anmeldeinformationen des Testmandanten bei microsoft365.com an.
Wählen Sie auf der Seitenleiste das Symbol Apps aus. Der Titel Ihrer hochgeladenen benutzerdefinierten App wird unter Ihren installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App in Microsoft 365 im Web zu starten.

Microsoft 365 für Android-App

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

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.
Wählen Sie das Symbol Apps aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App in der Microsoft 365-App zu starten.

Microsoft 365 für iOS

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

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.
Wählen Sie das Symbol Apps aus. Ihre hochgeladene benutzerdefinierte App wird unter den installierten Apps angezeigt.
Wählen Sie Ihr App-Symbol aus, um Ihre App in der Microsoft 365-App zu starten.

Problembehandlung

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

Eine allgemeine Zusammenfassung der Microsoft 365-Host- und Plattformunterstützung 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 Funktion für diese Funktion (Namespace) aufrufen und das isSupported() App-Verhalten entsprechend anpassen. Diese Aktion ermöglicht es Ihrer App, die Benutzeroberfläche und Funktionalität auf Hosts zu erweitern, die sie unterstützen, und bietet eine ordnungsgemäße Fallbackerfahrung auf Hosts, die dies nicht tun. 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 debuggen, die in Teams, microsoft 365-App und Outlook mit dem Teams-Toolkit in Visual Studio Code ausgeführt wird.

Screenshot: Dropdownmenü

Wählen Sie die gewünschte Debugmethode und dann F5 aus. Nach der ersten Ausführung des lokalen Debugs fordert Teams Toolkit Sie auf, sich bei Ihrem Microsoft 365-Mandantenkonto anzumelden.

Geben Sie Feedback, und melden Sie alle Probleme mit der Debugerfahrung des Teams-Toolkits unter Microsoft Teams Framework (TeamsFx).

Mobiles Debuggen

Debuggen von Outlook für Android

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

Wählen Sie das Symbol Mehr im mobilen Teams-Client aus, und öffnen Sie Ihre hochgeladene benutzerdefinierte App, um sie in der Outlook-App auszuführen.
Stellen Sie sicher, dass Ihr Android-Gerät mit Ihrem Entwicklungscomputer verbunden ist. Öffnen Sie auf Ihrem Entwicklungscomputer Ihren Browser, um die zugehörige DevTools-Inspektionsseite zu öffnen. Navigieren Sie beispielsweise in Microsoft Edge zu edge://inspect/#devices , um eine Liste der debugfähigen Android WebViews anzuzeigen.
Suchen Sie mit Ihrer Registerkarten-URL, und wählen Sie Überprüfen aus, um mit dem Microsoft Teams Tab Debuggen Ihrer App mit DevTools zu beginnen.
Debuggen Sie Ihre Registerkarten-App in der Android WebView auf die gleiche Weise wie eine reguläre Website auf einem Android-Gerät.

Debuggen von Microsoft 365 für Android

Das Teams-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:

Wenn Sie mit einem physischen Android-Gerät debuggen, verbinden Sie es mit Ihrem Entwicklungscomputer, und aktivieren Sie die Option für das USB-Debuggen. Diese Option ist standardmäßig mit dem Android-Emulator aktiviert.
Starten Sie die Microsoft 365-App auf Ihrem Android-Gerät.
Öffnen Sie Ihr Profil Me-Einstellungen >> Debuggen zulassen, und aktivieren Sie die Option Remotedebugging aktivieren.
Behalten Sie die Einstellungen bei.
Verlassen Sie ihren Profilbildschirm.
Wählen Sie Apps aus, und starten Sie Ihre hochgeladene benutzerdefinierte App, die in der Microsoft 365-App ausgeführt wird.
Stellen Sie sicher, dass Ihr Android-Gerät mit Ihrem Entwicklungscomputer verbunden ist. Öffnen Sie auf Ihrem Entwicklungscomputer Ihren Browser, um die zugehörige DevTools-Inspektionsseite zu öffnen. Navigieren Sie beispielsweise in Microsoft Edge zu edge://inspect/#devices , um eine Liste der debugfähigen Android WebViews anzuzeigen.
Suchen Sie mit Ihrer Registerkarten-URL, und wählen Sie Überprüfen aus, um mit dem Microsoft Teams Tab Debuggen Ihrer App mit DevTools zu beginnen.
Debuggen Sie Ihre Registerkarten-App in der Android WebView auf die gleiche Weise wie eine reguläre Website auf einem Android-Gerät.

Codebeispiel

Beispielname	Beschreibung	Node.js
Aufgabenliste	Bearbeitbare Aufgabenliste mit SSO, die mit React und Azure Functions erstellt wurde. Funktioniert nur in Teams (verwenden Sie diese Beispiel-App, um den in diesem Tutorial beschriebenen Upgradeprozess auszuprobieren).	View
Aufgabenliste (Microsoft 365)	Bearbeitbare Aufgabenliste mit SSO, die mit React und Azure Functions erstellt wurde. Funktioniert in Teams, Outlook, Microsoft 365-App.	View
Image Editor (Microsoft 365-App)	Erstellen, Bearbeiten, Öffnen und Speichern von Bildern mithilfe von Microsoft Graph-API. Funktioniert in Teams, Outlook, Microsoft 365-App.	View
Northwind Orders-App	Veranschaulicht, wie Die TeamsJS-Bibliothek v.2 verwendet wird, 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 Microsoft 365-Apps erkannt werden kann:

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

Freigeben über