Skip to main content

Navigation Menu Widget

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.2June 2025RSEW_NavigationMenu_v9.2_enAdded select REST provider
9.1May 2025RSEW_NavigationMenu_v9.1_enAdded feature Get Support
9.0February 2024IDEW_NavigationMenu_v9.0_enCompatibility PI Vision 2024 and introduced new widget style
8.0August 2023AMEW_NavigationMenu_v8.0_enCompatibility PI Vision 2023
7.2February 2022MDCEW_NavigationMenu_v7.2_enAsset Management
7.1October 2022MDCEW_NavigationMenu_v7.1_enBugFix
7.0August 2022AMEW_NavigationMenu_v7.0_enCompatibility PIVision 2022
6.1April 2022MDCEW_NavigationMenu_v6.1_enWebAPI management on a different server
6.0October 2021MDCEW_NavigationMenu_v6.0_enCompatibility PIVision 2021
4.0October 2021MDCEW_NavigationMenu_v4.0_enFirst version

Document References​

DocumentDescription
PI Vision Installation and Administration GuidePI Vision™ user manual from AVEVA

Introduction​

Navigation Menu widget allows you to create a simple button or a button that shows a drop-down list when it is clicked on.

If needed, the widget can take the items of the list directly from PI System Explorer.

Figure 1 - Drop-down list button widget example​

The PI Vision of AVEVA is available from 2017 and allows viewing real-time data from PI Data Archive and data organized in assets from the AVEVA Asset Framework (PI-AF). In order to achieve PI Vision displays, simply access https://webServer/PIVision (indicating the correct name of the webserver machine).

The most recent versions of most HTML5 compatible browsers are supported on computers, tablets and phones running Android and iOS.

In PI Vision the configuration of the elements is quite intuitive and is characterized by a simple drang-and-drop of the control into the display.

Definitions, Acronyms And Abbreviations​

Acronyms and definitions that are used in the current manual are listed below.

TermDefinition

Operating Principles And Use​

To insert the widget in a display it is necessary to select firstly the icon relative to the control, then from the asset menu, drag the attribute on the display.

Figure 2 - PI Vision Menu​

Configuration​

Once the mouse button is released the widget area is set. Then, selecting the contextual menu, it is possible to access the widget configuration box.

Figure 3 - Contextual Menu​

In the widget settings it is possible to set the following parameters:

Figure 4 - Language​

Figure 5 - Widget Settings​
  • Server WebAPI: it is possible to specify the WebAPI server if it is different from PIVision server.
  • Header name from attribute: if activated, it allows to take the button name from an AF attribute
  • Header: name of the button (if “Header name from attribute” is disabled)
  • Header Url: display to be opened by clicking on the button header. Users can enter PIVision or external links.
  • Item URL: display to be opened by clicking on one of the items taken directly from the AF (the link can also be retrieved directly from an AF attribute).
  • Item URL from attr: if activated, it allows to take the display link from an AF attribute
  • Open link in: New tab/Same window
  • Put asset in link (header): adds the display asset to the header link
  • Put asset in link (items): adds the display asset to the item link
  • Template to show: it allows to visualize or not some template in the list
  • Child Elem. To show: it allows to visualize or not some child elements of the list
  • Other buttons: it allows to add items to the list with relative display url

REST Provider​

Allows the user to select between default or custom protocol for api requests.

Figure 6 - REST Provider selection​

Customization​

Text sizes​

It’s possible to customize the text sizes

Figure 7 - Text sizes customization​

Widget colors​

It is possible to customize widget colours in terms of:

  • Background;
  • Text;
  • Header;
  • Header background;
  • Elements;
  • Elements background;
  • Highlighted item.

as can be seen in the table below

Figure 8 - Colors customization​

Assets​

List of attributes dragged into the display to create the widget.

If there is more than one, you can delete an asset by clicking on the symbol

Figure 9 - Asset Management​

Contacts​

Get Support button (read Get Support documentation)

Link to e-matica.com (click on the icon)

Link to widget online documentation (click on link)

Figure 10 - Contacts​

Installation​

Requirements​

In order to install the product, minimum requirements are listed in the table below:

SoftwareVersionNote
PI Vision2024 (*)Requirements are linked to the PI Vision correct functioning
Table 1 - Installation prerequisites​

(*)This widget is also compatible with PI Vision 2023, 2022, 2021, 2020 and 2019.

We suggest using Google Chrome for full compatibility with the widget.

Installation procedure​

The installation procedure involves the copy of different folders and file in the predefined PI Vision path.

In particular it is necessary to copy the following files in the folder ..\PIPC\PIVision\Scripts\app\editor\symbols\ext:

  • sym-EWNavigationMenu.js
  • sym-EWNavigationMenu-config.html
  • sym-EWNavigationMenu-template.html

and in the folder ..\PIPC\PIVision\Public the following folders:

  • Images which involves the control icon:
    • EWNavigationMenu.png
  • Libs which involves the used libraries*:*
    • EWClasses.js

Notes And References​

For more information about Vision PI refer to documentation on AVEVA © portal.
For information about the web service to refer to the specific documentation.