Overview

The menu widget is used to create navigation or context menus. Menu options are populated using the 'choices' and 'choice values' properties, and the user's selection is received in the application using the 'menu response' property. 

  

The menu widget is a control that is placed within an application screen and the user's selection is processed by the application itself. The menu widget is not, by itself, a device for calling other programs directly. For a menu system that is designed to call programs when the user makes a selection, see Atrium.

Field Binding Dialog (Rich UI Only)

Please visit the Field Binding page.

Menu Options

The menu options are specified using the 'choices' and 'choice values' properties. 'choices' specifies the option display text, and 'choice values' specifies the option return value. To specify multiple options, both properties accept a comma-separated list. To create sub-menus, items can be prefixed with a dash ('-') or multiple dashes to indent the items. For example, to create a menu as shown in the screenshots above: 

Mouse-over Animation

By default, the mouse-over effect is animated, set the 'animate' property to 'false' to disable this behavior.

Menu Orientation

By default, the menu will display vertically. To display the menu horizontally, set the 'orientation' property to 'horizontal'. 

Menu Response (Rich UI Only)

When the 'menu response' property is bound to a field, clicking on a menu option will submit the screen to the application for processing. The field bound to 'menu response' will be populated with the 'choice values' (if specified) or 'choice' text associated with the menu item. 

onoptionclick Event

To process the user's menu selection using JavaScript, the "onoptionclick" event property can be used. This event fires when the user clicks on a menu option. Variables "text" and "value" are made available to the event handler, these contain the clicked menu option text and value. For example, the following code could be used with "onoptionclick" to process a menu selection in Genie: 

pui.set("I_20_7", value); // Write option value into field at 20,7
pressKey("enter");

Menu option icons

To configure menu option icons, the following properties have to be set:

Use as Grid Context Menu (Rich UI Only)

To use a menu widget as a grid context menu: 

The menu widget will be automatically shown when the user right-clicks on a grid record, and hidden when the user clicks on the screen again. The grid's onrowclick event property can be used in conjunction with the applyProperty() API to set/reset the menu options if the options need to be specific to a grid row.

CSS

Menu styling rules happen in a CSS class named, "pui-menu". You can write CSS in a custom stylesheet and apply it to a menu using the "css class" menu property. See CSS Class for details.

If you specify a class, then your className is added to the class list along with "pui-menu". Horizontally oriented menus have an additional class, "pui-horizontal". You can override the default rules by adding a custom stylesheet to /profoundui/userdata/custom/css/ (where profoundui is your Profound UI installation name). Specify rules for whichever of these selectors you'd like to change:

div.pui-menu {}
div.pui-menu.pui-horizontal {}
div.pui-menu table {}
div.pui-menu table td {}

Hover Class Name

If the hover background color property is not set, then hovering over a menu option causes its class name to become "menu-hover". That allows you to define your own custom CSS for an option when it is hovered over.