Conception d’une barre de menu interactive et dynamique dans l’application Qodly

Dans le blog de cette semaine, nous nous intéressons à la navigation. La navigation est un élément clé de toute application web. Un système de navigation bien structuré permet aux utilisateurs de trouver rapidement ce dont ils ont besoin et améliore leur expérience globale.

Avec 4D Qodly Pro, la gestion de la navigation est à la fois simple et flexible. En utilisant le composant Page Loader, vous pouvez charger dynamiquement des pages en fonction des actions de l’utilisateur.

Dans ce blog, nous allons voir comment mettre en place une barre de navigation efficace à l’aide de 4D Qodly Pro. Nous utiliserons comme exemple notre application Performance Review, que vous pouvez télécharger sur GitHub (lien à ajouter). Nous aborderons son design, ses interactions et la gestion des permissions afin de créer une expérience transparente adaptée à chaque rôle d’utilisateur.

Application d’évaluation des performances

Chargement de pages avec le chargeur de pages

Le chargement d’une page avec 4D Qodly Pro est intuitif. Il suffit de glisser-déposer le composant Page Loader sur votre interface et de l’associer à une source de données textuelles.

Le Page Loader charge automatiquement la page correspondant à la valeur stockée dans la source de données. En mettant à jour cette valeur, les utilisateurs peuvent naviguer de manière transparente entre les différentes pages de l’application.

Choisir le bon type de navigation

Maintenant que nous savons comment charger des pages à l’aide du Page Loader, nous devons déterminer comment modifier dynamiquement cette source de données pour faciliter une navigation fluide et intuitive.

Il existe trois principaux types de navigation :

• La barre de menu : Une barre de navigation traditionnelle, toujours visible, idéale pour un accès rapide.
• Menu hamburger: Un menu pliable accessible via une icône, parfait pour les applications mobiles.
• Menu latéral: Positionné sur le côté, il convient aux applications complexes comportant plusieurs sections.

 

Le type de navigation doit être choisi en fonction des besoins spécifiques de votre application et de vos utilisateurs cibles. Un système de navigation bien conçu améliore l’expérience de l’utilisateur et garantit un accès facile aux fonctionnalités clés.

Pour l’application Performance Review, nous avons opté pour une barre de menu classique. Cette approche permet d’accéder rapidement aux différentes sections tout en garantissant une expérience fluide sur les ordinateurs de bureau et les tablettes.

Création d’une barre de navigation

Notre barre de navigation est conçue pour être simple, efficace et conviviale. Voici ses principales caractéristiques :

• Une barre de navigation à hauteur fixe avec une option collante pour rester visible en haut.
• L’icône et le nom de l’application.
• Un menu déroulant Ressources humaines contenant :
  • Collaborator
  • Reviews
  • Trainings
• Un bouton Manager.
• Un bouton Collaborator.
• Le nom de l’utilisateur connecté.
• Un bouton Logout.

 

 

Création de la barre supérieure

La barre de navigation est toujours affichée en haut de l’écran. Pour ce faire, nous créons une boîte de style avec une propriété sticky :

• position : sticky garantit que la barre reste visible pendant le défilement.
  
• top : 0 et left : 0 positionnent la barre en haut à gauche de la page.

 

 

Ajout de l’icône et du titre de l’application

Nous utilisons une boîte de style avec Flexbox pour aligner les éléments et maintenir la réactivité sur différentes tailles d’écran.

À l’intérieur de cette boîte :

• Un composant Image pour l’icône.
• Un composant Texte pour afficher le nom de l’application.

Création des menus

Une deuxième boîte de style (utilisant Flexbox) est ajoutée pour contenir le menu déroulant et les deux boutons de navigation.

Création du menu déroulant « Ressources humaines

Pour créer le menu déroulant, nous utilisons un composant personnalisé appelé Popover. Vous pouvez télécharger ce composant sur GitHub.

• Glissez et déposez le composant Popover sur votre page.
• Dans la section menu, ajoutez un texte statique intitulé Ressources humaines.
• Dans la section superposition, insérez trois boutons intitulés Collaborateur, Examens et Formations.

Pour plus de détails sur les composants personnalisés, reportez-vous à notre précédent article de blog : « Étendre notre application Qodly avec des composants personnalisés »

Ajout du bouton Gestionnaire et Collaborateur

Il suffit d’ajouter deux boutons distincts intitulés « Manager » et « Collaborateur ».

Création de la zone d’information

Une troisième boîte de style (utilisant Flexbox) est utilisée pour afficher le nom de l’utilisateur connecté et fournir une action de déconnexion.

• Un composant Texte, lié à la source de données Nom d’utilisateur, affiche le nom de l’utilisateur connecté sur le côté droit de la barre de navigation.

• Le bouton Logout permet aux utilisateurs de se déconnecter rapidement. Dans l’événement onClick du bouton, affectez l’action standard de déconnexion par authentification.

Pour plus de détails sur l’authentification, consultez ce précédent article de blog : Intégrer l’authentification des utilisateurs dans vos applications Qodly.

