0

Context Menu

Description

You use the Context Menu part to show a context menu on demand--when the user hovers over the item with a mouse or right- or left-clicks using their mouse. Here is an example of a simple context menu:

 

This part uses a jQuery contextMenu implementation, with jquery.contextMenu.js containing the client-side logic and jquery.contextMenu.css containing the default styling.

Use

You can add a Context Menu to a logicnet in the Designer adding a node and selecting the Context menu form-node part.

Editor Fields

Basic Tab Options

Field Name Description Type/Options Optional/Mandatory
Caption This is the caption of the context menu, and it will display in the area that acts as placeholder for the context menu. Text Optional
Menu items This is the data object that defines the menu structure. Mapping of individual object properties is configured on the Menu Item Definition tab. Data object Mandatory
Selected menu item This is the name of the data object that will contain the value of the selected menu item. The system writes the value to the variable one time, ensuring that if the user does not select an item from the context menu there are no lingering items in the context. Data object Mandatory
Parent submenu items selectable If you check this the system allows the 'parent' menu item of a sub menu to be selectable. The default is Off. Checkbox Optional
Trigger This defines how the context menu is triggered. The possible values are as follows:
- Right mouse button (click with the right mouse button)
- Left mouse button (click with the left mouse button)
- On hover (move the mouse over the placeholder)
The default is Right mouse button.
Option Mandatory
Delay (msec) This is the in milliseconds before the system will display the context menu. The default is 200msec. Number Optional
Auto hide menu If this is checked the system automatically hides the context menu when the mouse moves outside the context menu or the placeholder. If this is not checked the context menu remains open until the user clicks a menu item or outside of the menu. The default is Off. Checkbox Optional
Menu icon character This is where you can define a custom menu icon. The icon can be any HTML Unicode character;  for example, & #x2615; or ?. If you do not fill in this field the system uses the standard hamburger icon: ≡  Text Optional
Disabled This determines if the control is disabled or not. If 1 or 'true', the system disables the context menu. It shows the placeholder but a user cannot trigger the context menu. Text Optional

Menu Item Definition Tab Options

Field Name Description Type/Options Optional/Mandatory
ID This is the name of the item property that defines the unique identification of the selected menu item. The value of ID will be saved into the [Selected menu item] object. Text Optional
Name This is the name of the item property that defines the item name, e.g. the text that is displayed for the menu item. Text Optional
Disabled status This is the name of the item property that defines if the menu item is enabled or disabled. If the (interpolated) value is 1 or 'true' the system disables the menu item and any applicable sub-menu items. Text Optional
Visibility status This is the name of the item property that defines if the menu item is visible or not. If the (interpolated) value is 0 or false, the menu item remains hidden. Text Optional
Access Key(s) This is the name of the item property that defines the list of characters that can be used to trigger/choose a menu item with the keyboard. If full words are used, the first letter of each word is used as access key. Text Optional
Is Separator The name of the item property that defines if the menu item is a menu separator--a thin line between menu items). If the (interpolated) value is 1 or 'true', the menu item is considered to be a separator, regardless of the rest of the properties of the menu item. Text Optional
Sub Menu Items This is the name of the item property that defines the optional sub items for a sub-context menu. These items are of the same structure as the main menu items. Text Optional
Order This is the name of the item property that defines the order of the menu items. The (interpolated) value must be a number for the order to work. Text Optional

Menu Items

For full details how the context menu is built on the client side, see https://swisnl.github.io/jQuery-contextMenu/docs.html. The context menu part only exposes a limited set of options through the part editor, which keeps the easier to configure. To define menu items, the structure mimics the required json structure for the client-side context menu implementation. Globally, a menu item will look like the following:

id: {
  name: "name",
  disabled: false/true,
  visible: true/false,
  accesskey: "access keys",
  type: "possibly separator",
  items: {...}
},

The menu items structure can contain one or more of these structures.

NOTE: When you use numbers as ID, the context menu implementation orders the menu items based on the ID, regardless of the order in which they are defined in the Lua/JSON structure.
NOTE: When mixing numbers and texts as ID, the numbers are the first ones to appear in the menu, then the menu items with text IDs are listed in the order in which they are defined in the Lua/JSON structure.

Example

Download the following project for two different examples of the context menu.

Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like Follow
  • 5 mths agoLast active
  • 17Views
  • 3 Following

Home