Using Incoming Message in ui_template Node

Dashboard
1

Hello everyone,

I am trying to receive incoming messages within a ui_template node in my flow. I followed the example in info bar and I am able to receive incoming messages in ui_template. But when I refresh the page or switch back to same page using title bar on dashboard, scope.$watch catches an old message as if a new one is received even though there is no message incoming.

Is there any way I can get around this issue? I need scope.$watch to fire only if there is really an incoming message from input of ui_template.

Thanks for any help.

2

In a case like this, it would be helpful if you posted a minimal flow showing the issue. Please read
How to share code or flow json before posting the flow.

Also there are three examples in the info tab, which one are you refering to?

1 Like
3

Sorry, actually my flow was very simple that's why I did not share it. Basically I have an inject connected to a template containing below javascript

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      console.log("Fire!");	  
	  
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);
</script>

When I click on inject to try it out, it works correctly and prints Fire! to console. But I noticed that Fire! is printed to console, when the dashboard page is refreshed with F5 or if I switch back to the page containing the ui_template. I want to prevent this behaviour. Fire! should be printed only when a message is received from inject.

To be honest I've already find a solution to my problem by adding an extra property to msg and check its change in $watch event, but I did not like that solution and I want to understand why this problem occurs.

4

Currently any incoming message is stored in the overall state so that that any late joining client (ui displays) will be able to get that last known state of a widget.
There is a PR in the works to allow this to be more optional - but this hasn't translated into any option on the template to expose that option yet. (so that this behaviour could then optionally be turned off)

5

Thanks for the reply. I share my solution for the problem below. Maybe it can be some use to somebody else.

I've added the cnt property to msg object. Cnt property is incremented only when the button triggering the ui_template containing code below. Passing newValue and oldValue to callback method I am able to the current and previous state of msg object. Comparing current and previous cnt property of msg object I am able to detect if button is pressed or not.

<script>
(function(scope) {
  scope.$watch('msg', function(newValue,oldValue,scope) {
    if (newValue) {      
      if (typeof(newValue) != "undefined" && typeof(oldValue) != "undefined"){
          if (newValue.cnt != oldValue.cnt){
              console.log("Button is pressed!");            
          }
      }      
      $("#my_"+scope.$id).html(newValue.payload);
    }
  });
})(scope);
</script>
6

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