Personnaliser la route d’une page de détail pour la rendre conviviale

Introduction

Par défaut, la route de la page de détail affiche l’ID des données. Cependant, il est possible de créer une URL plus conviviale comme https://dazzm-training-gs.octopus-esm.com/profile/Gabrielle-Strauss au lieu de la route par défaut https://dazzm-training-gs.octopus-esm.com/user/2dd26bd3-eb86-46ad-a1c6-d4830271a430.

De plus, nous vous guiderons dans la mise en place d’une URL personnalisée pour la page de détail de l’utilisateur actuel.

Étapes à suivre

1. Créer un champ calculé pour une URL conviviale

Comme première étape, créez un champ Computed. Il sera utilisé plus tard dans la route de la page.

Pour notre exemple, il doit être ajouté sous l’Aggregate User. Nous avons utilisé « userRoot » comme nom de champ et sélectionné « text » comme type de champ. Ensuite, nous avons utilisé le même Code pour ce champ que pour le champ calculé « name », mais au lieu d’utiliser un espace entre le prénom et le nom de l’utilisateur, nous avons utilisé un trait d’union.

Note : Comme cela sera utilisé plus tard dans une URL, il est important d’éviter d’avoir des espaces

return (this.firstName ? this.firstName : '') + '-' + (this.lastName ? this.lastName : '');

2. Configurer la route de la page de détail avec une URL personnalisée

Depuis le dossier Pages du panneau Project Explorer, sélectionnez la page de détail qui a besoin d’une URL personnalisée. Pour notre exemple, nous avons sélectionné la page « user/:id ».

Ouvrez ses propriétés et changez sa route pour :

Note : Si vous souhaitez personnaliser davantage l’URL, vous pourriez également changer la première partie : /profile/:userRoot

3. Configurer la navigation pour la page de liste des utilisateurs

Pour associer la page de liste des utilisateurs à la nouvelle route de page de détail, sélectionnez le composant liste et allez à son onglet Attribute. Activez la fonctionnalité Prevent Navigation.

Ensuite, sélectionnez le champ « name » de la liste et ajoutez un comportement Navigate to Another Page. Sélectionnez l’événement onClick et utilisez JS :

return `/profile/${data.userRoot}`

4. Corriger le problème de données sur la page de détail de l’utilisateur

Ensuite, allez à la page de détail de l’utilisateur. Pour corriger le problème de données, changez le Set Component Data par défaut en remplaçant JS par Search -> User. Ensuite, ajoutez une limite de 1 enregistrement et « use single record ». Puis, ajoutez un critère :

Name: userRoot

Operator: Equal

Value: params.userRoot

5. Créer une route personnalisée pour la page de profil de l’utilisateur actuel

Vous pourriez également dupliquer la page de détail de l’utilisateur, pour en créer une unique pour le profil de l’utilisateur actuel. Changez simplement la Route pour : « /my-profile »

Ensuite, avec le champ « name » de la page de liste des utilisateurs sélectionné, changez le JS de Navigate to Another Page pour :

return currentUser.id === data.id ? '/my-profile' : `/profile/${data.userRoot}`

Conclusion

En suivant ces étapes, vous avez créé avec succès des URL personnalisées et conviviales pour les pages de profil utilisateur. Cela améliore la convivialité et l’esthétique de votre application en remplaçant les routes basées sur l’ID par des routes plus lisibles incluant les noms d’utilisateur. De plus, vous avez appris comment implémenter une route personnalisée pour le profil de l’utilisateur actuel, améliorant la navigation et la personnalisation. Comme prochaine étape, envisagez d’ajouter d’autres configurations d’URL dynamiques ou de personnaliser d’autres sections de votre plateforme pour une expérience utilisateur encore plus intuitive.