AF Data Table

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.2	June 2025	RS	EW_AFDataTable_9.2_en.doc	Added select REST provider
9.1	May 2025	RS	EW_AFDataTable_9.1_en.doc	Added feature Get Support
9.0	March 2025	AL	EW_AFDataTable_9.0_en.doc	Compatibility with PIVision 2024 and new widget style introduced
8.2	November 2023	MDC	EW_AFDataTable_v8.2_en	BugFix
8.1	August 2023	MDC	EW_AFDataTable_v8.1_en	External piwebapi malfunction bugfix
8.0	August 2023	AM	EW_AFDataTable_v8.0_en	Compatibility PI Vision 2023
7.5	May 2023	MDC	EW_AFDataTable_v7.5_en	New filter features
7.4	March 2023	MDC	EW_AFDataTable_v7.4_en	Management of number of decimals to show
7.3	February 2023	MDC	EW_AFDataTable_v7.3_en	BugFix
7.2	January 2023	MDC	EW_AFDataTable_v7.2_en	Asset management in configuration
7.1	December 2022	MDC	EW_AFDataTable_v7.1_en	BugFix
7.0	July 2022	MDC	EW_AFDataTable_v7.0_en	Compatibility PIVision 2022
6.1	March 2022	MDC	EW_AFDataTable_v6.1_en	Filter on the column with DateTime
6.0	October 2021	MDC	EW_AFDataTable_v6.0_en	Compatibility PIVision 2021
4.4	October 2021	MDC	EW_AFDataTable_v4.4_en	Multiple sorting; Save the sort in configuration.
4.3	September 2021	MDC	EW_AFDataTable_v4.3_en	Possibility to use an attribute or tag to build the table.
4.2	March 2021	MDC	EW_AFDataTable_v4.2_en	Possibility to color only the cell.
4.1	March 2021	MDC	EW_AFDataTable_v4.1_en	Row color management and date format customization.
4.0	February 2021	MDC	EW_AFDataTable_v4.0_en	First Version

Document References

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

Introduction

The AF Data Table widget allows you to build a table in PI Vision by defining it through one of the following AF objects:

AF table;
AF attribute;
Tag.

AF Table

Figure 2 - AF Table

AF Attribute/TAG

Figure 4 - AF Attribute/TAG

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).
To achieve PI Vision displays, simply access:
https://webServer/PIVision (indicate the correct webserver machine).

The most recent versions of 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 AF Data Table widget in a PI Vision display, first select the widget icon and then drag any attribute of the database containing the AF table onto the display or the attribute containing the tag to be considered for the construction of the table or the tag itself.

When the mouse is released, open the configuration of the widget by right-clicking and selecting the type of mode to use.

Note:
By clicking on the header of each column, the user can modify the rows’ order in alphabetical or numerical order (depending on the column content).
The user can change the width of each column.
If a cell string begins with "https://", the cell value is replaced by a symbol.
Clicking on the symbol opens the browser page defined by the URL.

Figure 8 - Url management

Configuration and customization

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

Language

The International section allows you to choose the language for labels and configuration parameters.

Figure 9 - Language choice

Table title

The table title can be changed by entering a string in the Title section.

Figure 10 - Table title

“From AF Table” mode

Select Table Name From Attribute:
Use this if the name of the AF table is contained in the attribute dragged onto the display. Otherwise, enter the AF Table name manually in the Table Name field.

Figure 12 - AF Table

“From attribute” or “From TAG” mode

To use this mode, you must use a string tag in which the values to be displayed in the various columns are divided by a separator as shown in the example below:

In the New column name field, enter the names of the columns to be created in the table (these will be shown in the Column names section).
Note: The Time column is added by default and cannot be deleted—only hidden.
In the Column separator field, insert the separator used in the tag.

Settings common to all modes

Figure 14 – Settings common to all modes

Adaptive width:
When selected, the widget assigns an automatic width to the table columns according to the widget size. If not selected, use the Column width field to set each column’s width manually. If the combined width exceeds the widget size, a horizontal scrollbar appears.
Color column:
In the Color column field, enter the column name that contains the color for the row. Using the Color Column function, a symbol appears in the top left corner of the widget for filtering the table. (More details in chapter 3.2 Table filter methods.)
Date column:
Enter the name of the column that contains the dates. Only dates within the display’s time range will be shown.
Scrollbar widths:
Set the widths for vertical and horizontal scrollbars using the respective fields.
Date format:
Choose the display format for dates in the table.
Server WebAPI:
Enter the PIWebAPI server name if it differs from the PI Vision server.
Number of decimals:
Set the number of decimals to show.

REST Provider

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

Figure 15 - REST Provider selection

Attributes to show

Figure 16 - Attributes to show

This section displays all the attributes and sub-attributes of the elements. By checking or unchecking options, you decide which attributes are displayed in the table.
Use the arrows to arrange the columns’ order.
You can enable or disable sorting and filtering per column.

Color conditions

Figure 17 – Color Conditions

In this section you can add color conditions to rows based on cell values. For example, in Figure 18, rows with the value "true" in the "Create Event" column are colored red.
To configure a rule, you must:

Choose a color.
Choose a column.
Choose a condition from the available options.
- The first 6 conditions are for strings; the last 8 are for numbers.
Enter the value or the name of another column for comparison.
Choose whether to color the entire row or only the cell.

To edit an existing rule, click on the corresponding button.

