The ui-control node will emit an event when the tab is changed... you could use that to trigger a notification asking if they want to save. Though this is only emitted after the tab has been changed - but as already pointed out the changed data is most likely already back on the server - so you could then optionally write it out.
I think at this point, you need to share some code because we aren't seeing the full picture. Best to share a simplified flow that gives some example data and shows the table. Then we can test out exactly what happens.
I am trying to build a simplified flow.
But a very simple solution would be to set a "dirty" bit that can be used for an action before leaving a tab. Whatever has happened on the TAB.
In my case it would be a dialogue asking the user if he wants to save the data of the table to a file first ... or ignore it and leave the TAB without further action ... and discard the changed data
Here is a possible solution to prevent the user from switching to another TAB.
In this proposal, the 'disabled' property of the toolbar button is switched. If it has the status 'disabled = true', the button is black and inactive.
This can be extended further.
[{"id":"2a6b6ab3734ed4da","type":"inject","z":"b2e0efbc7b7d96a6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"tbchange","payload":"","payloadType":"date","x":270,"y":1480,"wires":[["5ae5eb46e1058642"]]},{"id":"5ae5eb46e1058642","type":"ui_template","z":"b2e0efbc7b7d96a6","group":"d89bc0bf341145b9","name":"pbToolbar","order":8,"width":4,"height":1,"format":"<!-- Pseudo Button -- work with toolbar icon -->\n\n<style>\n .jobcall {\n margin-top: 10px !important;\n width: 100% !important;\n display: flex;\n align-items: center;\n flex-direction: column;\n }\n</style>\n\n<div class=\"jobcall\">\n <p ng-click=\"send({payload:jobcall('XYZ')})\" >\n <i id=\"isave\" class=\"fa fa-bars fa-lg\" style=\"color:black; cursor:pointer\" ></i>\n </p>\n</div>\n\n<script>\n\n var d; // toolbar button status\n\n (function(scope) {\n\n scope.jobcall = function(x) {\n\n console.log(\"toolbarbutton :\", d) \n msg = {};\n msg.payload = x;\n msg.toolbarbutton = d;\n return msg;\n }\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if (msg.topic === 'tbchange'){\n d = $(\".md-icon-button\")[0].disabled;\n console.log(`toolbar icon watch ${d} ${msg.topic} `);\n \n $(\".md-icon-button\")[0].disabled = (d === true) ? false : true;\n }\n }\n }); \n })(scope);\n</script> ","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":460,"y":1480,"wires":[["7c8b4f51359b43cc"]]},{"id":"7c8b4f51359b43cc","type":"debug","z":"b2e0efbc7b7d96a6","name":"tb status","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":620,"y":1480,"wires":[]},{"id":"d89bc0bf341145b9","type":"ui_group","name":"Plan bearbeiten","tab":"dd8e409b7c560497","order":2,"disp":false,"width":"10","collapse":false,"className":""},{"id":"dd8e409b7c560497","type":"ui_tab","name":"PlƤne erstellen","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
Works with Dashboard 1
Edit
Minor functional correction of the flow:
-- enable/disable of the 'toolbar tab button' with 'inject' node
-- pseudo button just will list the current status of the 'toolbar tab button' to nr-debug and console
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
