Navigation Menu+

Overview

When to use it

Use this symbol when you need to:

• Give operators the same navigation on every display of a plant area.
• Group many links in submenus, in a bar across the top or in a narrow side column.
• Open a display with the same time range or the same asset as the display the operator is on.
• Keep the menu out of the way until the operator asks for it.
• Keep one menu definition in step across many displays.

Choose Navigation Button+ when a single link is enough.

Before you begin

• Know the displays to link, or save them first so you can find them by name or owner. Operators need access to every display or page you link.
• For a menu shared by several displays, create an AF attribute of data type String with no data reference, and have write permission to it. PI Points are not supported.
• Menu items are built in the configuration pane. If the administrator limited configuration to PI Vision administrators, see Troubleshooting.

Add and set up the symbol

1. Select Navigation Menu+ in the PI Vision symbol gallery and drag it onto the display. It needs no data source.
2. Right-click the symbol and select Configure Navigation Menu....
3. Under Menu Items, select the top item (the home icon) and enter a Title for the menu, for example Plant.
4. Under the tree, select Add link (1). The new link appears in the tree with its title ready to edit (2). Type the title, for example Production report, and press Enter. The warning icon (3) shows until the link has a target.
5. Select Search for Displays ... (1), enter part of the display name, select the search icon (2), and select the display (3). The link field shows the display address.
6. Repeat steps 4 and 5 for each further link. A new link goes after the link you have selected.
7. Under Settings, open Layout and select Horizontal (1) for Orientation and Static (2) for Mode. Close the pane.

The bar shows the menu title and the three links. Select a link to open its display.

A new symbol starts as a vertical bar that is collapsed to a button. Step 7 is what makes it a bar that stays open.

Common tasks

Group links in submenus

Use this when the menu has more links than fit in a row.

1. Right-click the symbol and select Configure Navigation Menu....
2. Under Menu Items, select the top item and select Add menu (1) under the tree. Type the menu title, for example Production, and press Enter.
3. Select + (2) on the menu row to add a link inside the menu. Type its title, press Enter, and link it as in the quick start. Repeat for each link of the menu.
4. Select the top item again and repeat steps 2 and 3 for the next menu. A menu can hold further menus.
5. Under Settings > Layout, select Dropdown for Items.

The badges after a link show what it opens: a display, a web page, an asset context, a new tab.

Menus show a chevron. Hover over a menu, or select it, to open its links in a panel over the display. The panel closes about a second after the pointer leaves.

A menu can have a link of its own in Dropdown mode. Selecting its title then opens the link, and selecting its chevron opens the submenu.

Reorder and move items

Use this when an item is in the wrong place.

1. Right-click the symbol and select Configure Navigation Menu....
2. Under Menu Items, drag an item onto another row. Drop it on the top or bottom edge of a row to place it before or after that row, or on the middle of a menu to move it into the menu.
3. Or select the item and press Ctrl+Up or Ctrl+Down to move it within its menu, Tab to move it into the menu above, or Shift+Tab to move it out of its menu.
4. To add an item at an exact place or change its type, select ... (1) on its row. Select a type next to Add above, Add below or Add inside (2), or next to Convert to (3).

The menu on the display follows each edit at once. Deleting an item that holds items asks for confirmation first. Press Ctrl+Z to undo an edit.

Open a display with the same time range or asset

Use this when the target display should show the same period or the same equipment as the display with the menu. A new link already has Open in New Tab and Set start and end time selected, with Display time range chosen.

1. Right-click the symbol and select Configure Navigation Menu....
2. Under Menu Items, select the link.
3. Under Link Parameters, keep Set start and end time (1) selected. Display time range passes the range of the display time bar. To pass a fixed range, select Custom time range (2) and enter Start and End (3), for example T-1d and T for yesterday.

1. Select Set asset context (1) and choose Use current asset (2). Choose Use current asset as root to pass the asset as the root of the asset tree instead.
2. Choose Display Asset for the assets on the display, or Custom Asset (3) for one fixed element. For Custom Asset, enter the element path (4) or drag an element onto the field.

