How to Create a Contextual Menu

  • Published on Jan 17, 2025
  • 2 minute(s) read
  • g
 Prev Next

Introduction

This guide explains how to create a contextual menu in the contact details page of an account that adapts to different contexts. For this purpose, it uses an existing command called "modifierCoordonnées", which contains parameters such as website, phone number, address, city, province, and postal code.

The final result provides a contextual menu with two options:

  • An option "Afficher les coordonnées additionnelles" to display additional information.

  • An option "Modifier les coordonnées", visible only when all the contact details are displayed.

By following the steps outlined in this guide, it will be possible to test and customize this interactive menu to deliver a clear and intuitive user experience.

Step-by-step instructions

1. Create and position the contextual menu

  1. Drag and drop a contextual menu into the "title" section of the account's "Contact Details" page.

  2. Then, under the Attributes tab, select the "link" style button and search for the icon named "ellipsis v."

  3. To align the icon to the right, go to the "Style" tab in the "alignment" section and activate "align right."

2. Configure the option "Afficher les coordonnées additionnelles"

  1. Change the label "item A" to "Show additional contact details."

  2. Then, apply a horizontal wrap to the menu item.

  3. Add a "behavior" to this new "box" of type "Save page Data" to indicate whether the menu item has been clicked or not. Therefore, "Show additional contact details" will only be visible before a user clicks to display them, as specified in the behavior tab.

Key name: isActionEnabled
Value source: Other
JavaScript:

!pageState.isActionEnabled

3. Add conditional visibility behaviours to the menu

On the "Show additional contact details" menu item, add a "behavior" of type "Show Component based on a condition."

JavaScript:

!pageState.isActionEnabled

4. Create and configure the "Coordonnées additionnelles affichées" item

  1. From the Toolbox add a menu item to the right of "Show additional contact details", and name it "Additional coordinates displayed"

  2. Apply the opposite "behavior" to indicate that the item is visible when isActionEnabled is clicked.

JavaScript:

!!pageState.isActionEnabled

5. Apply visibility conditions to the information fields

The same visibility conditions are applied to the fields: website, address and phone number, to display them only when a user wants to view the additional contact details.

JavaScript:

!!pageState.isActionEnabled

6. Configure and associate the "Edit contact details" command

  • Rename one "menu item" as "Edit contact details"

  • This option will only be visible when a user has activated "Show additional contact details", as specified by its "behavior": "Show component based on a condition."

JavaScript:

!!pageState.isActionEnabled

  • Finally, add a "behavior" of type "Execute a command" on click to enable editing and associate it with the "modifyInfo" command.

Conclusion

This guide outlines the steps to create a contextual menu adaptable to different contexts, enabling the management and modification of account contact details with conditional behaviours and a dynamic interface. Users can now test the settings and optimize the user interaction on the contact details page.

Related articles