Skip to main content

Tree Link

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.3June 2025RSEW_Treelink_v9.3Added select REST provider
9.2May 2025RSEW_Treelink_v9.2Merge Tree Link with Tree Event
9.1May 2025RSEW_Treelink_v9.1Added feature Get Support
9.0March 2025ALEW_Treelink_v9.0Compatibility with PIVision 2024 and new widget style introduced
8.2June 2024NMEW_Treelink_v8.2Added “time zone” configuration to choose a specific UTC
8.1April 2024MDCEW_Treelink_v8.1BugFix; Search Function
8.0August 2023MMEW_Treelink_v8.0Compatibility with PI Vision 2023
7.5May 2023MDCEW_Treelink_v7.5New Initialization without PopUp
7.4May 2023MDCEW_Treelink_v7.4BugFix
7.3April 2023MDCEW_Treelink_v7.3BugFix; Management of elements without templates
7.2April 2023MDCEW_Treelink_v7.2Added "Fixed tree" configuration for connection type "Element"
7.1January 2023MDCEW_Treelink_v7.1Assets Management
7.0August 2022AMEW_Treelink_v7.0Compatibility with PI Vision 2022
2.31August 2020MDVEW_Treelink_v2.31Revision of documentation; BugFix
2.30June 2020MDCEW_Treelink_v2.30Start hidden Tree function
2.29April 2020MDCEW_Treelink_v2.29BugFix
2.28March 2020MDCEW_Treelink_v2.28BugFix
2.27March 2020MDCEW_Treelink_v2.27Ghost mode with scroll bar and definable height; Highlighted element with URL attribute
2.26February 2020MDCEW_Treelink_v2.26BugFix
2.25February 2020MDCEW_Treelink_v2.25Improved support for special characters
2.24January 2020PCEW_Treelink_v2.24KeepTree function
2.23November 2019PCEW_Treelink_v2.23BugFix
2.22October 2019PCEW_Treelink_v2.22Expiry date support; Performance increase
2.21October 2019PCEW_Treelink_v2.21Performance increase; No link open if there is no attribute in the selected element
2.20September 2019PCEW_Treelink_v2.20BugFix
2.19July 2019PCEW_Treelink_v2.19BugFix
2.18July 2019PCEW_Treelink_v2.18Ghost mode added
2.17June 2019PCEW_Treelink_v2.17Possibility to manage root through AF table; Managing of “HideToolbar”, “HideTimebar” and “mode=kiosk” parameters; Icons with the same text and arrows size; Configuration parameter for the arrows color; Element research functionality; Performances increased; Horizontal and vertical scrolling bars added.
2.5April 2019GIEW_Treelink_v2.5Show Description functionality
2.4March 2019RREW_Treelink_v2.4Review
2.0.2February 2018GTEW_Treelink_v2.0.2Asynchronous loading functionality
2.0.1January 2018PCEW_Treelink_v2.0.1Review
2.0November 2017GTEW_Treelink_v2.0.docWidget configuration restyling; Installation procedure modification
1.0September 2017GTEW_TreeLink_v1.0.docFirst review
Document References​
DocumentDescription
PI Vision Installation and Administration GuidePI Vision™ user manual from AVEVA

Introduction​

The EW Tree Link widget displays the AF hierarchical tree and allows navigation in PI Vision.
Moreover, it enables matching a URL with an element to open the corresponding link.

PI Vision from AVEVA, available since 2017, enables viewing real-time data from the PI Data Archive and data organized in assets from the AVEVA Asset Framework (PI-AF).
Simply access PI Vision at: https://webServer/PIVision (replace webServer with the correct machine name).
The widget is compatible with the most recent versions of HTML5-enabled browsers on computers, tablets, and smartphones running Android and iOS.
Configuration in PI Vision is intuitive, based on a simple drag-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
AFAsset Framework

Operating Principles And Use​

To insert the EW Tree Link, first select the control icon, navigate to the desired asset, and drag it into the display area.

Figure 1: PI Vision Menu​

When the mouse button is released, the widget initializes with a “Database” connection.

Figure 2: Root selection​

By selecting the contextual menu, you can access the widget configuration box.

Figure 3: Contextual Menu​

Functionality and use​

Once the display is added and configured, the tree view becomes visible.
The tree highlights the AF element type using various symbols.

  • The database is indicated by a specific symbol.
  • Other element types are customizable through an AF attribute (parametric attribute).

New functionalities include:

  • Hide/show the tree view using a small left-triangle button.
  • Open the web page corresponding to a configured URL by pressing <CTRL> when the link is selected.

Customization and configuration​

The widget configuration allows you to change the appearance regarding colors, text size, and language.
Some parameters are automatically visible, while others require saving the display and reloading it.

Figure 4: Refresh page reminder​

Language​

In the International section, you can choose the language for labels and configuration parameters.

Figure 5: Language selection​

Since the merge of the Tree Event and Tree Link in one widget the user will be able to change between the two configurations in the configuration panel.

​

​

Figure 6: Selected Widget​

WebAPI​

In the Server Web API section, set the machine name for the web API. If it coincides with the web server, leave it blank.

Figure 7: Web API server option​

Root Table​

An AF Table can be set to manage the tree root dynamically based on the user.

Figure 8: Web server selection​

Below is an example of an AF table:

Figure 9: AF Table for dynamic Root management​

Connection Types​

The tree view root (set during element insertion) can be modified by choosing between "Database" and "Element". Additional configurations include:

  • Keeping the tree view hidden when opening a display via the tree.
  • Synchronous or asynchronous node loading.
  • Asset loading from URL: if a URL contains an element asset, the widget starts the tree from that asset.
  • Option to expand all nodes during loading (not recommended for large trees).
  • KeepTree mode: Retains the tree structure after a page is loaded.

