Multi Asset Data Table

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.0	June 2025	RS	EW_MultiAssetDataTable_v9.0	-Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle
8.0	August 2023	MM	EW_MultiAssetDataTable_v8.0	Compatibility PIVision 2023
7.0	August 2022	AM	EW_MultiAssetDataTable_v7.0	Compatibility PIVision 2022
6.0	October 2021	MDC	EW_MultiAssetDataTable_v6.0	Compatibility PIVision 2021
4.3	August 2021	MDC	EW_MultiAssetDataTable_v4.3	Bug fix
4.2	December 2020	MDC	EW_MultiAssetDataTable_v4.2	Bug fix
4.1	November 2020	MDC	EW_MultiAssetDataTable_v4.1	Bug fix
4.0	October 2020	OS	EW_MultiAssetDataTable_v4.0	Compatibility PIVision 2020
1.7	September 2020	MDC	EW_MultiAssetDataTable_v1.7	Bug fix
1.6.1	August 2020	MDV	EW_MultiAssetDataTable_v1.6.1	Revision of the manual
1.6	June 2020	MDC	EW_MultiAssetDataTable_v1.6	Bug fix
1.5	April 2020	MDC	EW_MultiAssetDataTable_v1.5	Bug fix
1.4	March 2020	MDC	EW_MultiAssetDataTable_v1.4	Url management and bug fix
1.3	March 2020	MDC	EW_MultiAssetDataTable_v1.3	Export excel and bug fix
1.2	February 2020	MDC	EW_MultiAssetDataTable_v1.2	Dynamic Search criteria
1.1	February 2020	MDC	EW_MultiAssetDataTable_v1.1	Sort and Filter settings
1.0	February 2020	MDC	EW_MultiAssetDataTable	First Version

Document References

Document	Description
PI Vision Installation and Administration Guide	PI Vision™ user manual from AVEVA

Introduction

The Multi Asset Data Table widget allows to compare multiple attributes of different assets in a table.

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 Multi Asset Data Table in the display area.

When the mouse is released, the space of a table is set. Column by column, all the attributes and sub-attributes belonging to the dragged elements are displayed (Figures 2 and 3).
By clicking on the header of each column, users can modify rows’ order in alphabetical or numerical (depending on the column content). Users can change the width of each column.
Users can see the asset path by hovering the mouse over the asset in the table.

Figure 2 - Group3 Element AF Structure

Figure 3 - Multi Asset Data Table

If there is a string in a cell that begins with "https://", the cell value will be replaced by the symbol .
By clicking on the symbol, the browser page defined by the url will open.

Figure 4 - Url management

By selecting the context menu with right click, it is possible to access the widget configuration box or to the Dynamic Search Criteria section.

Functionality and use

Table filter methods

Color Filter

Once colors have been assigned to the table rows (Figure 14), by clicking on the symbol it’s possible to filter according to the color row as shown in the figure below.
It is possible to insert multiple colors at the same time as a filter. When activated, the color filter will turn green (color editable in the widget settings in the Active filter section).

Figure 6 - Color filter

Column Filter

By clicking on the symbol , a different filter window will open depending on whether the column content is text or number.

Text filters

To filter the text, user can choose between 7 different options as in Figure 16:

Equal to: text in the cell must be the same as that written in the Filter field (capital or little letters are not considered, it is not case sensitive);
Different from: text in the cell must be different from that written in the Filter field;
Includes: text in the cell must include the one written in the Filter field;
Not includes: text in the cell must not include the one written in the Filter field;
Starts with: text in the cell must start with that written in the Filter field;
End with: text in the cell must end with that written in the Filter field;
Custom: allows to define a custom filter, inserting special characters like * or ? . The symbol * indicates a wildcard character set, while the symbol ? indicates only one.

Once a filter has been selected, user must press the button to confirm it. When a filter is active, its
symbol will turn green (color editable in the widget settings in the Active filter section).
To remove the filter, the user must press the button .

Figure 7 - Text filters

Numeric filters

To filter the text, user can choose between 7 different options as in Figure 17:
Greater or equal to: number in the cell must be greater than or equal to that written in the Filter field;
Lower or equal to: number in the cell must be lower than or equal to that written in the Filter field;
Greater than: number in the cell must be greater than that written in the Filter field;
Lower than: number in the cell must be lower than that written in the Filter field;
Between: number in the cell must be between the two numbers written in the Filter field which in this case will be split into two fields;
Equal to: number in the cell must be equal to that written in the Filter field;
Different from: number in the cell must be different from the one written in the Filter field.

Once a filter has been selected, user must press the button to confirm it. When a filter is
active, its symbol will turn green (color editable in the widget settings in the Active filter
section).
To remove the filter, the user must press the button .

