Navigation Button+

Overview

When to use it

Use this symbol when you need to:

• Send operators from an overview to a detail display with one click.
• Open the destination on the same time range or the same asset as the current display.
• Open a procedure, report, or other web page in a new browser tab.
• Change the destination with a process value, such as a different overview for each product.
• Give the action a clear label and an icon that match the rest of the display.

Choose Navigation Menu+ when one link is not enough and the display needs a bar or a side menu of links with submenus. Choose Web View+ when the target page should stay inside the display instead of replacing it.

Before you begin

• Know the destination: a PI Vision display, or the full address of a web page. Operators need access to it.
• For a link that follows a value, have a string PI Point or AF attribute that holds the address.
• A link is valid when it starts with ./#/ (a PI Vision display), http://, or https://. An address that is not valid shows Invalid in the pane, and the button does nothing.

Add and set up the symbol

1. Select Navigation Button+ in the PI Vision symbol gallery and drag it onto the display.
2. Right-click the symbol and select Configure Navigation Button....
3. Under General, select Static for Source (1).
4. Select Search for Displays ... (2), enter part of the display name, and select the search icon (3). Select the display in the list (4).

1. The address field shows the display address, for example ./#/Displays/184/Production-Report-Page-1. Under Style, enter the button label in Text, for example Production report.

1. Close the pane. The symbol shows the label with the default icon. Select it to open the display.

Hover over the button to see its tooltip. Until you enter a Tooltip, it shows the address.

Common tasks

Open the target on the display time range

Use this when the destination should show the period the operator is looking at.

1. Right-click the symbol and select Configure Navigation Button....
2. Under General, select Set start and end time (1).
3. Keep Display time range to pass the range of the display time bar. To pass a fixed range, select Custom time range (2) instead.
4. Enter the Start and End (3), for example T-1d and T for yesterday.

When the operator selects the button, the address of the destination gets the range. With the display set to the last 8 hours, the link ends in ?startTime=*-8h&endTime=*. The custom range above ends in ?startTime=T-1d&endTime=T.

Open the target on an asset

Use this when the destination display is built for assets and should open on a specific one.

1. Right-click the symbol and select Configure Navigation Button....
2. Under General, select Set asset context (1).
3. Select Use current asset (2) to pass the asset itself. Select Use current asset as root to pass it as the root of the asset tree of the destination.
4. Choose Display Asset to pass every asset used on the display, or Custom Asset (3) for one fixed element.
5. For Custom Asset, enter the element path (4), for example \\PISRV01\Test\Demo, or drag an element onto the field.

The link then ends in ?asset= followed by the encoded element path. With the root option it ends in ?rootPath= instead. Time and asset parameters can be combined, and the symbol adds each one to the same address.

Open a web page in a new tab

Use this for a procedure, report, or application outside PI Vision, so operators keep the display open.

1. Right-click the symbol and select Configure Navigation Button....
2. Under General, select Static for Source.
3. Enter the full address (1), for example https://docs.example.com/startup.
4. Select Open in New Tab (2).

The page opens in a separate browser tab. Leave Set start and end time and Set asset context cleared, because most pages outside PI Vision do not read them. Clear Open in New Tab to replace the current display instead.

Choose the destination from a data source value

Use this when the destination changes with a process state, or when one value should drive several buttons.

1. Add the string PI Point or AF attribute that holds the address as the data source of the symbol.
2. Right-click the symbol and select Configure Navigation Button....
3. Under General, select the first option for Source (1), the one that reads the data source.
4. Check the address (2) in the field. It shows the current value, and Invalid appears when the value is not a valid link.
5. To let the address follow the asset selected in the display, turn Follow Display Asset Context on (3) and reload the display.

The button opens whatever address the value holds. When the value changes, the next click goes to the new address. Open in New Tab, the time range, and the asset context work as for a static link.

Style the button to match the display

Use this when the button should look like the other controls on the display and say what it does.

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

1. Enter the label in Text (1). Enter a Tooltip if the address is not the hover text you want.
2. Select Search for icons ... (2), enter part of an icon name such as chart, and select an icon.
3. Select Top (3) for Position to put the icon above the label. Set the icon Size.

The button takes the theme and the frame, with the icon above the label.

Select Custom Theme to set the Background, Foreground, Border Color, and Font yourself.

Use the symbol

• Select the button to open its destination, in the same tab or a new tab as configured. The link carries the time range and asset you set. It also keeps kiosk mode and a hidden sidebar, toolbar, or time bar when the current display has them.
• Hover over the button to see its tooltip, or the address when no tooltip is set. The fill changes while the pointer is over the button.
• Edit mode: while you edit the display, selecting the button does nothing, so you can select and move the symbol.
• Invalid link: the button does nothing. The pane shows Invalid next to the address.
• Navigation Button+ never writes data. It only opens the address.

Configure the symbol

Right-click the symbol and select Configure Navigation Button.... The pane has the groups General and Style.

General

Open in New Tab, Set start and end time, and Set asset context are dimmed while the link is not valid.

Style

The theme, text, and icon settings are used in Style the button to match the display.

Troubleshooting and limitations

Limitation: The button opens one destination. Use Navigation Menu+ for several links.

Limitation: The button is a link, not a view of the target. It cannot show the destination inside the display. Use Web View+ for that.