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

**URL:** <https://discourse.nodered.org/t/ui-template-javascript-to-run-function-when-a-global-var-define-in-script-changes/87578>\
**Category:** General\
**Created:** [29 April 2024 08:09 UTC](https://discourse.nodered.org/t/ui-template-javascript-to-run-function-when-a-global-var-define-in-script-changes/87578 "2024-04-29T08:09:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![denissanga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/denissanga/32/48346_2.png) [@denissanga](https://discourse.nodered.org/u/denissanga)\
**Post date:** [29 April 2024 08:09 UTC](https://discourse.nodered.org/t/ui-template-javascript-to-run-function-when-a-global-var-define-in-script-changes/87578/1 "2024-04-29T08:09:39Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 April 2024 10:44 UTC](https://discourse.nodered.org/t/ui-template-javascript-to-run-function-when-a-global-var-define-in-script-changes/87578/2 "2024-04-29T10:44:08Z")

</div>

> [@denissanga](#):
>
> it is possible?

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 April 2024 12:38 UTC](https://discourse.nodered.org/t/ui-template-javascript-to-run-function-when-a-global-var-define-in-script-changes/87578/3 "2024-04-29T12:38:42Z")

</div>

> [@Steve-Mcl](#):
>
> I am fairly certain AngularJS has watchers too so someone may come along with a simpler AngularJS way that i dont know.

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 😉

---

<div class="post-metadata">

**Author:** ![denissanga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/denissanga/32/48346_2.png) [@denissanga](https://discourse.nodered.org/u/denissanga)\
**Post date:** [29 April 2024 17:18 UTC](https://discourse.nodered.org/t/ui-template-javascript-to-run-function-when-a-global-var-define-in-script-changes/87578/4 "2024-04-29T17:18:01Z")

</div>

> [@Steve-Mcl](#):
>
> `obj.myProperty = 42`

many thanks it works

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 July 2024 17:18 UTC](https://discourse.nodered.org/t/ui-template-javascript-to-run-function-when-a-global-var-define-in-script-changes/87578/5 "2024-07-28T17:18:58Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.