# Ui-template: msg sending on received payload, not (only) with button

**URL:** <https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580>\
**Category:** Dashboard\
**Created:** [25 September 2023 21:38 UTC](https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580 "2023-09-25T21:38:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [25 September 2023 21:38 UTC](https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580/1 "2023-09-25T21:38:55Z")

</div>

For the template dashboard, the examples describe how to trigger a msg with a button. Also it is possible to access elements on the HTML page, process with JS and pass the resulting values to the outgoing msg.

```auto
<script>
    var value = "hello world";
    // or overwrite value in your callback function ...
    this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
  Click me to send a hello world
</md-button>

```

I need this functionality, but the function should also be triggered with an input msg.payload like 'sendmsg'.  
Unfortunately, I can't find a solution for this. Are there any other tips?

---

<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:** [27 September 2023 23:25 UTC](https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580/2 "2023-09-27T23:25:09Z")

</div>

```auto
<script>
   (function(scope) 
        //Have to use $watch so we pick up new, incoming msg's
         scope.$watch('msg', function(msg) {
             const payloadValue = msg.payload
             // Do stuff with payloadValue

             msg.payload = payloadValue
             msg.topic = 'Update'

             scope.send(msg)

          }

   })(scope)
</script>

```

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [28 September 2023 18:17 UTC](https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580/3 "2023-09-28T18:17:10Z")

</div>

Thanks for your post. Think it's from the 'template' docu, one of the examples.  
Using that code alone it does what's expected. An 'inject' with timestamp produces an output like this:

```auto
msg.payload : number
1695923856403

```

But together with the other code to use html defined buttons it will not work.  
See the complete 'template' with comments. Is there a limitation not to use 'watch' and 'send' in one template?

```auto
<!-- the first script part for watching works if it's alone without the second part, -->
<!-- but not if both are present -->
<script>
  (function(scope) 
        //Have to use $watch so we pick up new, incoming msg's
         scope.$watch('msg', function(msg) {
             const payloadValue = msg.payload
             // Do stuff with payloadValue

             msg.payload = payloadValue
             msg.topic = 'Update'

             scope.send(msg)
          }
   })(scope)
</script>

<!-- the code below always works, also with the 'watch' part present -->
<script>
  this.scope.actionX1 = function() {
  let rx = ("Test");
  console.log (rx);
  return rx;
  }
</script>

<div id = "testbutton" class="button-group">
  <md-button ng-click="send({payload:actionX1()})" style="margin-left:-8px">Test1</md-button>
</div>

```

---

<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:** [28 September 2023 20:58 UTC](https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580/4 "2023-09-28T20:58:41Z")

</div>

Try

```auto
<div id = "testbutton">
  <md-button ng-click = "send({payload: actionX1()})">Test1</md-button>
</div>

<script>
  (function(scope) {
        //Have to use $watch so we pick up new, incoming msg's
         scope.$watch('msg', function(msg) {
             const payloadValue = msg.payload
             // Do stuff with payloadValue

             msg.payload = new Date(payloadValue).toLocaleString('en-GB', { timeZone: 'UTC' })
             msg.topic = 'Update'

             scope.send(msg)
          })

        scope.actionX1 = function() {
            let rx = 'Test'

            return rx
        }

   })(scope)

</script>

```

```auto
[{"id":"7b2f1e77460fe57f","type":"ui_template","z":"8428164b1645b4b8","group":"3bd9170259dad907","name":"Test Button","order":4,"width":0,"height":0,"format":"<div id = \"testbutton\">\n <md-button ng-click = \"send({payload: actionX1()})\">Test1</md-button>\n</div>\n\n<script>\n (function(scope) {\n //Have to use $watch so we pick up new, incoming msg's\n scope.$watch('msg', function(msg) {\n const payloadValue = msg.payload\n // Do stuff with payloadValue\n\n msg.payload = new Date(payloadValue).toLocaleString('en-GB', { timeZone: 'UTC' })\n msg.topic = 'Update'\n\n scope.send(msg)\n })\n\n scope.actionX1 = function() {\n let rx = 'Test'\n\n return rx\n }\n\n })(scope)\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":2070,"y":800,"wires":[["3b6034a1ca6eedb5"]]},{"id":"6c13eceab34ba03c","type":"inject","z":"8428164b1645b4b8","name":"Test Button Input","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"In","payload":"","payloadType":"date","x":1880,"y":800,"wires":[["7b2f1e77460fe57f"]]},{"id":"3b6034a1ca6eedb5","type":"debug","z":"8428164b1645b4b8","name":"Test Button Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2290,"y":800,"wires":[]},{"id":"3bd9170259dad907","type":"ui_group","name":"Group 1","tab":"562c71ed91742d82","order":1,"disp":true,"width":6},{"id":"562c71ed91742d82","type":"ui_tab","name":"Tab 23","icon":"dashboard","order":23}]

```

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [29 September 2023 10:54 UTC](https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580/5 "2023-09-29T10:54:31Z")

</div>

Thanks, your code works.  
My fault: missing closing bracket for `scope.$watch( )` .. which was not given as js error.

---

<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:** [13 October 2023 10:54 UTC](https://discourse.nodered.org/t/ui-template-msg-sending-on-received-payload-not-only-with-button/81580/6 "2023-10-13T10:54:54Z")

</div>

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