Menu contextuel

Introduction

Ce guide explique comment créer un menu contextuel dans la fiche de coordonnées d’un compte, qui s’adapte en fonction du contexte. Pour cela, il s'appuie sur une commande existante nommée « modifierCoordonnées », contenant des paramètres tels que le site web, le numéro de téléphone, l’adresse, la ville, la province et le code postal.

Le résultat final permet d’obtenir un menu contextuel avec deux options :

Une option « Afficher les coordonnées additionnelles » pour dévoiler des informations supplémentaires.
Une option « Modifier les coordonnées », visible uniquement lorsque toutes les coordonnées sont affichées.

En suivant les étapes décrites, il sera possible de tester et de personnaliser ce menu interactif pour offrir une expérience utilisateur claire et intuitive.

Étapes à suivre

1. Créer et positionner le menu contextuel

a. Drag et drop un menu contextuel dans la section « titre » de la fiche « Coordonnées » du compte.

b. Puis, sous l’onglet Attribut, choisis le bouton de style « link » puis recherche l’icône du nom d’« ellipsis v ».

c. Pour aligner l’icône à droite, passe à l’onglet « Style » de la section « alignment » et active « align right ».

2. Configurer l'option "Afficher les coordonnées additionnelles"

Change le label « item A » pour « Afficher les coordonnées additionnelles ».
Ensuite, applique un wrap horizontal sur le menu item.
Ajoute un « behavior » sur cette nouvelle « box », de type « Save page Data », pour indiquer si le « menu item » a été cliqué ou non. Donc, « Afficher coordonnées additionnelles» sera uniquement visible avant qu’un utilisateur clique pour les afficher, comme indiqué dans l’onglet behavior.
On nomme notre key: isActionEnabled.
Value source: Other
```
!pageState.isActionEnabled
```

3. Ajouter des comportements de visibilité conditionnelle pour le menu

Sur le « menu item » « Afficher les coordonnées additionnelles », ajoute un « behavior » de type « Show Component based on a condition »

!pageState.isActionEnabled

4. Créer et configurer l'item "Coordonnées additionnelles affichées"

Du « Toolbox », on ajoute un « menu item » à droite de « Afficher les coordonnées additionnelles », qu’on nomme « Coordonnées additionnelles affichées ».
Applique le « behavior » contraire pour indiquer que l’item est visible quand isActionEnabled est cliqué.
```
!!pageState.isActionEnabled
```

5. Appliquer des conditions de visibilité sur les champs d'informations

Les mêmes conditions de visibilité sont ajoutées aux champs: ville, province et code postal pour les afficher seulement lorsqu’un utilisateur veut voir les détails additionnels des coordonnées.

 !!pageState.isActionEnabled

6. Configurer et associer l'option "Modifier les coordonnées"

Ajoute le dernier « menu item » et nomme le « Modifier les coordonnées ».
Cette option sera visible que lorsqu’un utilisateur aura activer « afficher coordonnées additionnelles », comme indiqué par son « behavior » :Show component based on a condition
```
!!pageState.isActionEnabled
```
Termine en ajoutant un « behavior » de type « Execute a command », on click, pour modifier et associe le à la commande « modifierCoordonnées »

Conclusion

Ce guide détaille les étapes pour créer un menu contextuel adaptable à différents contextes, permettant de gérer et de modifier les coordonnées d’un compte avec des comportements conditionnels et une interface dynamique. Vous pouvez maintenant tester vos paramètres et optimiser l’interaction utilisateur sur la fiche de coordonnées.