Pages
ButtonScript
The ButtonScript control is a customizable widget that can be placed anywhere within the HMI page using the page editor. As its name suggests, this control is designed to execute scripts in response to different lifecycle events, offering a flexible way to trigger logic directly from the interface.
Properties
Label
This defines the text displayed on the button. It serves as a user-facing caption and can describe the button's purpose or action.
Image Location
Specifies a background image for the button using a URL. This allows for visual customization beyond the standard label, enhancing the interface design.
Script on Load
This script runs automatically when the ButtonScript control is loaded onto the screen. It is useful for initializing values or preparing conditions before user interaction.
Script
This is the main action script, executed when the button is clicked. It can contain one or more predefined commands to control variables, trigger operations, or influence other parts of the HMI.
Script on Close
This script is executed when the ButtonScript control is removed from view (e.g., during a page transition). It can be used for cleanup, unsubscribing from variables, or resetting values.
ButtonScript Command Reference
Each command can be used inside the Script, Script on Load, or Script on Close properties of the buttonscript control.
Available Commands
| Command | Description |
|---|---|
elementById('id') |
Returns an internal object reference to a widget with the given ID. |
set(value) |
Sets the provided value to the given element (currently supports only outputbasic). |
append(value) |
Appends a string to the current text content of an outputbasic element. |
appendRangeCheck(value, maxRef, minRef) |
Appends a value to an element only if it stays within a defined min-max range. References can be IDs or literal numbers. |
checkRange(minRef, maxRef, targetId) |
Disables a target button if the element value is outside the min-max range. |
truncate(numChars) |
Truncates the last N characters from an outputbasic element. |
getValue() |
Gets the value from an outputbasic element. |
setWs(value, connectionId, path) |
Sends a value to the backend via WebSocket (uses global or explicit connection and path). |
setWsOnPosition(value, mapName, connectionId, path) |
Sends the value to all positions if on index 0, otherwise uses local page index. |
evalValue('javascript') |
Executes inline JavaScript code using the current value as this.value. |
changeSign() |
Multiplies the numeric value in an element by -1. |
closePopup() |
Triggers the closing of the current popup. |
getCurrentPageIndex() |
Returns the current page index based on the router URL. |
goToPage(true, pageId, index, forceProceed) |
Navigates to another route in the app (/home/pageId). |
navigateToPageIndex(pageIndex, mapName, pageId, forceProceed) |
Navigates using index and mapName (more dynamic than goToPage). |
submitContainer() |
Triggers form submission of the current widget container. |
submitAll() |
Triggers form submission for all widgets. |
sleep(ms, forceProcess) |
Pauses script execution for ms milliseconds (can optionally return true). |
factor(value, multiplier) |
Multiplies the value by the given number. |
Important Note: the command line needs to be always ending by semicolon ;
✅ Examples
Example 1: Append Value and Check Range
elementById(display_element) .append(8) .checkRange(display_min, display_max, display_submit);
Example 2: Truncate Value and Check Range
elementById(display_element) .truncate(1) .checkRange(display_min, display_max, display_submit);
Example 4: Setting the value on WS Connection and closing the popup
First line will get the value that is displayed in "display_element" (id of the outputbasic set in element properties). And then it will set it to the connection binding.
Second line will close the popup.
elementById(display_element).getValue().setWs(); closePopup();