Add Navigation

As you create pages in your application, it is necessary to give operators a way to move from one page to another. There are several ways to do this. As you create each page you will be prompted for whether to add that page to the menu. If you choose yes, it will always be added at the top level. You can (and should) organize those menu item links into folders, which you can create from either the Tag Browser or the Page Menu page.

You can also provide in-page navigation using buttons and hotboxes.

Refer to Find and Open Pages Within an Application for an Operator-level overview of the navigational controls. This topic describes how to create those controls.

In-Page Navigation: Page Hotboxes and Page Buttons.

Buttons and hotboxes are used for in-page navigational links. For pages that relate directly to the current display, these tools are considered time-savers for operators as they eliminate the need to search through a menu.

Both tools can be found in the Standard Library folder of the Widgets palette.

1. Open the Idea Studio
2. Open the page in which you want to add a hotbox or button.
   
   If the page is not already open, or available for selection from the tabs at the bottom of the Idea Studio, click File, then Open.
   
   
3. Open the Widgets palette
4. Find, then click to expand the Standard Library folder.
5. Drag a Page Hotbox or a Page Button onto the Idea Studio screen.
6. Adjust the size and location of the hotbox or button.
7. With the hotbox or button selected, click the Properties button in the toolbar.
   
   
8. Select the page to opened in response to a click.
9. Adjust the appearance as desired, using the options in the hotbox.
10. If the page has parameters, select the tags or set the values to use for this instance of the page.
11. Click OK to close the properties dialog and save your work.

Define and organize the menu

Entries (items) in the navigational menu system are stored as Menu Item tags. The contents and order of both the list menu and the tiled menu match the organization of Menu Item tags in the Tag Browser.

Folders within the tiled menu are shown as fly-out sub-menus in the list version.

The menu structure is best edited using the right-click context menu while viewing the Tile Menu, but you can also edit the menu within the Tag Browser. Note that only the tag browser allows you to change the order of entries within a folder.

Reorder the list:

This task can be done only in the Tag Browser. To reorder the items in the menu, select one, then click the Move Up or Move Down buttons. You cannot drag Menu Items. This tool cannot not move pages into sub-folders.

Add a page to the menu using the Page Menu Page:

Pages must exist before you can add to the menu. The act of adding a new menu item does not create a page to match, nor is there a way to create the page while creating the menu item.
When creating a new page you will be prompted to add it to the menu.

1. Navigate to the Page Menu Page by clicking the VTScada logo at the top left of the screen.
2. Navigate to the folder level where you want to add the page and right-click:
   1. To add the page at the current menu level, right-click on a page, on a blank square (if any) or on the narrow divider bar between folders.
   2. To add the page to a sub-folder, right-click on that folder.

3. In the pop-up menu that opens, select New (page at current level) or New Child (page under selected folder).
   The New Menu Item Properties dialog opens.
   
4. Select Page.
   The Select Page dialog opens.
   
5. Click to choose the page to add.
   The New Menu Item Properties dialog opens.
6. Reconfigure the menu item if required.
   You might choose to change the title, or if this is a parameterized page, add parameters.
7. Click OK to finish.

The steps to add a folder, divider or menu item reference are much the same, differing only in the dialog boxes and options along the way.

New Menu Item Properties dialog

Select Page dialog

New Menu Item Properties dialog

Alternate steps: Using the Tag Browser

1. Open the Tag Browser
2. Navigate to the Page Menu section.
3. Optionally, continue navigating to a folder within the Page Menu section.

4. Click New in the Tag Browser, or right-click on Page Menu and select New Child from the menu that opens.
   The New Menu Item Properties dialog opens.

5. Click to select the page option.
   The Select Page dialog opens.
6. Select the page to add and click OK.
   The New Menu Item Properties dialog now shows configuration options for a page.
7. Optionally, change the label, add parameter if this is a parameterized page, or select a different page.
8. Click OK.

 

Related Property: DisablePageSnapShotting

Add a folder to the menu

Folders help you organize your page menu into fly-out or cascading menus, gathering pages into logical groups. When using the tiled menu, you can monitor the pages within the folder on one screen.

Folders can be added at the top level of the Page Menu, and can be added below other folders. They cannot be added below pages.

 

To add a folder, use the same steps as for adding a page menu entry. Configuration differs only as follows:

Select Folder rather than Page from the New Menu Item Properties dialog.

Title

Type a name for the folder

New Thumbnail

Select any image on your VTScada images collection. The default image measures 244 x 183 pixels, therefore an alternate image will display best if it is near to those dimensions.

Folder Contents

Filtered according to where in the menu tree the folder is added. The example shows "Pages", therefore this folder is being added below the Menus\Page Menu branch.

The following options exist only when a folder is being added to the Page Menu branch. They are not available in folders added to any of the palettes.

Hide Recent Pages:

Recently visited pages are displayed in a list across the top of the tiled menu, making it easy for operators to reopen commonly accessed pages. By hiding the list, you make more room available on screen for the pages shown within the folder.

Hide Labels:

The label is the name of the page, ordinarily shown below each page image in the folder view.

Hide Folder Path:

The folder path is the navigation bar, beginning with the home icon.

 

Add a divider to the menu

Dividers are visible only in the list version of the menu. They draw attention to menu items and help to separate one set of items from another. No configuration options are enabled.

Add a Menu Item Reference

A menu item reference is a copy of another menu item. This might be used when you want to link to a parameterized page using a new set of parameters.

The easiest way to add a new menu item reference is to copy and paste an existing item, then edit the properties to change the label (title) and parameters.