How to create a dynamic menu for WEB applications

Official Content
This documentation is valid for:

The way to create a dynamic menu in your web application is through the use of the Dynamic Items of the Action Group. An Action Group can be dynamic, which means that some or all of its items are loaded using an SDT structure.

See Action Group to know the ways to insert an action group into the form.

After creating the action group, dynamic items are added by dragging the "Dynamic Items" option of the GeneXus toolbox (grouped under Extended Controls) to the toolbar.

Drag Dynamic items to the toolbar
Note: Click on the gray area - where the action group is defined - to be able to see the Dynamic Items extended control.

The Action group dynamic items control has the Items property, where you can specify the Structured Data Type variable which will load the items of the menu (&ActionGroupItemCollection in the example).

Dynamic items group properties

The &ActionGroupItemCollection variable is a collection of ActionGroupItem SDT, which is automatically defined in the KB when you use an Action group dynamic items control. 

i2017_02_09_20_51_052_png

Example

In the following example, we have a What is a Master Page where we've defined an action group called "MainMenu". It includes an Action group dynamic items control, and its Control Type property is set to Menu (so it will behave like a Web Navigation Bar).

i2017_02_09_20_35_131_png

In the Start Event of the Master Page, we call a subroutine where we load the &ActionGroupItemCollection variable calling a Data Provider.

Sub 'Add Action Group Items'
  &ActionGroupItemCollection = LoadActions()
EndSub

The Data Provider is as follows:

ActionGroupItem
{
    Caption = "Author"
    Link = wwauthor.Link()
    Class = ThemeClass:MenuLiterature1
    TooltipText = "Author"
}
ActionGroupItem
{
    Caption = "Editorial Topic"
    Link = wweditorialTopic.Link()
    Class = ThemeClass:MenuLiterature1
    TooltipText = "Editorial Topic"
}
ActionGroupItem
{
    Caption = "Literary Work"
    Link = wwliteraryWork.Link()
    Class = ThemeClass:MenuLiterature1
    TooltipText = "Literary Work"
}

At runtime:

Menu large screen capture

Menu small screen capture

Download sample from here.

Note that:

  1. Using the Toolbar control type, you can nest as many items as you want, using the children node of the SDT. In the case of the Menu control type, only two levels of nesting is supported.

  2. The Link property must be empty when the toolbar item has children items.

  3. You can assign a Theme Class to each link item. Remember that the class associated with the action group control has precedence over the class assigned to the link item.

Limitations

The only items supported are text items. Buttons, images and edit boxes are not supported.