Fields templatization feature allows you to process the incoming messages with dynamic configuration
by substitution of templates specified in the configuration fields with values from message or message metadata.
For more detailed information, please refer to the ThingsBoard [documentation{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/templatization/)
For more detailed information, please refer to the ThingsBoard [documentation{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/reference/rule-engine/templatization/)
You can see real life example, how to use this node in those tutorials:
You can see real life example, how to use this node in this tutorial:
- [Create and Clear Alarms{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/create-clear-alarms/#node-a-filter-script)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/rpc-reply-tutorial#add-filter-script-node)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/recipes/rpc-reply-with-related-telemetry/#step-41-filter-script-node)
You can see real life example, how to use this node in this tutorial:
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/rpc-reply-tutorial#log-unknown-request)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/recipes/rpc-reply-with-related-telemetry/#step-43-log-node)
You can see real life example, how to use this node in those tutorials:
You can see real life example, how to use this node in this tutorial:
- [Create and Clear Alarms{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/create-clear-alarms/#node-a-filter-script)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/rpc-reply-tutorial#add-filter-script-node)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/recipes/rpc-reply-with-related-telemetry/#step-41-filter-script-node)
You can see real life example, how to use this node in this tutorial:
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/rpc-reply-tutorial#log-unknown-request)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/recipes/rpc-reply-with-related-telemetry/#step-43-log-node)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/rpc-reply-tutorial#add-transform-script-node)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/recipes/rpc-reply-with-related-telemetry/#step-32-script-transformation-node)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/rule-engine-2-0/tutorials/rpc-reply-tutorial#add-transform-script-node)
- [Reply to RPC Calls{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/recipes/rpc-reply-with-related-telemetry/#step-32-script-transformation-node)
@ -10,7 +10,7 @@ A JavaScript function used to render SCADA symbol state.
**Parameters:**
<ul>
<li><b>ctx:</b><code>ScadaSymbolContext</code> - <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext"target="_blank">Context</a> of the SCADA symbol.
<li><b>ctx:</b><code>ScadaSymbolContext</code> - <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolcontext"target="_blank">Context</a> of the SCADA symbol.
</li>
<li><b>svg:</b><code><ahref="https://svgjs.dev/docs/3.2/container-elements/#svg-svg">SVG.Svg</a></code> - A root svg node. Instance of <ahref="https://svgjs.dev/docs/3.2/container-elements/#svg-svg"target="_blank">SVG.Svg</a>.
</li>
@ -72,7 +72,7 @@ if (levelDownEnabled) {
This JavaScript code snippet dynamically handles the visibility and styling of an icon and label within a SCADA symbol.
It checks the `showIcon` and `showLabel` properties from the context to determine whether to display the icon and/or label.
If the icon or label is shown, the script sets their respective properties like size, color, and position.
The script utilizes the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolapi"target="_blank">ScadaSymbolApi</a> to update the visual appearance of these elements based on the context properties.
The script utilizes the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolapi"target="_blank">ScadaSymbolApi</a> to update the visual appearance of these elements based on the context properties.
<br>
This approach ensures that both the icon and label elements are dynamically shown or hidden based on context properties, with appropriate styling applied.
@ -10,10 +10,10 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
**Parameters:**
<ul>
<li><b>ctx:</b><code>ScadaSymbolContext</code> - <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext"target="_blank">Context</a> of the SCADA symbol.
<li><b>ctx:</b><code>ScadaSymbolContext</code> - <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolcontext"target="_blank">Context</a> of the SCADA symbol.
See the examples below to learn how to <ahref="https://svgjs.dev/docs/3.2/manipulating/"target="_blank">manipulate</a> and <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolanimation"target="_blank">animate</a> elements.<br>
See the examples below to learn how to <ahref="https://svgjs.dev/docs/3.2/manipulating/"target="_blank">manipulate</a> and <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolanimation"target="_blank">animate</a> elements.<br>
</li>
<li><b>event:</b><code>Event</code> - DOM event.
</li>
@ -28,7 +28,7 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
<br>
This JavaScript snippet demonstrates triggering a <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide//ui/widget-actions/#action-types"target="_blank">widget action</a> using the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext"target="_blank">ScadaSymbolContext API</a> when the click event occurs. The widget action will be linked to the behaviorId 'click', which defines the action that will be executed upon the event.
This JavaScript snippet demonstrates triggering a <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/actions/#action-types"target="_blank">widget action</a> using the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolcontext"target="_blank">ScadaSymbolContext API</a> when the click event occurs. The widget action will be linked to the behaviorId 'click', which defines the action that will be executed upon the event.
The behavior of this action depends on the type of widget action configured in the ThingsBoard platform (e.g., navigating to a dashboard state, updating the current state, opening a URL, etc.).
<br>
@ -50,13 +50,13 @@ This action is executed automatically upon the 'click' event, making it useful f
**Handle device activation toggle**
The example demonstrates how to dynamically call the 'turnOn' or 'turnOff' actions based on the 'active' status from the context. The actions are implemented using the following methods from the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolapi"target="_blank">Scada Symbol API</a>:
The example demonstrates how to dynamically call the 'turnOn' or 'turnOff' actions based on the 'active' status from the context. The actions are implemented using the following methods from the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolapi"target="_blank">Scada Symbol API</a>:
- **callAction**: *(event: Event, behaviorId: string, value?: any, observer?: Partial\<Observer\<void\>\>): void* - Triggers a specific behavior action identified by its ID, allowing for the optional passing of values and observer callbacks.
- **setValue**: *(valueId: string, value: any): void* - Updates a specific value within the `ctx.values` object and initiates all related rendering functions.
For more detailed guidelines on device interaction, consider reviewing the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#best-practices"target="_blank">best practices</a>.
For more detailed guidelines on device interaction, consider reviewing the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#best-practices"target="_blank">best practices</a>.
```javascript
var active = ctx.values.active; // Current active status from context
@ -97,7 +97,7 @@ This example utilizes two specific action behaviors, `turnOn` and `turnOff`, whi
This JavaScript code demonstrates click actions for buttons that either increase or decrease the temperature value within a predefined range.
The behavior triggered by the click event updates the time series data for the temperature and ensures that the value stays within the defined limits.
The widget uses the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext"target="_blank">ScadaSymbolContext API</a> to manage both temperature changes and the corresponding actions.
The widget uses the <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolcontext"target="_blank">ScadaSymbolContext API</a> to manage both temperature changes and the corresponding actions.
1. **Decrease Temperature (levelDown button)**:
* The user clicks the levelDown button to decrease the temperature. If the system is running, the temperature decreases by a step defined by `temperatureStep`, but it will never go below the `minTemperature`.
@ -10,10 +10,10 @@ A JavaScript function used to render SCADA symbol element with specific tag.
**Parameters:**
<ul>
<li><b>ctx:</b><code>ScadaSymbolContext</code> - <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext"target="_blank">Context</a> of the SCADA symbol.
<li><b>ctx:</b><code>ScadaSymbolContext</code> - <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolcontext"target="_blank">Context</a> of the SCADA symbol.
See the examples below to learn how to <ahref="https://svgjs.dev/docs/3.2/manipulating/"target="_blank">manipulate</a> and <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolanimation"target="_blank">animate</a> elements.<br>
See the examples below to learn how to <ahref="https://svgjs.dev/docs/3.2/manipulating/"target="_blank">manipulate</a> and <ahref="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada-symbol-dev/#scadasymbolanimation"target="_blank">animate</a> elements.<br>
@ -34,7 +34,7 @@ function showQrCodeDialog(title, code, format) {
{:copy-code}
```
* Parse code as a device claiming info (in this case ```{deviceName: string, secretKey: string}```)<br>and then claim device (see [Claiming devices{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/claiming-devices/) for details):
* Parse code as a device claiming info (in this case ```{deviceName: string, secretKey: string}```)<br>and then claim device (see [Claiming devices{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/claiming/) for details):
@ -116,9 +116,8 @@ To test how this widget performs RPC commands, we will need to place it in a das
- Login as Tenant administrator.
- Navigate to **Devices** and create new device with some name, for ex. "My RPC Device".
- Open device details and click "Copy Access Token" button to copy device access token to clipboard.
- Download [mqtt-js-rpc-from-server.sh{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/reference/resources/mqtt-js-rpc-from-server.sh) and [mqtt-js-rpc-from-server.js{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/reference/resources/mqtt-js-rpc-from-server.js). Place these files in a folder.
Edit **mqtt-js-rpc-from-server.sh** - replace **$ACCESS_TOKEN** with your device access token from the clipboard. And install mqtt client library.
- Run **mqtt-js-rpc-from-server.sh** script. You should see a "connected" message in the console.
- Save the **mqtt-js-rpc-from-server.js** file from the [MQTT RPC API{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/reference/mqtt-api/rpc/) guide to a folder on your PC and install the mqtt client library.
- Export your device access token by running `export TOKEN=$ACCESS_TOKEN` (replace **$ACCESS_TOKEN** with the token from the clipboard), then run the script with `node mqtt-js-rpc-from-server.js`. You should see a "connected" message in the console.
- Navigate to **Dashboards** and create a new dashboard with some name, for ex. "My first control dashboard". Open this dashboard.
- Click dashboard "edit" button. In the dashboard edit mode, click the "Entity aliases" button located on the dashboard toolbar.
@ -167,7 +166,7 @@ In order to test "Two way" RPC command mode, we need to change the corresponding
@ -131,7 +131,7 @@ Browser debugger (if enabled) will automatically pause code execution at the deb
##### Further reading
For more information read [Widgets Development Guide{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development).
For more information read [Widgets Development Guide{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development/).
The widget subscription object is instance of [IWidgetSubscription{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/core/api/widget-api.models.ts#L264") and contains all subscription information, including current data, according to the [widget type{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/widget-library/#widget-types).
The widget subscription object is instance of [IWidgetSubscription{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/core/api/widget-api.models.ts#L264") and contains all subscription information, including current data, according to the [widget type{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development/#widget-types).
Depending on widget type, subscription object provides different data structures.
For [Latest values{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/widget-library/#latest-values) and [Time-series{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/widget-library/#time-series) widget types, it provides the following properties:
For [Latest values{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development/latest-values/) and [Time-series{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development/time-series/) widget types, it provides the following properties:
- **datasources** - array of datasources (Array<[Datasource{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L279)>) used by this subscription, using the following structure:
@ -54,7 +54,7 @@ For [Latest values{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/us
]
```
For [Alarm widget{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/widget-library/#alarm-widget) type it provides the following properties:
For [Alarm widget{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development/alarm-widget/) type it provides the following properties:
- **alarmSource** - ([Datasource{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L279)) information about entity for which alarms are fetched, using the following structure:
@ -110,4 +110,4 @@ For [Alarm widget{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/use
]
```
For [RPC{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/widget-library/#rpc-control-widget) or [Static{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/widget-library/#static) widget types, subscription object is optional and does not contain necessary information.
For [RPC{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development/rpc-control/) or [Static{:target="_blank"}](${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/contribution/widgets-development/static-widget/) widget types, subscription object is optional and does not contain necessary information.
Display greetings for currently logged-in user.<br>
Let's assume widget has first datasource configured using <code>Current User</code><atarget="_blank"href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/aliases/#single-entity">Single entity</a> alias<br>
Let's assume widget has first datasource configured using <code>Current User</code><atarget="_blank"href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/aliases/#single-entity">Single entity</a> alias<br>
and has data keys for <code>firstName</code>, <code>lastName</code> and <code>name</code> entity fields:
Vladyslav Prykhodko
1 month ago
GitHub