Work with Menu Tree Menus

The Menu Tree element, and its child elements, are used to define a menu, in a horizontal or vertical orientation, with optional sub-menu branches and menu items.

 

About the Menu Tree

Menus are typically used to launch actions such as running another report or linking to another web page. The Menu Tree element and its child elements, introduced in v12.1, allow you to easily to create a multi-level menu.  

The Menu Tree can be configured for three different modes; the default mode is HorizontalPopup, shown above. The example uses two menu branches (MainOpt 1, MainOpt 2), each of which has three menu leaves (SubOpt 1, SubOpt 2, SubOpt 3). You can also nest branches and leaves to get additional suboptions, as shown at the far right.  

The Vertical mode, shown above, lists the branches and leaves in a vertical hierarchy that can be expanded and collapsed.  

And the VerticalPopup mode uses a vertical list of branches and pop-up panels to display the leaves. The arrangement of menus on the page is dependent on their containers (Divisions, Rows, etc.). The styling of the examples shown is controlled by a theme. You can supply additional styling to change their appearance.
 

Other Menu Variants

Logi Info also includes other menu elements you may wish to investigate; they may be more useful depending on the nature of your application. Pop-up menus (see Work with Popup Menus) display a panel with menu options and the ReportCenter Menu is useful for displaying a menu based on the available reports.

Back to top

 

The Menu Tree Element

The Menu Tree element is the container for the entire menu. It has the following attributes:
 

AttributeDescription
ID (Required) Specifies a unique element ID.
Branch Collapsed Image When a vertical menu mode is used, specifies an image that appears beside a menu branch that's collapsed. If located in _SupportFiles, then only the file name is required. Otherwise provide a complete file path. If left blank, a default image is used.
Branch Expanded Image When a vertical menu mode is used, specifies an image that appears beside a menu branch that's expanded. If located in _SupportFiles, then only the file name is required. Otherwise provide a complete file path. If left blank, a default image is used.
Class Specifies one or more CSS classes to be used by the element. When set, this class will also be used by all child elements that don't have their own class. May be used with or without a theme.
Disable Remember
Expansion
Specifies whether the expanded/collapsed state of the menu branches is stored in the browser's Local Storage and re-applied at the next viewing. The default value is False, so specify True to disable this feature.
Horizontal Menu SpacingSpecifies the number of spaces displayed between menu branches when the Menu Mode is HorizontalPopup. The default is 5 spaces.
Level Indent Specifies the amount of indentation, in pixels, used to offset successive menu leaf levels in a hierarchy when using a vertical menu mode. The default value is 10 pixels.
Menu ModeSpecifies the type of menu to be displayed: HorizontalPopup, Vertical, or VerticalPopup. See the About section for a visual example of each mode.
Security Right ID When using Logi Security, specifies one or more Security Right IDs, separated by commas. Users with these Security Right IDs will be able to see the menu, users without them will not.

Back to top

 

The Menu Branch and Leaf Elements

The menu "options" are created using Menu Branch and Menu Leaf elements. A branch is an option that will have sub-options (leaves), while a leaf is an option that has no sub-options. A menu can have any number of branches and leaves, and many levels of nesting. These two elements have the same attributes:
 

AttributeDescription
Caption (Required) Specifies the visible text of the menu option.
Class Specifies one or more CSS classes to be used by the element. When set, this class will also be used by all child elements that don't have their own class. May be used with or without a theme.
Condition Specifies an expression that evaluates to a value of True or False. If True, then the option is displayed, otherwise it's removed. Expressions should be in JavaScript or intrinsic function syntax. Typically, expressions compare values using a token, such as @Data.value~ < 0. Enclose both sides of the expression in quotes when working with strings: "@Data.myColumn~" == "SomeValue".
Expanded (Menu Branch only) Specifies whether a branch is expanded when the menu is initially displayed. The default value is False.
ID Specifies a unique element ID.
Security Right ID When using Logi Security, specifies one or more Security Right IDs, separated by commas. Users with these Security Right IDs will be able to see the option, users without them will not.
Tooltip Specifies the text that will appear when the user hovers the cursor over the menu option.

Back to top

 

Creating a Menu

Once you've decided which menu mode your page design will use, it's easy to create the menu:  

As shown in the image above, simply add a Menu Tree element and whatever combination of Menu Branch and Menu Leaf elements are necessary. The example on the left is simple, with only one option (branch) with a sub-option. The example on the right nests a branch beneath another branch.  

As shown above, Action, Event Handler, and other elements typically found beneath links are used to control what happens when a menu option is clicked. The Menu Leaf element is the parent of these link-related elements.

Back to top

 

Customizing Menu Appearance

An easy way to customize the appearance of Menu Tree menus is by customizing the theme used with the report or application, using the Theme Editor. Menu border, background, and item colors can be set in the Colors category, Menus section of a custom theme. You can also apply styling using CSS classes directly to the Menu Tree, Menu Branch, and Menu Leaf elements. For example, to make the menu item fonts larger, select a class like ThemeTextLarger to an element's Class attribute. If you're using your own style sheet, assign a class from it that specifies a larger font size to the attribute. You can also use Conditional Class elements beneath any of the Menu Tree Menu elements in order to apply classes dynamically. For more information about Conditional Class elements, see Cascading Style Sheets. Here's an example of how to use CSS to change the appearance of the Menu Tree pop-up panel:  

Suppose you want the sub-options for your horizontal main menu items to look similar to those on DevNet. The pop-up panels associated with them should have these qualities: they have no border, they appear just below the header, and they're a little transparent, as shown in the example above. To achieve that, you'll need to override an existing theme class by adding it to your own style sheet:

    .rdPopupMenu { border: 0px; opacity: 0.8; top: 39px !important; }

You'll need to adjust the "top" attribute to align it correctly with the bottom of your header. Note that this change may affect all pop-up panels in your application.
 

Adding a "Separator" Menu Item

When using vertical menus, sometimes it's desirable to provide some kind of visual separator between menu items:
 

In the example shown above, a "separator" item provides visual separation between one category of menu items and another. This is easily created by adding a Menu Leaf element that has no action associated with it (so it's not a link) and has a Caption that provides the desired visual. In the example above, several of the Unicode characters "Horizontal Bar" (U+2015) were used.

Back to top