When the operator selects the link, the symbol adds the parameters to the address of the target display. With the display range set to the last 8 hours, the address of a link ends in ?startTime=*-8h&endTime=*. A custom asset adds asset= followed by the encoded element path, and the root option adds rootPath= instead. Clear Open in New Tab to replace the current display instead of opening a tab.

Collapse the menu to a button

Use this when the menu would take space that the display needs.

1. Right-click the symbol and select Configure Navigation Menu....
2. Under Settings > Layout, select Expandable (1) for Mode.
3. Select Click or Hover (2) for Action.
4. To change the button icon, select Search for icons ... under Expand Icon, enter a name, and select an icon (3).

The symbol shows only the button until the operator opens it.

With Click, the button opens the bar and closes it again. With Hover, the bar opens when the pointer reaches the button and closes when the pointer leaves.

Drill down inside a narrow side menu

Use this when the menu sits in a narrow column and a floating panel would cover the display.

1. Right-click the symbol and select Configure Navigation Menu....
2. Under Settings > Layout, select Vertical (1) for Orientation, Inline (2) for Items, and Static (3) for Mode.
3. Under Title, keep Breadcrumb on.

Menus show an arrow. Selecting a menu replaces the list with its links. With Breadcrumb on, a row for each parent menu appears above the links, and selecting a row returns to that level. With Breadcrumb off, one back row returns one level.

Match the menu to the display theme and show where the operator is

Use this when the menu should look like the rest of the display and tell operators which page is open.

1. Right-click the symbol and select Configure Navigation Menu....
2. Under Settings > Style, select a Theme (1) and a Container Style (2).

1. Under Title, select Current (1). Keep Breadcrumb (2) on to show the full path.

The bar takes the theme, and the title names the open page, here Production / Production report. The item whose link matches the open display is highlighted. This needs no setting. Link the item with Search for Displays ... so the address matches.

Use the symbol

• Hover over an item to highlight it. In Dropdown mode, hovering over a menu opens it.
• Select a link to open its display, in the same tab or a new tab as configured, with the time range and asset you set. A link keeps kiosk mode and a hidden sidebar, toolbar or time bar when the current display has them. An item without a link does nothing.
• Expandable bars open from the button as set under Action. While you edit the display, hovering does not open the bar, so you can still select the symbol.
• Back returns to the previous page when Show Back is on.
• The toolbar buttons toggle kiosk mode, the sidebar, the display toolbar and the time bar for this display.
• Navigation Menu+ never writes data when operators use it. Only Save in the pane writes, and only to a shared menu.

Configure the symbol

Right-click the symbol and select Configure Navigation Menu.... The pane has the sections Menu Items, Settings (the groups Layout, Style, Items, Title, Logo and Toolbar) and Configuration.

Menu items

The tree shows the top item and its items. Select an item to edit it in the fields below the tree. The top item cannot be moved, converted or deleted.

For a page outside PI Vision, enter its full address and clear Set start and end time, because most pages do not read it.

Layout

Style

The theme choice and the title are used in Match the menu to the display theme and show where the operator is.

Items

Title

Logo

Toolbar

Configuration

To share a menu:

1. Create the String attribute, drag it onto Navigation Menu+, and select the attribute option under Configuration.
2. If the attribute already holds a menu, the symbol asks before it replaces the menu of this display. If the attribute is empty, select Initialize Shared Configuration to write the menu you see to it.
3. Edit the menu. The edits stay in this display until you select Save under Menu Items. Closing the pane without saving discards them.

Important: Save and Initialize Shared Configuration write to the PI System and change the menu of every display that uses the attribute. The pane shows when the menu was last saved and by whom. If another display saved first, the pane reports a conflict and does not overwrite: select Reload and apply your edits again.

Troubleshooting and limitations

Limitation: Wrap Items applies to horizontal bars. A vertical bar scrolls.

Limitation: A shared menu is stored in an AF attribute, not in a PI Point.

Limitation: Save checks for a newer value just before it writes, but PI Web API cannot make that check and the write one step. Two people who save at the same instant can overwrite each other.