Partager via

Naviguer dans une application d’onglet

  • Article

La bibliothèque de client JavaScript Microsoft Teams (TeamsJS) prend en charge la navigation dans un onglet. Cet article décrit les options disponibles, notamment les types de navigation entre les onglets de l’application ou l’utilisation des composants de l’interface utilisateur Teams et du bouton Précédent.

Remarque

Cette rubrique reflète la version 2.0.x de la bibliothèque de client JavaScript Microsoft Teams (TeamsJS). Si vous utilisez une version antérieure, reportez-vous à la vue d’ensemble de la bibliothèque TeamsJS pour obtenir des conseils sur les différences entre la dernière version de TeamsJS et les versions antérieures.

Les onglets offrent un excellent moyen d’améliorer l’expérience Microsoft Teams. Vous pouvez fournir aux utilisateurs l’accès à votre application web directement dans Teams à l’aide d’onglets, sans avoir à se reconnecter. Pour plus d’informations sur les onglets et sur la façon dont vous pouvez étendre les onglets personnels sur les produits Microsoft 365, voir Générer des onglets pour Teams et Étendre un onglet personnel Teams sur Microsoft 365.

La fonctionnalité pages de la bibliothèque TeamsJS prend en charge la navigation entre les onglets au sein d’une application. Plus précisément, l’espace pages.currentApp de noms offre une fonction navigateTo(NavigateWithinAppParams) pour permettre la navigation vers un onglet spécifique dans l’application actuelle et une fonction navigateToDefaultPage() pour accéder au premier onglet défini dans le manifeste de l’application.

Le code suivant montre comment accéder à une page spécifique :

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*/});
}

Le code suivant montre comment accéder à l’onglet par défaut de l’application :


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*/}

Remarque

La navigation de l’application par onglet est prise en charge uniquement dans le nouveau client Teams.

Utilisez la fonction pages.navigateToApp() ou des liens profonds pour la navigation dans l’application onglet.

Configurer la navigation sur le bouton Précédent

Lorsqu’une application a plusieurs onglets, un utilisateur peut utiliser le bouton Précédent de l’application hôte Microsoft 365 pour revenir en arrière dans l’historique de navigation. Toutefois, l’historique n’inclut pas les actions qu’un utilisateur effectue dans un onglet. Si vous souhaitez améliorer l’expérience du bouton Précédent, vous pouvez gérer votre propre pile de navigation interne et configurer un gestionnaire personnalisé pour les sélections de boutons Précédent. Cela peut être effectué via la registerBackButtonHandler() fonction dans l’espace de pages.backStack noms .

Une fois que vous avez inscrit le gestionnaire, il vous aide à traiter la demande de navigation avant que le système ne prenne des mesures. Si le gestionnaire est en mesure de gérer la demande, elle doit être retournée true afin que le système sache qu’aucune autre action n’est nécessaire. Si la pile interne est vide, elle doit être retournée false afin que le système puisse appeler la fonction à la navigateBack() place et prendre l’action appropriée.

Rétablir le focus sur l’application hôte

Une fois que l’utilisateur a commencé à utiliser des éléments dans un onglet, par défaut, le focus reste sur les éléments de votre iFrame jusqu’à ce que l’utilisateur sélectionne en dehors de celui-ci. Si l’iFrame fait partie de l’utilisateur qui navigue avec des raccourcis clavier (touche Tab ou touche F6), vous pouvez vous concentrer sur l’application hôte. Vous pouvez vous concentrer sur l’application hôte à l’aide de la pages.returnFocus() fonction . La returnFocus() fonction accepte une valeur booléenne indiquant la direction à suivre pour avancer le focus dans l’application hôte ; true pour l’avant et false pour l’arrière. En règle générale, la barre de recherche est mise en surbrillance vers l’avant et la barre de l’application vers l’arrière.

Exemple de code

Exemple de nom Description Node.js
Navigation de l’application par onglet Exemple de code montrant comment naviguer entre les onglets au sein de l’application. View

Voir aussi