Teilen über

Navigieren in einer Registerkarten-App

  • Artikel

Die Microsoft Teams JavaScript-Clientbibliothek (TeamsJS) bietet Unterstützung für die Navigation auf einer Registerkarte. In diesem Artikel werden die verfügbaren Optionen erläutert, z. B. Navigationstypen zwischen Registerkarten innerhalb der App oder die Verwendung von Teams-UI-Komponenten und der Zurück-Schaltfläche.

Hinweis

Dieses Thema enthält Version 2.0.x der Microsoft Teams JavaScript-Clientbibliothek (TeamsJS). Wenn Sie eine frühere Version verwenden, finden Sie in der Übersicht über die TeamsJS-Bibliothek Anleitungen zu den Unterschieden zwischen den neuesten Versionen von TeamsJS und früheren Versionen.

Registerkarten bieten eine hervorragende Möglichkeit, die Microsoft Teams-Erfahrung zu verbessern. Sie können Benutzern den Zugriff auf Ihre Webanwendung direkt in Teams mithilfe von Registerkarten ermöglichen, ohne sich erneut anmelden zu müssen. Weitere Informationen zu Registerkarten und dazu, wie Sie persönliche Registerkarten auf Microsoft 365-Produkte erweitern können, finden Sie unter Erstellen von Registerkarten für Teams und Erweitern einer persönlichen Microsoft 365-Registerkarte in Microsoft 365.

Die Seitenfunktion der TeamsJS-Bibliothek bietet Unterstützung für die Navigation zwischen Registerkarten innerhalb einer App. Insbesondere bietet der pages.currentApp -Namespace eine Funktion navigateTo(NavigateWithinAppParams) , die die Navigation zu einer bestimmten Registerkarte innerhalb der aktuellen App ermöglicht, und eine Funktion navigateToDefaultPage() , um zur ersten Registerkarte zu navigieren, die im Manifest der App definiert ist.

Der folgende Code veranschaulicht, wie Sie zu einer bestimmten Seite navigieren:

if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateTo({pageId: <pageId>, subPageId: <subPageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/
    const navPromise = pages.navigateToApp({appId: <appId>, pageId: <pageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}

Der folgende Code veranschaulicht, wie Sie zur Standardregisterkarte der App navigieren:


if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateToDefaultPage();
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/}

Hinweis

Die Registerkarten-App-Navigation wird nur im neuen Teams-Client unterstützt.

Verwenden Sie die Pages.navigateToApp()- Funktion oder Deep-Links für die Navigation in der Registerkarten-App.

Konfigurieren der Navigation auf der Schaltfläche "Zurück"

Wenn eine App über mehrere Registerkarten verfügt, kann ein Benutzer die Schaltfläche "Zurück" der Microsoft 365-Host-App verwenden, um den Navigationsverlauf rückwärts zu durchlaufen. Der Verlauf enthält jedoch nicht die Aktionen, die ein Benutzer auf einer Registerkarte ausführt. Wenn Sie die Schaltfläche "Zurück" verbessern möchten, können Sie Ihren eigenen internen Navigationsstapel verwalten und einen benutzerdefinierten Handler für die Auswahl der Zurück-Schaltfläche konfigurieren. Dies kann über die registerBackButtonHandler() -Funktion im pages.backStack -Namespace erreicht werden.

Nachdem Sie den Handler registriert haben, hilft es Ihnen, die Navigationsanforderung zu behandeln, bevor das System eine Aktion ausführt. Wenn der Handler in der Lage ist, die Anforderung zu verwalten, sollte er zurückgeben true , damit das System weiß, dass keine weitere Aktion erforderlich ist. Wenn der interne Stapel leer ist, sollte er zurückgegeben false werden, damit das System stattdessen die navigateBack() Funktion aufrufen und die entsprechende Aktion ausführen kann.

Zurückgeben des Fokus auf die Host-App

Nachdem der Benutzer mit der Verwendung von Elementen auf einer Registerkarte begonnen hat, bleibt der Fokus standardmäßig bei den Elementen Ihres iFrames, bis der Benutzer außerhalb des Elements auswählt. Wenn der iFrame teil des Benutzers ist, der mit Tastenkombinationen (TAB-TASTE oder F6-Taste) navigiert, können Sie sich auf die Host-App konzentrieren. Sie können sich mit der -Funktion auf die pages.returnFocus() Host-App konzentrieren. Die returnFocus() -Funktion akzeptiert einen Booleschen Wert, der die Richtung angibt, in der der Host-App falsetrue den Fokus vor und rückwärts verschoben werden soll. Im Allgemeinen hebt Vorwärts die Suchleiste hervor, und rückwärts hebt die App-Leiste hervor.

Codebeispiel

Beispielname Beschreibung Node.js
Registerkarten-App-Navigation Beispielcode zeigt, wie Sie innerhalb der App zwischen Registerkarten navigieren. Anzeigen

Siehe auch