Page Scripts

Page and Global Scripts run client-side in the browser and let pages interact with variables, navigation, data tables, alarms, layers, logins, databases, and popups through built-in JavaScript functions.

Updated 7 min read
On this page (25 sections)
  1. Overview
  2. Default lifecycle functions
  3. Custom functions and object actions
  4. Page Script functions
  5. PageNavigate(pagename)
  6. PageAddVariable(variable)
  7. PageReadVariable(variable)
  8. PageReadIntVariable(variable)
  9. PageReadFloatVariable(variable)
  10. PageReadBoolVariable(variable)
  11. PageWriteVariable(variable, value, silent = true)
  12. PageGetSelectedDataGridRows(name)
  13. PageSelectDataGridRow(name, keyValue)
  14. PageDeselectDataGrid(name)
  15. PageRefreshDataGrid(name)
  16. PageSetDataGridFilter(name, column, operator, value, value2)
  17. PageClearDataGridFilters(name) and PageExportDataGrid(name)
  18. PageLogin(username, password)
  19. PageDatabaseQuery(connection, sqlquery)
  20. PageAlarmBannerAcknowledgeAll(name)
  21. PageAlarmBannerRemoveAll(name)
  22. PagePublishDeviceVariables(deviceName)
  23. PageSetLayerVisibility(layer, hide)
  24. PageSetLayerVisibilityByName(layerName, hide)
  25. PageOpenPopup(callerId, popupJson)

Overview

In the page decorator, you will find two buttons: Page Script and Global Script.

Unlike Python Scripts, which are executed server-side, Page and Global Scripts are executed client-side in the browser. This means the script runs inside each user's browser session independently.

Page scripts are stored with the page and only loaded with that page. Global scripts are stored globally and loaded with all pages.

  • Scripts inside Page Script are saved together with the page and are only loaded with this page.
  • Scripts inside Global Script are saved globally and are loaded with all pages.
The scripting language for Page and Global Scripts is JavaScript. Because EnvisionSCADA clients are thin clients, JavaScript is used so the logic can run directly in any supported browser without installing extra software on the client device. Server-side Python scripts still run on the server where Python is installed with EnvisionSCADA.
Page Decorator

Default lifecycle functions

Both Page Script and Global Script include three lifecycle functions by default.

  • OnPageLoad / OnGlobalLoad : Executes when the page is loaded.
  • OnPagePeriodic / OnGlobalPeriodic: Executes periodically while the page is open.
  • OnPageExit / OnGlobalExit: Executes before navigating to another page. This function is not executed when closing the browser.
You can use CTRL+F inside the editor to search quickly through your script code.
Page Script
Global Script

Custom functions and object actions

Besides the default lifecycle handlers, you can create your own custom functions.

These custom functions can then be executed from object actions.

Page Script functions

The system provides built-in functions for interacting with variables, the page, the system, data tables, alarms, databases, and popups.

  • PageNavigate(pagename): Navigates the runtime to another page.
  • PageAddVariable(variable) : Creates a script-level variable, necessary when not used on the page.
  • PageReadVariable(variable): Reads the value of a system variable.
  • PageReadIntVariable(variable): Reads a variable and returns it as an integer.
  • PageReadFloatVariable(variable) : Reads a variable and returns it as a floating-point number.
  • PageReadBoolVariable(variable): Reads a variable and returns it as a boolean value.
  • PageWriteVariable(variable, value, silent = true) : Writes a value to a system variable.
  • PageGetSelectedDataGridRows(name) : Returns the selected rows of a Data Grid as objects keyed by column.
  • PageDeselectDataGrid(name) : Removes the current selection in a Data Grid.
  • PageRefreshDataGrid(name) : Reloads the rows of a Data Grid.
  • PageSelectDataGridRow(name, keyValue) : Selects the row of a Data Grid with that key value.
  • PageSetDataGridFilter(name, column, operator, value, value2) : Sets a filter on a Data Grid column.
  • PageClearDataGridFilters(name) : Removes every filter and the search text of a Data Grid.
  • PageExportDataGrid(name) : Downloads the CSV export of a Data Grid.
  • PageGetSelectedDataGridCells(name) : Returns the visible cell texts of the first selected row of a Data Grid, in column order.
  • PageLogin(username, password) : Logs a user into the system.
  • PageDatabaseQuery(connection, sqlquery) : Executes a SQL query on a Database Connection and returns the result asynchronously.
  • PageAlarmBannerAcknowledgeAll(name) : Acknowledges all unacknowledged alarms in an alarm banner (if the user has the rights)
  • PageAlarmBannerRemoveAll(name) : Removes all alarms from an alarm banner (if the user has the rights)
  • PagePublishDeviceVariables(deviceName) : Publishes variables of a specified device.
  • PageSetLayerVisibility(layer, hide) : Sets the visibility of a layer using its layer identifier.
  • PageSetLayerVisibilityByName(layerName, hide) : Sets the visibility of a layer using its layer name.
  • PageOpenPopup(callerId, popupJson): Opens a popup with its configuration
Using client variables together with pagescript is very common because they both live inside the browser of the client only. 

The usage of Local variables is of course completely supported. Note that writing a Local variable changes it for all users, not only for the user executing the script.

PageAddVariable(variable)

Adds a script-level variable initialized to zero.

  • variable: Name of the script variable to create.

PageReadVariable(variable)

Returns the value of a system variable.

  • variable: Name of the variable to read.

PageReadIntVariable(variable)

Reads a variable and returns its value converted to an integer.

  • variable: Name of the variable to read.

PageReadFloatVariable(variable)

