# Using flow.get inside a function in a template node

**URL:** <https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446>\
**Category:** General\
**Created:** [20 October 2021 06:23 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446 "2021-10-20T06:23:13Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [20 October 2021 06:23 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/1 "2021-10-20T06:23:13Z")

</div>

To check if a button that is pressed on a webpage i want to get the last pushed button on a page  
To do this i want to save the pressed button with flow.set and when a button is pressed again check the current button input id with the previous by getting it by flow.get  
But flow.get is not working. Checking google / forums i found tips with {{ or {{{ and with a $  
None of these works  
What is the correct way to do this inside a function?  
what i have now is this

```auto
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bomb</title>
	<style>
body {
            background-image: url(https://www.parkvakanties.nl/media/blog/1016/1016_1000x670.jpg);
            background-repeat: no-repeat;
            background-position: center; 
        }
        .nr-dashboard-theme ui-card-panel {
    background-color: rgba(255,255,255,0);
    border: 0px ;
}
body.nr-dashboard-theme md-content md-card {
    background-color:#12312300 !important;
    border: 0px ;
}
    

	img:visited,
    img:active,
    img:focus {
      outline:none;
    }
	.image {
			 text-align: center;
			 border-style:0;
			 border: 0;
			 border: none !important;
            background: transparent !important
            outline: none;
            
		}
        .sevenseg {

            color: rgba(255, 0, 0, 0.8);
            font-size: 85px;
            font-family: "Seven Segment";
            text-align: center;
            margin-top:10px;
        }

    </style>
</head>

<body>
  <table width="95%" border="0" class="image">
    <tbody>
      <tr>
        <td><img src="/image.png" width="65" height="65" alt="" data-clicked="0" id="imageOne" ng-click="changeImage($event)" />
        </td>
        <td><img src="/image.png" width="65" height="65" alt="" data-clicked="0" id="imageTwo" ng-click="changeImage($event)" />
        </td>
      </tr>
      <tr>
        <td><img src="/image.png" width="65" height="65" alt="" data-clicked="0" id="imageThree" ng-click="changeImage($event)" />
        </td>
        <td><img src="/image.png" width="65" height="65" alt="" data-clicked="0" id="imageFour" ng-click="changeImage($event)" />
        </td>
      </tr>
    </tbody>
  </table>

  <pre class="sevenseg" >{{msg.payload}}</pre>

  <script>
  var button;
  var lastButton;
    (function(scope) {
        scope.changeImage = function(event) {
        //console.log("Triggered", event)

        button = event.target.id; // current button id
        lastButton = flow.get("lastButton")||0; // get last button id
        
        if (event.target.dataset.clicked == "0")
         {
            scope.send({ payload: { image: event.target.id, selected: true, pannekoek: event.target.src }})
            event.target.dataset.clicked = 1 // increment clicks to 1
            event.target.src = "/imageNeg.png"; // change image src
         }
         else {
             
                scope.send({ payload: { image: event.target.id, selected: false, pannekoek: event.target.src }})
                event.target.dataset.clicked = 0 // reset clicks to 0
                event.target.src = "/image.png"; // change back to original image src
                //flow.set("lastButton",button);
             
         }

}

})(scope);
  </script>
</body>

</html>

```

---

<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:** [20 October 2021 06:35 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/2 "2021-10-20T06:35:24Z")

</div>

Context is server side (node-red runtime) do you can't access context in client side script.

You would save the last button pressed in your flow not in client code.

---

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [20 October 2021 06:43 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/3 "2021-10-20T06:43:04Z")

</div>

Thanks!  
sounds hard to solve it then.  
isnt it possible then to save something on client side?  
how do they do this normally on a website then?

the idea is that they only can change the last pressed button on the webpage

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [20 October 2021 14:19 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/4 "2021-10-20T14:19:51Z")

</div>

> [@RogierQ](#):
>
> isnt it possible then to save something on client side?

you can .. using some variable outside the scope of your changeImage function.

```javascript
scope.lastButton; // last button state

```

just the syntax is a bit different from normal javascript because the NodeRed Dashboard is based on the front-end language Angular.

**Example**

```auto
[{"id":"b11293a5f92bf98a","type":"ui_template","z":"5847b7aa62131d37","group":"61db9c3f37fc1036","name":"","order":1,"width":"12","height":"7","format":"<!doctype html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<title>Bomb</title>\n\t<style>\nbody {\n background-image: url(https://www.parkvakanties.nl/media/blog/1016/1016_1000x670.jpg);\n background-repeat: no-repeat;\n background-position: center; \n }\n .nr-dashboard-theme ui-card-panel {\n background-color: rgba(255,255,255,0);\n border: 0px ;\n}\nbody.nr-dashboard-theme md-content md-card {\n background-color:#12312300 !important;\n border: 0px ;\n}\n \n\n\timg:visited,\n img:active,\n img:focus {\n outline:none;\n }\n\t.image {\n\t\t\t text-align: center;\n\t\t\t border-style:0;\n\t\t\t border: 0;\n\t\t\t border: none !important;\n background: transparent !important\n outline: none;\n \n\t\t}\n .sevenseg {\n\n color: rgba(255, 0, 0, 0.8);\n font-size: 85px;\n font-family: \"Seven Segment\";\n text-align: center;\n margin-top:10px;\n }\n\n </style>\n</head>\n\n<body>\n <table width=\"95%\" border=\"0\" class=\"image\">\n <tbody>\n <tr>\n <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\" data-clicked=\"0\" id=\"imageOne\" ng-click=\"changeImage($event)\" />\n </td>\n <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\" data-clicked=\"0\" id=\"imageTwo\" ng-click=\"changeImage($event)\" />\n </td>\n </tr>\n <tr>\n <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\" data-clicked=\"0\" id=\"imageThree\" ng-click=\"changeImage($event)\" />\n </td>\n <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\" data-clicked=\"0\" id=\"imageFour\" ng-click=\"changeImage($event)\" />\n </td>\n </tr>\n </tbody>\n </table>\n\n <pre class=\"sevenseg\" >{{msg.payload}}</pre>\n\n <script>\n \n (function(scope) {\n\n \n scope.lastButton; // last button state\n\n scope.changeImage = function(event) {\n //console.log(\"Triggered\", event)\n\n let button = event.target.id; // current button id\n scope.lastButton = event.target.id; // set last button id\n \n if (event.target.dataset.clicked == \"0\")\n {\n scope.send({ payload: { image: event.target.id, selected: true, pannekoek: event.target.src }})\n event.target.dataset.clicked = 1 // increment clicks to 1\n event.target.src = \"/imageNeg.png\"; // change image src\n console.log(\"lastButton\", scope.lastButton)\n }\n else {\n \n scope.send({ payload: { image: event.target.id, selected: false, pannekoek: event.target.src }})\n event.target.dataset.clicked = 0 // reset clicks to 0\n event.target.src = \"/image.png\"; // change back to original image src\n console.log(\"lastButton\", scope.lastButton)\n\n \n }\n\n}\n\n// watch for received msgs\nscope.$watch('msg', function(msgReceived) {\n if (msgReceived) {\n // Do something when msg arrives\n console.log(\"msg received from Node-Red\", msgReceived);\n }\n });\n\n\n})(scope);\n </script>\n</body>\n\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":340,"y":1240,"wires":[["75d8d7a42c1072d4"]]},{"id":"75d8d7a42c1072d4","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":570,"y":1240,"wires":[]},{"id":"61db9c3f37fc1036","type":"ui_group","name":"test","tab":"74b1d602a9d252c0","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"74b1d602a9d252c0","type":"ui_tab","name":"Bom","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [20 October 2021 23:12 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/5 "2021-10-20T23:12:44Z")

</div>

I have only just started this stuff but why not;

```auto
(function(scope) {
    let button = 0
    let lastButton = 0

    scope.changeImage = function(event) {
        button = event.target.id; // current button id
        
        ... whatever you plan on doing with the information

        lastButton = button

    }

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [20 October 2021 23:24 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/6 "2021-10-20T23:24:34Z")

</div>

> [@Buckskin](#):
>
> but why not

you can define them as normal js variables but if you add them to `scope` .. those variables are going to be part of Angular and will be responsive.

if you use the Example above and add, a div :

`<div>Last Image Clicked : {{lastButton}}</div>`

With every update of that scope.lastButton variable, the DOM updates automagically.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [21 October 2021 21:47 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/7 "2021-10-21T21:47:52Z")

</div>

> [@UnborN](#):
>
> you can define them as normal js variables but if you add them to `scope` .. those variables are going to be part of Angular and will be responsive.

That is true, but there is nothing in the HTML `<body>` section that is wanting to show that information so I was, (possibly falsely) assuming that all that was required was to use the info in the `<script>` section.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [21 October 2021 22:28 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/8 "2021-10-21T22:28:13Z")

</div>

you are right . . it didnt explain it well. I should have made that distinction and clarified that.  
im new to AngularJS and most of the things i picked up are from snippets of code here and there from reading some posts.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [21 October 2021 22:36 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/9 "2021-10-21T22:36:43Z")

</div>

So am I. I have to admit that I have been developing a dropdown to select a colour (with coloured option elements) and I gave up with AngularJS and just used JQuery and Javascript

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [21 October 2021 22:53 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/10 "2021-10-21T22:53:35Z")

</div>

me i learned Vue JS instead because it was used as a template example in **uibuilder**  
and i dont regret two bits the countless hours spent learning it .. its an amazing front-end language  
it makes programming and interacting with the DOM so much easier .. all tied together with the useful functions uibuilder offers.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [22 October 2021 17:50 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/11 "2021-10-22T17:50:33Z")

</div>

Totally agree!!

---

<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:** [21 December 2021 17:51 UTC](https://discourse.nodered.org/t/using-flow-get-inside-a-function-in-a-template-node/52446/12 "2021-12-21T17:51:20Z")

</div>

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