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.