Tree Event
- PI Vision Widget -
Revision History
| Revision No. | Date | Author | Document ID | Description of changes |
|---|---|---|---|---|
| 9.3 | June 2025 | RS | EW_TreeEvent_v9.3.en.doc | Added select REST provider |
| 9.2 | May 2025 | RS | EW_TreeEvent_v9.2.en.doc | Merge Tree Link with Tree Event |
| 9.1 | May 2025 | RS | EW_TreeEvent_v9.1_en.doc | Added feature Get Support |
| 9.0 | February 2025 | ID | EW_TreeEvent_v9.0_en.doc | Compatibility PIVision 2024 and introduced new widget style |
| 8.2 | January 2024 | MDC | EW_TreeEvent_v8.2_en.doc | BugFix |
| 8.1 | December 2023 | MDC | EW_TreeEvent_v8.1_en.doc | BugFix |
| 8.0 | August 2023 | MM | EW_TreeEvent_v8.0_en.doc | Compatibility PIVision 2023 |
| 7.0 | August 2022 | AM | EW_TreeEvent_v7.0_en.doc | Compatibility PIVision 2022 |
| 6.0 | October 2021 | MDC | EW_TreeEvent_v6.0_en.doc | Compatibility PIVision 2021 |
| 4.0 | October 2020 | OS | EW_TreeEvent_v4.0_en.doc | Compatibility PIVision 2020 |
| 2.5 | August 2020 | MDV | EW_TreeEvent_v2.5_en.doc | Revision of documentation Bug Fixes |
| 2.5 | August 2020 | PC | EW_TreeEvent_v2.5.doc | Bug Fixes |
| 2.4 | Novembre 2019 | PC | EW_TreeEvent_v2.4.doc | Bug Fixes |
| 2.3 | June 2019 | PC | EW_TreeEvent_v2.3.doc | Change of the icon element path; Highlight the selected element; Performances increased; Library use EWAPIService; |
| 2.0* | March 2019 | RR | EW_TreeEvent_v2.0.doc | Review * Review of the modified N. in order to align it with the version number of the Widget |
| 2.1 | January 2018 | PC | EW_TreeEvent_v2.1.doc | Review and research functionality add |
| 2.0 | December 2017 | GT | EW_TreeEvent_v2.0.doc | Widget configuration restyling Installation procedure modification |
| 1.0 | September 2017 | GT | EW_TreeEvent_v1.0.doc | First review |
Document References
| Document | Description |
|---|---|
| PI Vision Installation and Administration Guide | PI Vision™ user manual from AVEVA |
Introduction
The EW Tree Event widget displays in PI Vision the AF hierarchical tree AF and allows to navigate it.
The peculiarity of this widget is that it allows to send to other widgets information and parameters necessary for populating them correctly with data and event frames related to a specific context.
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 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.
| Term | Definition |
|---|
Operating Principles And Use
To insert the widget, select the corresponding icon and navigate to the asset to be displayed and drag all the attributes involved by the Advanced Manual Entry in the display area.
To insert the widget, it is necessary to select firstly the icon relative to the control, navigate the asset of interest, and then drag it into the display area.
Figure 1 - PI Vision Menu
Once the mouse button is released, the widget message asks if the Tree has to aim at a specific element or a database containing it.
Figure 2 - Root selection
Then, selecting the contextual menu with the mouse’s right button, it is possible to access to the widget configuration box.
Figure 3 - Contextual Menu
Once the widget has been configured, its appearance should be similar to the figure below.
Figure 4 - TreeEvent
Functionality and use
The use of the widget is very user-friendly. On the display of the PI Vision an element corresponding to the navigation root is displayed and, from this element, it is possible to extend elements below.
The Tree highlights the AF element type through some symbols. The database is denoted by the symbol 
, while other element typologies are customizable through an AF attribute (parametric attribute, more information in paragraph 3.2). Moreover, selecting an element from the Tree, information about the element and the asset are sent to the display and to the other widgets.
Through the icon 
it is possible to do a search within the Tree, as shown below.
Figure 5 - Research
Selecting one of the listed elements, it will be possible to focus on that Tree branch. For example, selecting the element Ala:
Figure 6 - Selection from the brach
By clicking on the button
it is possible to remove filters and restore the initial context.
Customization and configuration
The widget configuration allows to change the appearance in terms of colours, text size and language visualization.
Language
The section Language allows users to choose the language with which the user visualizes labels and configuration parameters.
Figure 7 - Language selection
Selected Widget
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 8: 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 9 - 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 10 - 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 11 - Template
REST Provider
Allows the user to select between default or custom protocol for api requests.
Figure 20 - REST Provider selection
Text size
It is possible to customize the texts font (title, header, table values) selecting pixels in the combo box in the Appearance Settings section.
Figure 12 - Customization of text size
Widget colors
As it is possible to see in Figure 11, widget colors can be customized in terms of:
- Title;
- Background.
as it is shown in the table below.
Figure 13 - Customization of widget colors
In order to configure the colour, simply select the colour drop-down menu and choose the gradation on the first horizontal scrollbar, the potential point on the colour palette and indicate through the second horizontal scrollbar the level of transparency. Confirm with the button 
Figure 14 - Choice of color
Icon Attribute
As discussed previously, all elements viewable in the tree view, except the database, are associated to a symbol, whose file is indicated in an attribute. In the Configuration section, the name of the attribute, that contains the image to be associated to the element, is set.
Figure 15 - Icon attribute
The attribute (string type) must be configured in AF by using PI System Explorer with the name of the corresponding file, that is located in the installation folder, as below:
..\ PIPC\PIVision\Public\Images\TreeIcon.
Figure 16 - Tree view icon for a certain element
Every element / template can be associated to a different icon, as it is shown in the Figure 16.
Figure 17 - Tree icons visualization
Filters
In Template to show section it is possible to choose whether load only selected templates or the entire tree.
Figure 18 - Loading filters
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 19 - Contacts
Installation
Following are the installation requirements and procedure.
Requirements
In order to install the product, minimum requirements are listed in the table below:
| Software | Version | Note |
|---|---|---|
| PI Vision | 2024 (*) | 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 files in the predefined PI Vision path.
In particular it is necessary to copy the following filed in the folder ..\PIPC\PIVision\Scripts\app\editor\symbols\ext:
- sym-TQSTreeEvent.js;
- sym-TQSTreeEvent-config.html;
- sym-TQSTreeEvent-template.html;
In ..\ PIPC\PIVision\Public\Images\TreeIcon there are icons used for elements within the tree.
In the folder ..\PIPC\PIVision\Public the following folders:
-
Images which involves the control icon:
- TQSTreeEvent.png;
-
Libs which involves the three libraries:
- EWClasses.js;
Additional notes
For the proper functioning of the widget, it should disable the Cross-Site Request Forgery (CSRF) and explicitly enable PUT e POST methods in the PI Vision configuration database:
- Connect to the Connection database through the PI System Explorer;
- Expand the element Osisoft;
- Expand the element PI WEB API;
- Expand the element PI Vision-srv;
- Select the element System Configuration;
- Select the attribute CorsMethods and add methods PUT, POST and BATCH methods separated by commas;
- Select the attribute EnableCSRF and set the value to TRUE.
Figure 20 - Database configuration
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.