Implémentation des interactions de navigation

La navigation est gérée par une variable appelée pageName, qui sert de source de données pour le chargeur de pages.

• Chaque élément de menu est associé à une action qui met à jour la valeur pageName.
• Lorsque l’utilisateur clique sur un bouton, la page correspondante est chargée dynamiquement.
• Pour chaque bouton, nous appliquons l’action Set Datasource à l’événement onClick :
  • pageName = « CollaboratorPage » pour afficher la page Collaborateur.
  • pageName = « ManagerPage » pour afficher la page du Manager.
  • Et ainsi de suite…

Cette approche garantit une navigation fluide et rapide sans recharger l’application.

Gestion des autorisations

Tous les boutons de menu ne sont pas visibles par tous les utilisateurs. Leur visibilité dépend du rôle de l’utilisateur :

• Collaborator: Accès uniquement à la page Collaborateur.
• Manager: Accès aux pages Manager et Collaborateur.
• RH: accès à toutes les pages.

Nous utilisons la gestion des états pour contrôler dynamiquement les options visibles en fonction du rôle de l’utilisateur connecté.

Gestion des rôles multiples

Un manager a un double rôle :

• En tant que collaborateur, il effectue sa propre évaluation des performances.
• En tant que manager, il examine et valide les évaluations de performance des membres de son équipe.

Pour gérer cela, nous définissons deux sources de données :

• userInfo.maxRole : Représente le rôle le plus élevé attribué à l’utilisateur.
• userInfo.role : Représente le rôle actuellement actif de l’utilisateur.

 

Alimentation des sources de données :

Lors de l’authentification, à l’aide de la fonction ds.authentify(), les informations relatives à l’utilisateur sont stockées dans la mémoire de session :

var $obj : Object
$obj :=Session.storage

If ($obj.Employee=Null)
Use ($obj)
$obj .Employee:=New shared object
End use
End if

Use ($obj.Employee)
$obj .Employee.ID:=$employee.ID
$obj .Employee.name:=$employeeFirstname+" "+$employee.Lastname
$obj .Employee.role:="Collaborateur"
$obj .Employee.maxRole:="Collaborateur"
End Use

Une fonction d’aide getUserInfo() est fournie pour récupérer les détails de l’utilisateur dans la page Web :

exposed Function getUserInfo: Object
If (Session=Null)
return Storage .Employee
Else
return Session .storage.Employee
End if

Les deux fonctions sont appelées lors de l’événement onClick du bouton de connexion :

• ds.authentify()
• ds.getUserInfo()

 

Création et configuration des états :

• Cliquez sur le bouton « + » pour ajouter des états.

 

 

• Créez un état maxManager, dans lequel le menu Ressources humaines est caché (display : none).

 

 

• Créer un état maxCollaborateur, dans lequel les options Ressources humaines, Gestionnaire et Collaborateur sont masquées. Étant donné qu’un collaborateur n’a accès qu’à une seule page, le menu de navigation devient inutile.

 

 

Définir des règles d’affichage conditionnel :

Nous voulons :

• Si userInfo.maxRole = « hr », afficher l’état par défaut.
• Si userInfo.maxRole = « manager », afficher l’état Manager.
• Si userInfo.maxRole = « collaborator », afficher l’état Collaborateur.

Ces règles sont facilement implémentées en utilisant l’éditeur de configuration des états conditionnels de Qodly Studio.

Pour plus de détails sur la gestion des états, consultez notre précédent article de blog : Rendez vos applications Qodly dynamiques et interactives avec des états.

D’autres états existent pour gérer le menu, la fenêtre de connexion ou l’élément de menu sélectionné. A vous d’explorer comment ils sont configurés, et n’hésitez pas à nous rejoindre sur le forum si vous avez des questions.

Optimisation pour différentes tailles d’écran

Notre application est conçue pour une utilisation sur ordinateur de bureau et sur tablette. Pour garantir une expérience utilisateur optimale, la barre de navigation est entièrement réactive.

• Masquer certains éléments lorsque l’écran est trop petit (par exemple, le nom de l’application et le nom de l’utilisateur connecté).
• en réorganisant le menu en colonnes sur les petits écrans pour optimiser l’espace.

 

Le masquage dynamique des éléments est géré par des requêtes média CSS (par exemple, en utilisant max-width), tandis que Flexbox avec l’option Wrap garantit que le menu s’ajuste automatiquement en fonction de l’espace disponible.

• Grand écran

• Écran moyen

• Petit écran

Pour en savoir plus sur la personnalisation CSS dans Qodly Studio, consultez notre précédent article : Personnalisez vos interfaces Qodly avec CSS.

Prochaines étapes

Vous disposez maintenant des éléments essentiels pour créer une barre de navigation interactive et dynamique avec 4D Qodly Pro.

Nous vous encourageons à partager vos réalisations et à poser des questions sur le Forum 4D pour continuer à échanger avec la communauté.