Naviguer dans une application d’onglet
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.
Naviguer entre les onglets
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 |