Operative Procedure

- PI Vision Widget -

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.0	June 2025	RS	EW_OperativeProcedure_v9.0_en.doc	-Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle
8.0	August 2023	MM	EW_OperativeProcedure_v8.0_en.doc	Compatibility PIVision 2023
7.0	August 2022	AM	EW_OperativeProcedure_v7.0_en.doc	Compatibility PIVision 2022
6.0	October 2021	MDC	EW_OperativeProcedure_v6.0_en.doc	Compatibility PIVision 2021
4.0	October 2020	OS	EW_OperativeProcedure_v4.0_en.doc	Compatibility PIVision 2020
1.3.1	August 2020	OS	EW_OperativeProcedure_v1.3.1_en.doc	Revision and manual restyling
1.2	April 2019	GI	EW_OperativeProcedure_v1.2.doc	First review

Document References

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

Introduction

The Operative Procedure widget displays an interactive operating procedure divided into steps and keeps track of the sequence of choices made by the user, reporting at the end of the procedure is successfully terminated.

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 Operative Procedure in the display area.

Figure 1 - PI Vision Menu

Then by selecting the contextual menu you can access the specific configuration of the widget.

Figure 2 - Contextual Menu

Functionality and use

To use the widget, it is necessary an AF database that has the following configuration:

• An AF father element of all the process steps
  • For each child element, or step of the procedure, it is necessary to configure the following attributes:

Name Element	Value	Description
Button_NO	Numeric	Inside the attribute, it is recorded the next stepID in case the answer is no
Button_YES	Numeric	Inside the attribute, it is recorded the next stepID in case the answer is yes
AnswerProcedure	String	Response to the step of the operating procedure
ExtendedDesc	String	Title of the step of the operating procedure
Link Procedure	String	Support link (Manual for the procedure)
SeqID	Numeric	Sequence ID for the procedure

Table 1 - Attributes needed for AF Database configuration

• And the following tags:

Name Tags	Value	Description
Status	Numeric	Registration of the response to the current step, 0 NO; 1 YES; -1 No answer
StepID	Numeric	Registration of the stepID
User	String	user Registration

Table 2 - AF Database Tag Configuration

As shown in figure.

Figure 3 - AF element configuration

Once the configuration is performed (see next paragraph) the widget looks like that in the following figure.

Figure 4 - Sample configured Widgets

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 5 - Language selection

Configurations

Figure 6 - Configurations

REST Provider

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

Figure 7 - REST Provider selection

Appearance Settings

In the Appearance settings section it is possible to change the value and color of:

• Title;
• Text size;
• Buttons height/width
• Title color;
• Background color;
• Background image

Figure 8 - 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 9 - 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 10 - 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 3 - 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-EWOperativeProcedure-config.html

• sym-EWOperativeProcedure-template.html

• sym-EWOperativeProcedure.js

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

• Images that contains the control icon:

  • EWOperativeProcedure.png;

• Libs with the libraries used:

  • EWClasses.js
  • moment.js
  • TweenMax.min.js

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

Figure 11 - web.config

Additional Notes for Use

For proper operation of the widget must disable the Cross-Site Request Forgery (CSRF) and explicitly enable the PUT and POST methods in the Vision IP configuration database:

• Connect to the Configuration Database using the PI System Explorer
• Expand the OSIsoft element
• Expand the PI element WEB API
• Expand the PI element Vision-srv
• Select the System Configuration element
• Select the attribute Cors Methods and add if no PUT and POST methods separated by commas
• Select the EnableCSRF attribute and set the value to FALSE

Figure 12 - Configuration Database

After these procedures, the PI Web API service must be restarted.

Figure 13 - Restart PI API Web Service

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.