Figure 18 – Available Conditions

If a row satisfies more than one color condition, only the last condition is applied. For instance, in Figure 21, although some rows meet two conditions, they are colored green because green was the last inserted condition.

Assets

This section lists the attributes dragged into the display to create the widget.
If more than one asset is present, you can delete one by clicking on the delete symbol.

Figure 20 - Assets section

Customize widget colors for the following elements:

Title
Title Color
Background
Table header text
Table header background
Table text
Table background
Active filter
Filter menu background
Input

The figure below illustrates the widget colors configuration.

To configure the color, select the color drop-down menu. Then, as shown in Figure 26, choose a color gradation with the first horizontal scrollbar, select a point on the color palette, and indicate the transparency level with the second horizontal scrollbar.
Click the confirmation button to apply.

Table filter methods

Color filter

Once colors are assigned to the table rows (see Figure 16), clicking on the color filter symbol allows you to filter by row color, as shown in Figure 28.
Multiple colors can be added simultaneously as a filter. When active, the color filter turns green (the active color is editable in the widget settings under Active filter).

Figure 22 - Color filter

Column filter

Clicking on the filter symbol opens a filter window that varies based on whether the column content is text or numeric.

Text filters

For text filtering, the following 7 options are available:

Equal to: The cell text must exactly match the text in the filter field (case insensitive).
Different from: The cell text must differ from the filter field text.
Includes: The cell text must include the filter text.
Not includes: The cell text must not include the filter text.
Starts with: The cell text must start with the filter text.
Ends with: The cell text must end with the filter text.
Custom: Define a custom filter using special characters (* as a wildcard, ? for a single character).

After selecting a filter, press the confirm button. When a filter is active, its symbol turns green (color configurable in the Active filter settings).
To remove the filter, click the remove button.

Figure 23 - Text filters

Numeric filters

For numeric filtering, the following 7 options are available:

Greater or equal to: The cell number must be greater than or equal to the filter value.
Lower or equal to: The cell number must be less than or equal to the filter value.
Greater than: The cell number must be greater than the filter value.
Lower than: The cell number must be lower than the filter value.
Between: The cell number must fall between two numbers provided (the filter field splits into two fields).
Equal to: The cell number must equal the filter value.
Different from: The cell number must differ from the filter value.

After selecting a filter, press the confirm button. When active, the filter symbol turns green (color configurable under Active filter).
To remove the filter, click the remove button.

Figure 24 - Numeric filters

Row sorting

Click on a column header to sort the rows in ascending or descending order.

Figure 25 - Row sorting (descending/ascending/multiple)

After sorting, a symbol appears. Clicking it allows you to set multiple sort orders by then clicking additional column headers.
You can save the row sorting by clicking the save button in the widget configuration and then saving the display.
To cancel row sorting, click the cancel button.

Export Excel

Clicking on the export icon downloads an .xlsx file containing the table with only the filtered elements and the current sorting order.

Note: Column colors are not exported.

The file name is composed of the prefix Export_AFTable_ followed by a timestamp in the format “YYYYMMDDHHMMSS” (for example, 20200313141053).

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 26 - 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 copying various folders and files into the predefined PI Vision path.

In particular, copy the following files to:
..\PIPC\PIVision\Scripts\app\editor\symbols\ext

sym-EWAFDataTable.js
sym-EWAFDataTable-config.html
sym-EWAFDataTable-template.html

Then, in the folder:
..\PIPC\PIVision\Public

copy the following folders:

Images (which includes the control icon:
- EWAFDataTable.png)
Libs (which includes the libraries:
- 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 27).
Save the file and restart the IIS.

Figure 27 - web.config

Save the file and restart IIS.

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​

AF Table​

Figure 1 - AF Data Table widget from AF Table​

Figure 2 - AF Table​

AF Attribute/TAG​

Figure 3 - AF Data Table widget from AF Attribute/TAG​

Figure 4 - AF Attribute/TAG​

Definitions, Acronyms And Abbreviations​

Operating Principles And Use​

Figure 5 - PIVision Menu​

Figure 6 - Contextual Menu​

Figure 7 - AF Data Table widget​

Figure 8 - Url management​

Configuration and customization​

Language​

Figure 9 - Language choice​

Table title​

Figure 10 - Table title​

“From AF Table” mode​

Figure 11 - Widget settings in “From AF Table” mode​

Figure 12 - AF Table​

“From attribute” or “From TAG” mode​

Figure 13 - Widget settings in “From Attribute” or “From TAG” mode​

Settings common to all modes​

Figure 14 – Settings common to all modes​

REST Provider​

Figure 15 - REST Provider selection​

Attributes to show​

Figure 16 - Attributes to show​

Color conditions​

Figure 17 – Color Conditions​

Figure 18 – Available Conditions​

Text size​

Figure 19 - Text size section​

Assets​

Figure 20 - Assets section​

Widget colors​

Figure 21 - Widget colors​

Table filter methods​

Color filter​

Figure 22 - Color filter​

Column filter​

Text filters​

Figure 23 - Text filters​

Numeric filters​

Figure 24 - Numeric filters​

Row sorting​

Figure 25 - Row sorting (descending/ascending/multiple)​

Export Excel​

Contacts​

Figure 26 - Contacts​

Installation​

Requirements​

Table 1 - Installation prerequisites​

​

Installation procedure​

Figure 27 - web.config​

Notes And References​

- PI Vision Widget -