For connection type "Element", the Fixed tree option allows defining a fixed path from which the tree view must start. If KeepTree mode is enabled, the Fixed tree field is ignored.

Figure 10: Root selection​

REST Provider​

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

Figure 20 - REST Provider selection​

Settings​

Settings allow you to:

  • Toggle the display of node descriptions.
  • Adjust the size of the arrows used to expand nodes.
  • Toggle the search option.
  • Enable or disable Ghost mode (which displays the tree beyond the widget size without a scrollbar).
    When using a scrollbar, select the "With scroll bar" option and define the maximum tree view height.
  • Set the dimensions for horizontal and vertical scroll bars.

Figure 11: Other settings​

Icon Attribute​

Set the name of the attribute that holds the icon image for each element (except the database).
This attribute (of string type) should be configured in AF with the corresponding file name, which is located in the installation folder (e.g., ..\PIPC\PIVision\Public\Images\TreeIcon).

Figure 12: Icon attribute​

Figure 13: Element icon​

Each element or template can have a different icon.

Figure 14: Tree icon visualization​

URL Attribute Name​

Configure the attribute name that contains the URL link for a specific tree branch.
This attribute may hold an HTTP address or a reference to another PI Vision display.
For example, if a PI Vision display URL is http://webserver/PIVision/#/Displays/40005/DisplayGruppo, only the identifying portion of the address is needed.

Figure 15: URL attribute​

An example configuration in AF for the URL attribute is shown below:

Figure 16: URL attribute definition​

DB URL​

Specify the URL to which the database connects.

Figure 17: AF Database URL​

Decide whether the selected link opens in the same tab or in a new browser page.

Template Jump Start/End​

This option hides nodes between the start element template (Template Jump start) and the end element template (Template Jump end).

Figure 19: Template Jump start/end​

Choose between:

  • Asset: The selected node becomes the display asset (only widgets created with that element update).
  • RootPath: The selected node is set as RootPath (all widgets using that element or its descendants update).

Filters​

In the "Filter" and "Template to show" sections, you can choose to load only selected templates or the entire tree.
(Be aware that some information might not be visible depending on the tree configuration.)

Figure 21: Tree loading filters​

Template Filters​

Figure 22: Template filters​

Set Time Zone​

The "Imposta time zone" section lets you select a specific UTC. When enabled, all UTC values (ranging from -12 to +12 by default) are displayed.
You can deselect any values that should not be considered. Once flagged, a symbol appears next to the PI Vision title. Clicking this symbol generates a drop-down menu for selecting the UTC.

Figure 23: Set time zone​

Display of the Icon and List of UTCs​

Only the UTC values set in configuration will be selectable in the drop-down menu.
If there are too many UTCs to display at once, a scrollbar will appear.

Figure 24: Display of the icon in the PI Vision​

Figure 25: List of UTCs​

Widget Configuration Tree Event​

Selected Widget Tree Event​

Inside the configuration panel the user will be able to select the widget that will load the data on start.
It can choose between TreeLink and TreeEvent

​

Figure 26: Selected Widget​

WebAPI​

In the Configuration section, the user has to set the name of the machine involving web API. If this machine coincides with the web server, this parameter can be left blank.

Figure 27 - Web API server option​

Connection type​

It is possible to modify the tree view root, set during the insertion of the element into the display, and choose Database or Element.

Figure 28 - Root selection​

​

Template Name​

It is useful to manage event frames; this parameter refers to the name of the element template, to which event frames are associated. The Element template name is located in the Configuration section.

Figure 29 - Template​

Assets​

Attributes dragged into the display create the widget.
If multiple assets are present, you can delete an asset by clicking on its associated symbol.

Figure 30: Assets section​

Appearance Settings​

In the Appearance Settings, you can modify the appearance of the widget.

Figure 31: Appearance Settings​

To configure the color:

  • Select the color drop-down menu.
  • Choose a gradation on the first horizontal scrollbar.
  • Pick a potential point on the color palette.
  • Adjust the transparency with the second horizontal scrollbar.
  • Confirm with the button provided.

Figure 32: Color choice​

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 33: Contacts​

Installation​

Follow the instructions below for installation requirements and procedures.

Prerequisites​

The following table shows the minimum requirements for installing this product:

SoftwareVersionNote
PI Vision2024(*)Requirements are related to the correct functioning of the PI Vision
(*) This widget is also compatible with PI Vision 2023, 2022, 2021, 2020 and 2019.
Table 1 - Installation prerequisites​

It is recommended to use Google Chrome for full compatibility with the widget.

Installation procedure​

The installation involves copying several folders and files to the predefined PI Vision path.

  • Copy the following files into the folder:
    ..\PIPC\PIVision\Scripts\app\editor\symbols\ext

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

  • In ..\PIPC\PIVision\Public\Images\TreeIcon, place the icons used for elements within the tree.

  • In the folder ..\PIPC\PIVision\Public, copy the following folders:

    • Images: Contains the control icon TQSTreeLink.png
    • Libs: Contains the libraries (e.g., EWClasses.js)

Additional notes for the use of the product​

For the widget to function correctly:

  • Disable Cross-Site Request Forgery (CSRF).
  • Explicitly enable PUT and POST (and BATCH) methods in the PI Vision configuration database.

Steps:

  • Connect to the Connection database via PI System Explorer.
  • Expand the element Osisoft.
  • Expand PI WEB API.
  • Expand PI Vision-srv.
  • Select the element System Configuration.
  • Set the attribute CorsMethods to include PUT, POST, and BATCH methods (separated by commas).
  • Set the attribute EnableCSRF to TRUE.

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.