How to create context menus for grid layouts using navigation rules
Summary
Context menus enable access to specific actions through a right-click fly-out menu. You can add context menus to grid, tree, and tree grid layouts by building a navigation rule.
In the example below, a navigation rule is used in conjunction with a Grid layout to enable the following options on items within the grid:
- Add a row
- Delete a row
- Add a note
Suggested Approach
The Grid layout , introduced in V6.1, allows users to interact with an array (which may represent a Page List
or Page Group
property). See How to add a Grid layout to a section for basic information about Grid layouts.
To add a context menu to a grid Layout:
- On the Advanced tab of a Repeat Grid properties panel, enter the name of a navigation rule to be created in the Right Click field. By default, the navigation rule is created in the page class of the repeat grid.
- In the navigation rule, double-click the first entry to edit the node. On the Node Details panel, set the Type value to Selected Item. This ensures that the configured action will only occur within the context of a single item. Set the Action value to Add Row.
- Add a new node to the list and repeat step 2. Select the Delete Row action.
- To add a custom action, you can specify a local action that will appear in a modal window. Add a new node and configure it as shown:
The specified local action AddNote contains a field to that allows the user to add a note to an item in aPage List
, and was created in the same class as the navigation rule.
- The Editor tab of the completed navigation rule appears as follows:
- Save the navigation rule and the section or flow action rule that contains the Grid layout. Run the process that calls the flow action. Test the right-click functionality by right-clicking on a row in the grid.
- Context menus can have multi-level structures. To build a multi-level context menu, edit the navigation rule to define parent/child nodes.
- At runtime, when the flow action run, the context menu displays as shown.