Ui-template: javascript to run function when a global var define in script changes

General
1

Hi all, I'm writing a script in ui-template and I defined a global var. I would like to add a function which is called when the global var change

<script type="text/javascript">
    var generic;

    function sendMessage(){
        scope.send({payload: generic});
    }

    function changeVar(){
        generic = "newValue"
    }
    **//if generic change**
        sendMessage()

it is possible?
many thanks

2

Anything is possible

First, what dashboard are you using? The old V1 node-red-dashboard OR the new Dashboard 2.0 @flowfuse/node-red-dashboard?

for D1, just create an object with getters and setters:

e.g.

<script type="text/javascript">
class MyClass {
  constructor(scope) {
    this.scope = scope
    this._myProperty = undefined;
  }

  get myProperty() {
    return this._myProperty;
  }

  set myProperty(value) {
    this._myProperty = value;
    this.scope.send({payload: value});
  }
}


let obj = new MyClass(scope);
// ...

obj.myProperty = 42 // will call the setter and trigger scope.send

In dashboard 2.0, this is much easier: you add a watch on the data variable and call this.send (Dashboard 2.0 is vue based so things get a fair bit easier)

EDIT:

I am fairly certain AngularJS has watchers too so someone may come along with a simpler AngularJS way that i dont know.

3

It does, though Dashboard 1 only gives you limited access. Been a long time since I used D1 in anger but I know that my blog contains an example, the cookbook probably does as well.

Of course, this is very simple in UIBUILDER :wink:

4

many thanks it works