ExpandingMenu

Description

Displays a list of menu items. Menus can have sub-menus. Sub-menus are animated into view when expanded.

Discussion

The Expanding Menu control displays a list of menu choices, some of which may have sub-choices (indicated by an icon at the right edge of the item). When a menu item is clicked, it can invoke Javascript code. If the menu has a sub-menu, the sub-menu is shown using animation.

In the image below the ExpandingMenu is shown in its full collapsed state and it a partially expanded state.

ExpandingMenu control - collapsed
ExpandingMenu control - expanded

To add an ExpandingMenu control to your UX component, select the [More...] item in the Data Controls category.

The ExpandingMenu is in the Data Controls section, because, like all Data Controls, it has a {dialog.object}.setValue() and a {dialog.object}.getValue() method. The 'value' of the current selection in the Expanding menu is defined by the 'value' property for each node in the tree (see below).

Then select the ExpandingMenu option from the dialog.

To configure the ExpandingMenu control, click the smart field for the Control properties property.

This will bring up a genie where you can define the choices shown in the ExpandingMenu and also set other properties.

To define the choices and sub-choices shown in the menu click on the smart field for the Menu data genie property.

This will bring up a dialog where you can type in your menu choices, using tab indents to indicate which menu choices are sub-choices.

For example, in the image below, the top level menu choices are:

item1
item2
item3
item4

Item1 and item2 hav3 sub-choices.

When you close the Add Item dialog, the Tree Data Genie is shown (see image below). This dialog allows you to set properties for each menu item in menu tree.

Properties that you can set include:

Item

The HTML text show in the menu.

Icon

An optional icon shown to the left of the menu text.

Value

An optional value that indicates what the value of the ExpandingMenu control will be if this menu item is selected. Also, if the .setValue() method is used to set the value of the ExpandingMenu control, you will need to set the control to a value defined in the Value property.

Security groups

If using the Security Framework- the security groups that can see this menu item. If a menu item is hidden because it is not in the specified security group, the menu item and all of its children are hidden.

Server-side show/hide expression

An expression that is evaluated server-side to determine if the menu item should be shown. Server-side show/hide expressions typically involve session variables. Enter an expression that evaluates to .t. or .f.

Client-side show/hide Javascript

Javascript code that returns a true or false value. If the code returns false, the menu item (and all of its children) are now shown.

See Also