How to determine if a dashboard tab is active

Dashboard
1

Is there a way to see in a flow, if a dashboard tab is visible? Somthing like a gate, to only continue flow, if tab is visible.

2

You can try to use the ui_control node

image

its output will report of any connections/disconnections, change of tabs etc on the dashboard
if you keep a record of this information maybe you can determine if someone is viewing a Tab and trigger other logic in your flow

3

I think a Ui-template script would do this, then use a switch node and context storage to stop flow progression.
e.g.

[{"id":"d696313000561a90","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":194.00000762939453,"y":2340.000069618225,"wires":[["1302ef8b43047b4e"]]},{"id":"1302ef8b43047b4e","type":"switch","z":"65617ffeb779f51c","name":"","property":"focus","propertyType":"flow","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":354.00000762939453,"y":2340.000069618225,"wires":[["50a3860f84f41d3e","5b1974eeda2e6c33"]]},{"id":"50a3860f84f41d3e","type":"debug","z":"65617ffeb779f51c","name":"debug 260","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":534.0000076293945,"y":2340.000069618225,"wires":[]},{"id":"5b1974eeda2e6c33","type":"ui_text","z":"65617ffeb779f51c","group":"2d4fe667.28f8ba","order":20,"width":0,"height":0,"name":"","label":"messages pass when this page is in focus","format":"{{msg.payload}}","layout":"row-spread","className":"","x":524.0000076293945,"y":2380.000069618225,"wires":[]},{"id":"4bc90f993b0ad16e","type":"ui_template","z":"65617ffeb779f51c","group":"2d4fe667.28f8ba","name":"","order":21,"width":0,"height":0,"format":"<script>\n(function(scope) {\n    document.addEventListener(\"visibilitychange\", function (event) {\n        scope.send({payload: !document.hidden});\n    });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":160,"y":2460,"wires":[["f7ad3a5227307fb5","1bc41ac7b88d7fc3"]]},{"id":"f7ad3a5227307fb5","type":"debug","z":"65617ffeb779f51c","name":"debug 259","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":370,"y":2440,"wires":[]},{"id":"1bc41ac7b88d7fc3","type":"change","z":"65617ffeb779f51c","name":"","rules":[{"t":"set","p":"focus","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":2480,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

<script>
(function(scope) {
    document.addEventListener("visibilitychange", function (event) {
        scope.send({payload: !document.hidden});
    });
})(scope);
</script>

[edit] more concise.

4

i use the ui control to start updating a chart every minute only if the particular dashboard tab is visible. if user changes dashboard tab, i stop the cronplus trigger. so chart not updated when no one is looking at that.

5

@UnborN and @smanjunath211 this seems to be the solution of my first idea I wanted to realize. But the ui control only report "change" at his output. So I don't know what change it is.

@smanjunath211 how do you know, that you enter or leave a certain tab? e.g. if I have in my Menue the tabs a,b,c and want to know when I enter the tab b and when I leave the tab b. Do you have a flow for me :)?

@E1cid thanks to your solution. This is also interresting extends my first thougt and reports me, when I enter/leave the browser tab of my dashboard :). It seems also to work I lock the screen. (I don't understand why the output came three times in a row, but it doesn't matter)

6

Try refreshing your browser, I to received three messages while testing, until i refreshed the browser then it settled down, i think the old listeners where still in memory.

Add a debug set to full message, then you will se msg.id and msg.name. Still ui-control does not report if you change browser windows/tab, or close the bowser window/tab.

2 Likes
7

Aaaah! Many thanks @E1cid :). I thought too short :(.

Now all is working!

8

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