Reads a variable and returns its value converted to a floating-point number.

  • variable: Name of the variable to read.

PageReadBoolVariable(variable)

Reads a variable and returns its value converted to a boolean.

  • variable: Name of the variable to read.

PageWriteVariable(variable, value, silent = true)

Writes a value to a system variable.

  • variable: Name of the variable to write.
  • value: Value to write.
  • silent: Optional flag to suppress notifications or events. Default: true.

PageGetSelectedDataGridRows(name)

Returns the selected rows of the Data Grid with that Name as an array of objects keyed by column, for example rows[0].OrderNo. With Selection set to Single the array holds one row.

  • name: Name of the Data Grid.

PageGetSelectedDataGridCells(name) returns the same row as the visible cell texts in column order, which is what the Data Table function PageGetSelectedDataTable(name) returned. Page Scripts that used the old name are rewritten to the new one when the project is upgraded.

PageSelectDataGridRow(name, keyValue)

Selects the row whose Key Column holds keyValue, for example after a write, and writes the Selection Variable.

  • name: Name of the Data Grid.
  • keyValue: Value of the Key Column.

PageDeselectDataGrid(name)

Removes the current row selection in the Data Grid. It replaces the Data Table function PageDeselectDataTable(name), which upgraded projects are rewritten to use.

  • name: Name of the Data Grid.

PageRefreshDataGrid(name)

Reloads the rows of the Data Grid with the current filters, sort and page.

  • name: Name of the Data Grid.

If you do not want the grid to reload periodically, set its Refresh Time to 0 and call this function when needed. It replaces the Data Table function PageRefreshDataTable(name), which upgraded projects are rewritten to use.

PageSetDataGridFilter(name, column, operator, value, value2)

Sets a filter on one column of the Data Grid and reloads it, the way an operator does through the column filter. Call it with an empty value to remove the filter of that column. This replaces the former PageFillDataTableDynamic: the connection and the table belong to the object, and a filter narrows the rows at runtime.

  • name: Name of the Data Grid.
  • column: Column key as defined on the object.
  • operator: contains, startswith, equals, notequals, gt, gte, lt, lte, between, in, empty or notempty.
  • value: Filter value; for in a comma separated list; for between the lower bound.
  • value2: Upper bound for between.

PageClearDataGridFilters(name) and PageExportDataGrid(name)

PageClearDataGridFilters removes every filter and the search text of the Data Grid and reloads it. PageExportDataGrid downloads the CSV export of the rows that match the current filters, up to the Row Limit.

  • name: Name of the Data Grid.

PageLogin(username, password)

Logs a user into the system.

  • username: User name.
  • password: User password.

PageDatabaseQuery(connection, sqlquery)

Executes a SQL query on a Database Connection and returns the result asynchronously. The connection is selected by name and must have Allow Database Query set on the Database Connections page; see the Database Query article.

  • connection: Name of the Database Connection.
  • sqlquery: SQL query to execute.
Creating your own database can be useful for storing RFID information, batches, calculations, results, and similar application data. For a table on a page with editing, use the Data Grid object instead of writing INSERT and UPDATE statements in a script: it generates the statements itself and records every write in the Audit Trail.
A connection to the Configuration or Historian database is protected from INSERT and UPDATE operations. Only SELECT statements can be executed there. On your own database, the rights of the database login in the connection apply.

PageAlarmBannerAcknowledgeAll(name)

Acknowledges all unacknowledged alarms in the specified alarm banner.

  • name: Alarm banner name.

PageAlarmBannerRemoveAll(name)

Removes all alarms from the specified alarm banner.

  • name: Alarm banner name.

PagePublishDeviceVariables(deviceName)

Publishes all variables of the specified device to its configured Kafka broker.

  • deviceName: Name of the device.

PageSetLayerVisibility(layer, hide)

Sets the visibility of a layer using its layer identifier.

  • layer: Layer identifier or reference.
  • hide: Boolean indicating whether the layer should be hidden (true) or shown (false).

PageSetLayerVisibilityByName(layerName, hide)

Sets the visibility of a layer using its layer name.

  • layerName: Name of the layer.
  • hide: Boolean indicating whether the layer should be hidden (true) or shown (false).
Tip: use this together with OnPagePeriodic and the client.PageScale variable to automatically hide or show layers.

PageOpenPopup(callerId, popupJson)

Opens a popup and passes the caller id plus a popup configuration JSON object to the method.

  • callerId: The id that the popup will receive.
  • popupJson: Contains the JSON configuration of the popup.

popupreplacers define the replacers which will replace the values inside a master or template symbol. The order must match the master symbol, such as PumpFaceplate in the example below.

Example popup JSON
{
  "OpenPopup": {
    "popuptop": "-100px",
    "popupleft": "75px",
    "popupsymbolname": "PumpFaceplate",
    "popupcontext": "",
    "popupusepositioncontext": "false",
    "popupdisabledrag": "false",
    "popupreplacers": ["Sim", "Pump1", "Pump 1"]
  }
}
PropertyTypeDescriptionExample
popuptopstringVertical position of the popup as a CSS value.100px
popupleftstringHorizontal position of the popup as a CSS value.200px
popupsymbolnamestringName of the symbol or faceplate to open.PumpFaceplate
popupcontextstringLogical group name used for popup management.PumpGroup
popupusepositioncontexttrue / falseReuse a stored position for the same popup context.false
popupdisabledragtrue / falseDisable dragging of the popup window.false
popupreplacersarray of stringsValues used to replace placeholders in the target symbol.["Sim", "Pump1", "Pump 1"]

Example usage:

Something missing or wrong in this article? Contact us