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

Dashboard
1

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.

<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?

2 
<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>
3

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:

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?

<!-- 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>
4

Try

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

[{"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}]
5

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

6

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