Object and page events

An event script runs when the operator does something with an object or the page on the run screen. You set it on the Events tab of PROPERTIES; see Client scripts. Event names are shown as they are, not translated.

Object events

Event	Offered on	Fires when
onClick	All objects	The left mouse button is released without dragging
onMiddleClick	All objects	The middle mouse button is clicked
onRightClick	All objects	The right mouse button is clicked (context menu)
onDblClick	All objects	The object is double-clicked
onMouseEnter	All objects	The pointer enters the object
onMouseLeave	All objects	The pointer leaves the object
onMouseDown	All objects	A mouse button is pressed on the object
onValueChange	Input, Select, Switch, Slider	The value changes; on an input at every keystroke and again when it is confirmed
onKeyDown	Input	A key is pressed in the input
onKeyUp	Input	A key is released in the input
onFocus	Input, Select	The control gets the focus
onBlur	Input, Select	The control loses the focus

For the left, middle and right click, the Events tab also offers a click Action and opening or closing a popup without a script; see Click actions.

Page events

The page has four events, on the page background (where no object is): onClick, onDblClick, onMouseEnter and onMouseLeave. Opening and leaving a page are not events: use a page script with the trigger onLoad or onUnload.

The handler

A handler is an async function in project_main.js that receives the event:

async function Overview_StartButton_onClick(event) {
  if (await UI.confirm("Start pump P101?")) {
    await Tag("P101.Start").write(true);
  }
}

event field	Meaning
type, target, elementId	Event name, target and the identifier of the object
x, y	Position within the object
clientX, clientY	Position on the screen
button	Mouse button: 0 left, 1 middle, 2 right
key, code	Key of a keyboard event
altKey, ctrlKey, shiftKey	Modifier keys held
value, prevValue	New and previous value of an input; otherwise the value of the signal bound to the object

In the handler, self is the object itself: reading a property gives its current value, assigning one changes it on the screen for as long as the page is open (self.fill = "@alarm_critical"). In a popup, modal is that popup with its data and close(). All client script functions are available.

Put code that several event handlers share in project_main.js.

Page script triggers

Page scripts run without an operator action. Each page script has a Trigger:

Trigger	Runs
onLoad	Once when the page opens
onUnload	Once when the page is left; timers and screen changes made by scripts are cleared right after it
Periodic	Every Interval (ms), at least 500 ms; a run is skipped while the previous one is still going
Tag Change	When the signal in Tag Name changes; checked every 500 ms, the first value only sets the starting point

The page's <page>_main.js runs when the page opens, like onLoad. Order when a page opens: the scripts of the previous page stop (onUnload), the libraries are loaded, <page>_main.js runs, then the triggers start. If only the objects of the page changed, the scripts are not restarted.