Améliorer l'expérience utilisateur avec des tiroirs coulissants pour les détails

Dans ce guide, nous parcourons les étapes pour implémenter efficacement des tiroirs coulissants, afin que les utilisateurs puissent explorer les détails sans effort tout en restant dans le contexte de la liste principale.

Par exemple, considérez une page fonctionnelle affichant une liste de comptes. Au lieu de rediriger les utilisateurs vers une page distincte, cliquer sur un compte peut déclencher un tiroir coulissant qui affiche ses détails sur le même écran. Cela maintient l’engagement avec la liste tout en offrant une expérience plus fluide et intuitive.

Prérequis

Comme point de départ, avoir une page fonctionnelle affichant une liste. Dans notre exemple, c’est une liste de comptes :

Étapes à suivre

1. Sélectionner les données de la liste

Nous devons ajouter un « save page data » pour déterminer quel compte a été sélectionné. Ajoutez le comportement à la première boîte du repeater de la page de liste mobile. Le comportement doit être déclenché au clic et définir une clé « accountID ». La source de valeur doit être « other » et la valeur doit être en JavaScript.

data.id

2. Créer et configurer un tiroir pour l’ouverture et la fermeture

1. Pour créer la boîte du tiroir à partir de zéro, glissez-déposez un composant boîte au-dessus ou en dessous du repeater.

   Définissez sa largeur à 100 % et sa hauteur à 80 %.

2. Ensuite, ajoutez une icône X dans la boîte et alignez-la à droite. Elle servira de bouton de sortie pour l’utilisateur. Pour effacer la sélection du compte lors du clic sur l’icône, ajoutez un autre save page data. Le comportement doit être déclenché au clic et réutiliser la clé « accountID » de l’étape 1. La source de valeur doit être « other » et la valeur doit être « null » en JavaScript.

   

   À ce stade, lorsqu’un compte est sélectionné, le tiroir glisse en vue mais reste une page vide, et cliquer sur le bouton de fermeture masque le tiroir.

3. Configurer le tiroir coulissant pour afficher le contenu

1. Utilisez l’identifiant du compte sélectionné du save page data pour lier les détails du compte à la boîte du tiroir. Pour ce faire, ajoutez un set component data à une nouvelle boîte dans la boîte du tiroir.

   N’oubliez pas de limiter l’enregistrement à 1 avec « use single record ».

   

2. Stylisez le tiroir et la boîte de contenu avec des icônes, une couleur de fond, des marges, etc.

   

4. Optionnel : Ajouter un effet de flou à l’arrière-plan

1. Pour flouter la liste pendant que le tiroir est ouvert, créez une boîte avec les styles suivants :

   Largeur : 100 %

   Hauteur : 100 %

   Appliquez ce CSS et alignez le contenu en bas

   & {
     backdrop-filter: blur(10px);
   }

   

2. Ajoutez un comportement Show Component Based on a Condition à la superposition floue, déclenché par la clé accountID.

   

3. Ensuite, nous devons appliquer des « positions » pour que cette boîte ne masque que la liste. Placez la boîte du tiroir à l’intérieur de celle avec l’effet de flou et ajoutez une position « detached layer - absolute » à la boîte floue.

   

   Enfin, sélectionnez la boîte parente et changez sa position en « position anchor - relative ».

   

Conclusion

Les tiroirs coulissants offrent une alternative moderne et conviviale aux pages de détails traditionnelles en permettant aux utilisateurs de consulter les détails en contexte sans interrompre leur flux. En implémentant la gestion des données de page, une conception de tiroir réactive et des améliorations visuelles optionnelles comme les effets de flou, vous pouvez créer une expérience de navigation fluide et engageante qui améliore la convivialité et maintient les utilisateurs concentrés sur leurs tâches.