Figure 8 - Numeric filters

Excel export

Clicking on , a .xlsx file will automatically download. In this file there will be the table with only filtered elements, sorted as shown in the display (column colors won’t be exported).
The file name will be composed by a prefix (Export_MADT_) and followed by the export timestamp (e.g. 20200313141053) in the following format “YYYYMMDDHHMMSS”.

Customization and configuration

Widget configuration allows to change its appearance in terms of attributes to be displayed, colors, text size and display language.

Language

The section International allows users to choose the language with which the user visualize labels and configuration parameters.

Figure 9 - Language selection

Configurations

Figure 10 - Configurations

In the Configuration section it is possible to change different parameter:

The server web api;
Adaptive width;
Color attribute;
Vertical/horizontal scrollbar width;
REST Provider;

Server web api

Text input that allows the user to insert the path of the Server Web API.

Figure 11 - Server Web API

Adaptive width

The checkbox will change how the table columns will calculate their own width. If the checkbox is disabled a new field will appear. The Column width will allow the user to decide the column’s width but not less than 130.

Figure 12 - Adaptive width

Figure 13 - Column width

Figure 14 - Adaptive width active

Figure 15 - Adaptive width disable

Color attribute

Allows the user to insert the name of the attribute that contains the colors.

Figure 16 - Color attribute

Figure 17 - Table with color attribute active

Vertical/Horizontal scrollbar width

Allows the user to change the width of the vertical and horizontal scrollbar.

Figure 18 - Vertical/Horizontal scrollbar width

Figure 19 - Table with vertical/horizontal scrollbar

REST Provider

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

Figure 20 - REST Provider selection

Attributes to show

This section displays all the attributes and sub-attributes of the elements. By putting or removing the check, it’s possible to decide which attributes to display in the table.
Through the arrows it’s possible to establish the column order of the table.
By putting or removing the Sort check it’s possible to decide if the user can sort this column or not.
By putting or removing the Filter check it’s possible to decide if the user can filter this column or not.

Figure 21 - Attributes to show

Appearance settings

User can customize the widget title, text size and colors for:

Title;
Background;
Table header text;
Table header background;
Table text;
Table background;
Active filter;
Filter menu background;
Input.

as it can be seen in the figure below.

Figure 22 - Appearance settings

Colors selection

To configure the different colors simply select the color drop-down menu and choose the gradation on the first horizontal scrollbar, the possible point of the color palette and indicate with the second horizontal scrollbar the eventual transparency level. To confirm, select the button.

Figure 23 - Choice of color

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 24 - 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-EWMultiAssetDataTable.js;
sym-EWMultiAssetDataTable-config.html;
sym-EWMultiAssetDataTable-template.html;

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

Images that contains the control icon:
- EWMultiAssetDataTable.png
Libs with the libraries used:
- EWClasses.js
- moment.js
- xlsx.min.js

Then, open the web.config file inside the PIVision folder (..\PIPC\PIVision) and check that debug is set to "true" (Figure 25).
Save the file and restart the IIS.

Figure 25 - web.config

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.

- PI Vision Widget -​

Revision History​

Document References​

Introduction​

Definitions, Acronyms And Abbreviations​

Operating Principles And Use​

Figure 1 - PI Vision Menu​

Figure 2 - Group3 Element AF Structure​

Figure 3 - Multi Asset Data Table​

Figure 4 - Url management​

Figure 5 - Contextual Menu​

Functionality and use​

Table filter methods​

Color Filter​

Figure 6 - Color filter​

Column Filter​

Figure 7 - Text filters​

Figure 8 - Numeric filters​

Excel export​

Customization and configuration​

Language​

Figure 9 - Language selection​

Configurations​

Figure 10 - Configurations​

Server web api​

Figure 11 - Server Web API​

Adaptive width​

Figure 12 - Adaptive width​

Figure 13 - Column width​

Figure 14 - Adaptive width active​

Figure 15 - Adaptive width disable​

Color attribute​

Figure 16 - Color attribute​

Figure 17 - Table with color attribute active​

Vertical/Horizontal scrollbar width​

Figure 18 - Vertical/Horizontal scrollbar width​

Figure 19 - Table with vertical/horizontal scrollbar​

REST Provider​

Figure 20 - REST Provider selection​

Attributes to show​

Figure 21 - Attributes to show​

Appearance settings​

Figure 22 - Appearance settings​

Colors selection​

Figure 23 - Choice of color​

Contacts​

Figure 24 - Contacts​

Installation​

Requirements​

Table 1 - Installation prerequisites​

​

Installation procedure​

Figure 25 - web.config​

Notes And References​

- PI Vision Widget -