Adding Multiple Menus to a Page

In some applications it’s useful to have more than one menu bar in order to add additional navigation or simply to break up an otherwise large menu into several smaller ones. Individual menus can be placed anywhere on the page.

Procedure

To add a second menu to a page:

Step 1: Drag either a new menu or an existing menu from the Toolbox onto your page.

Step 2: (Optional.) Configure the new menu using the Property Sheet. For example, here are several several options for Classic (tabbed) menus:

At the top-most page node, specify the newly created menu file.
For both MenuItem2 and MenuItem2Hilited, set the Button Text and URL properties to the same values.

Group	Property	Setting
	Control name	MenuItem2
[Application Generation]	Button action	Save data on page This indicates to the application that data must be added or updated in the database. Do not change the command name from Update Data, otherwise the updated data will not be saved in the database.
Button Action Wizard	URL	Back Optionally, you can specify the URL of the current page to refresh the browser with the same page.
Appearance	Text	Save
Behavior	CausesValidation	True

Group	Property	Setting
	Control name	MenuItem2Hilited
[Application Generation]	Button action	Save data on page This indicates to the application that data must be added or updated in the database. Do not change the command name from Update Data, otherwise the updated data will not be saved in the database.
Button Action Wizard	URL	Back Optionally, you can specify the URL of the current page to refresh the browser with the same page.
Appearance	Text	Save
Behavior	CausesValidation	True

Step 4: (Optional.) Additionally, you must set the “Visible” property to “False” for MenuItem2Hilited in the Property Sheet. Otherwise, both the MenuItem2 and MenuItem2Hilited tabs will be visible when you run the application.

Group	Property	Value
	Control name	MenuItem2Hilited
Behavior	Visible	False

Step 5: (Optional.) Specify the HighlightSettings setting on each application page to designate the current menu item.

Step 6: Build and run the application.

Example: Place Multiple Menus on a Page

Let’s say you want to create a two-level menu for your application. For example, if you have an application built on the Northwind SQL Server sample application and we want a top-level tabbed menu of People, Products, Orders and Logistics. And we want a second-level menu specific to each top-level menu. For People, we would like to show a vertical menu on the left with two menu items – Employees and Customers. For Products, we want a different vertical menu with two menu items – Products and Categories. For Orders, we do not want a vertical menu. For Logistics, we want another vertical menu with Suppliers and Shippers.

This is very easy to do with Iron Speed Designer.

We assume that you have the top level menu built and configured appropriately and now want to add a second level menu to each of the pages.

Step 1: Open the ShowEmployeesTable.aspx page in the Application Explorer.

Step 2: In Layout Editor, drag a new menu from the Toolbox onto your page.

Step 3: Select the new vertical menu and open the Configure Menu dialog (Right-click, Configure...). Select Menu 1 and click Edit (assuming you added a Classic-style menu). Rename the menu name to “Employees” and select the ShowEmployeesTable.aspx page. Repeat this for Menu 2 and rename the menu to “Customers” and select the ShowCustomersTable.aspx. Delete Menu 3. Press Close.

Step 4: Press Save on this page.

Step 5: In the Property Sheet, select the Menu Item to highlight to be “Employees”.

Step 6: Select the ShowCustomersTable.aspx page from the Application Explorer.

Step 7: In Layout Editor, drag the new menu you just created from the Toolobox to the page.

Step 8: In the Property Sheet, select the Menu Item to highlight to be “Customers”.

Step 9: Press Save on this page. Rebuild and run your application. At this point, you should have the first vertical menu displayed on the Employees and the Customers table pages displayed – and the current menu item highlighted appropriately.

Step 10: Repeat steps 1 through 9 for each new vertical menu you would like to create.

This example illustrates a top-level tabbed menu and a second-level vertical menu. However, this approach will work regardless of whether you want two levels of tabs, or two levels of vertical menu, or a top-level vertical menu and a second level tabbed menu.

This example is also shown in the AcmeOMS sample application.