Cascading Menu Example

In this example, we will add a cascading menu to the screen template created earlier.

Requirements:

See Also

Menu Objects

Cascading Menus

Creating Cascading Menus

In the Explorer Tree, expand the Template Information object.

Right click on the SCREEN_TEMPLATE template that we created previously.

On the menu, click on Create-> Block

The Adding New Block screen is displayed.

Leave the Create block similar to property set to (none).

In the Block Name property, enter CASCADE_MENU.

In the Block Type property, select Cascading Menu.

In the Mode Selection section, all of the checkboxes to on.  We want this block displayed on all modes of the screen.

Click on the Next button at the bottom right of the screen to continue.

The Option to add more New Blocks screen is displayed next.

Click on the Finish button at the bottom right of the screen as we do not need any other blocks added at this time.

Click on the Save button in the main toolbar to save the new block.

Right click on the SCREEN_TEMPLATE enityt and select Designer Frame from the menu.

Within the Designer Tool, you can move, align, and resize the objects.  For specific instructions on the Designer Tool and its functionality, see the Designer Tool section.

When the Designer Tool is displayed, expand it so that you can see the entire entity.  The Designer Tool displays the default mode of the entity selected.  The pop-list in the upper right of the Designer Tool indicates that we are viewing the lay out of the QBE Mode.  The cascading menu block is to the left of the LEFT_MENU block and below the HEADER_BLOCK.

We want the cascading menu block to be to the left of the Xephr logo.  This will prevent it from messing up any screens that we have already created from this template.  Left click on the block and drag it up until it looks like this:

Now, shrink the block until it looks like this:

Click on the Save button in the main toolbar to save the new block.

Now we need to modify the block properties.  Display the property sheet for the block by double clicking on it in the Explorer Tree.

Set the Mutability property to Not Mutable.  We want this block on all screens with this template.

The Menu Root will be the name of the menu from the Menu Information section for which we want the menus and menu links displayed.  We will select this after we create the menu root.

Leave the Vertical Cascade pop-list set to false.  We want this menu to cascade horizontally.

Leave the Floating Menu pop-list set to false.  We want this menu to stay at the top of the screen when we scroll and not jump down to follow us.

In the Link Style pop-list, select CASCADE_LINK as the link style.

Click on the Save button in the main toolbar to save the changes.

Now we need to create the menu for this cascading block.

Right click on the Menu Information object in the Explorer Tree.

Select Create -> Menu from the menu.

The menu property sheet will be displayed.

In the Menu Name property, enter MM.

In the Display Text property, enter Main Menu.

Click on the Save button in the main toolbar to save the new menu.

This is our top level root.  What ever we create at the first level beneath this menu will display first on the cascading menu.  We are going to create two menus.

Right click on the MM menu.

Select Create -> Menu from the menu.

The menu property sheet will be displayed.

In the Menu Name property, enter MAINT.

In the Display Text property, enter Maintenance.

Right click on the MM menu.

Select Create -> Menu from the menu.

The menu property sheet will be displayed.

In the Menu Name property, enter CUSTOMERS.

In the Display Text property, enter Customers.

Click on the Save button in the main toolbar to save the new menu.

We're going to add one more menu under the CUSTOMERS menu, called REPORTS.

Right click on the CUSTOMERS menu.

Select Create -> Menu from the menu.

The menu property sheet will be displayed.

In the Menu Name property, enter REPORTS.

In the Display Text property, enter Reports.

Click on the Save button in the main toolbar to save the new menu.

Now we are going to add menu links to entities for these menus.

Right click on the REPORTS menu, and select Create->Menulink from the menu.

The Menu Link is created and the property is displayed.

In the Entity property, select OPEN_INVOICES.

In the Display Text property, enter Open Invoices by Customer.

Set the New Window flag to New Window.

Right click on the REPORTS menu, and select Create->Menulink from the menu.

The Menu Link is created and the property is displayed.

In the Entity property, select OPEN_INVOICE_TOTALS.

In the Display Text property, enter Open Invoices with Totals.

Set the New Window flag to New Window.

Click on the Save button in the main toolbar to save the new menu links.

Now, we are going to create menu links from the entities.

Expand the Group Information object.

Expand the SCREENS group.

Right click on the CONTACTS entity and select Add to Menu.

The Create New MenuLink screen is displayed.

Expand the MM menu.

Click on the CUSTOMERS menu to select it.

The Default Mode and Display Text default from the entity settings.

Click on the Ok button.

Click on the Save button in the main toolbar to save the new menu link.

Right click on the CUSTOMER_ACTIVITY entity and select Add to Menu.

The Create New MenuLink screen is displayed.

Expand the MM menu.

Click on the CUSTOMERS menu to select it.

The Default Mode defaults from the entity settings.

In the Display Text field, enter Customer Activity.  There was no entry in the Title property for this entity, so nothing defaulted here..

Click on the Ok button.

Click on the Save button in the main toolbar to save the new menu link.

Right click on the CUSTOMER_REP entity and select Add to Menu.

The Create New MenuLink screen is displayed.

Expand the MM menu.

Click on the MAINT menu to select it.

The Default Mode and Display Text default from the entity settings.

Click on the Ok button.

Click on the Save button in the main toolbar to save the new menu link.

Right click on the ITEM_MASTER_INQUIRY entity and select Add to Menu.

The Create New MenuLink screen is displayed.

Expand the MM menu.

Click on the MAINT menu to select it.

The Default Mode defaults from the entity settings.

In the Display Text field, enter Item Master Inquiry.  There was no entry in the Title property for this entity, so nothing defaulted here..

Click on the Ok button.

Click on the Save button in the main toolbar to save the new menu link.

Return to the SCREEN_TEMPLATE entity in the Template Information section.

Expand the entity, select the CASCADE_MENU block and display the property sheet.

In the Menu Root property, select the MM menu.

Click on the Save button in the main toolbar to save the changes.

To test the new cascading menu block, select the SCREEN_TEMPLATE, and click on the Run button in the main toolbar.

The Preparing to Run pop-up screen is displayed.  Click on the Run button.

The screen will be run in the browser.