Hi,
I have a button that sends a msg.payload to a function and the function treat the received message then display the result in a table (I have created a UI template).
When I click the button, the value in the table doesn't change untill I reload the page of the browser, so I replaced the button with an inject node and I got good result( the value change immediately without need to reload the browser).
How can I do to make the Dashboard's button work ?
Regards
In my experience, both operate the same. Just one in the editor (plus with auto inject options) and the other in the dashboard. Often I use both linked together to test a flow in both editor and dashboard
Probably better to supply your flow, with both button and inject, for others to see your setup and test the difference.
Please remember to format your flow in the post using the </> icon in the editor
If you give the table the same message it will not care where it came from. Feed your inject node and button into debug nodes and check that the contents are absolutely identical.
Hello,
kindly find the flow herewith.
I used two browser: Chromium on my Raspberry pi to show the table and Chrome in my SMARTPHONE to push the buttons:
[{"id":"35ed6fc.5739c9","type":"tab","label":"USER INTERFACE","disabled":false,"info":""},{"id":"f675f483.d43458","type":"tab","label":"Interface 1","disabled":false,"info":""},{"id":"177ddb2d.235855","type":"ui_tab","name":"Flow1","icon":"dashboard","disabled":false,"hidden":false},{"id":"78ce3a67.e0e9b4","type":"ui_base","theme":{"name":"theme-light","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#0094CE","value":"#0094CE","edited":false},"page-titlebar-backgroundColor":{"value":"#0094CE","edited":false},"page-backgroundColor":{"value":"#fafafa","edited":false},"page-sidebar-backgroundColor":{"value":"#ffffff","edited":false},"group-textColor":{"value":"#1bbfff","edited":false},"group-borderColor":{"value":"#ffffff","edited":false},"group-backgroundColor":{"value":"#ffffff","edited":false},"widget-textColor":{"value":"#111111","edited":false},"widget-backgroundColor":{"value":"#0094ce","edited":false},"widget-borderColor":{"value":"#ffffff","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","lockMenu":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"f5feda7d.cdb2c8","type":"ui_tab","name":"WELCOME","icon":"SGFA","disabled":false,"hidden":false},{"id":"f8495f4d.bca85","type":"ui_base","theme":{"name":"theme-light","lightTheme":{"default":"#0094CE","baseColor":"#0099cc","baseFont":"Arial Black,Arial Black,Gadget,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","reset":false},"themeState":{"base-color":{"default":"#0094CE","value":"#0099cc","edited":true},"page-titlebar-backgroundColor":{"value":"#0099cc","edited":false},"page-backgroundColor":{"value":"#fafafa","edited":false},"page-sidebar-backgroundColor":{"value":"#ffffff","edited":false},"group-textColor":{"value":"#1ac6ff","edited":false},"group-borderColor":{"value":"#ffffff","edited":false},"group-backgroundColor":{"value":"#ffffff","edited":false},"widget-textColor":{"value":"#111111","edited":false},"widget-backgroundColor":{"value":"#0099cc","edited":false},"widget-borderColor":{"value":"#ffffff","edited":false},"base-font":{"value":"Arial Black,Arial Black,Gadget,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","lockMenu":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":10,"py":0}}},{"id":"c46a403a.779bd","type":"ui_tab","name":"GUICHET 2","icon":"dashboard","disabled":false,"hidden":false},{"id":"4acbc3cf.002dac","type":"ui_tab","z":"35ed6fc.5739c9","name":"USER INTERFACE","icon":"dashboard","disabled":false,"hidden":false},{"id":"1a7a02bf.894f9d","type":"ui_tab","name":"Analyse","icon":"dashboard","disabled":false,"hidden":false},{"id":"c325c957.b0af88","type":"ui_tab","name":"GUICHET 3","icon":"dashboard","disabled":false,"hidden":false},{"id":"a08212ec.4716b","type":"ui_tab","name":"GUICHET 1","icon":"dashboard","disabled":false,"hidden":false},{"id":"ab777d12.73272","type":"ui_group","z":"35ed6fc.5739c9","name":"BOUTTONS","tab":"c46a403a.779bd","order":1,"disp":true,"width":"10","collapse":false},{"id":"a32a46e5.0aea28","type":"ui_group","name":"BOUTTONS","tab":"c325c957.b0af88","order":1,"disp":true,"width":"6","collapse":false},{"id":"bb70bd49.1656a","type":"ui_spacer","name":"spacer","group":"ab777d12.73272","order":1,"width":1,"height":1},{"id":"ec2712c7.c838","type":"ui_tab","name":"STORE","icon":"dashboard","disabled":false,"hidden":false},{"id":"8b749e36.3178c","type":"ui_group","name":"BOUTTONS","tab":"a08212ec.4716b","order":2,"disp":true,"width":"6","collapse":false},{"id":"279d8078.dcf29","type":"ui_tab","z":"35ed6fc.5739c9","name":"New Test","icon":"dashboard"},{"id":"61f6b050.c93cd","type":"ui_group","name":"Clock","tab":"4acbc3cf.002dac","order":5,"disp":true,"width":6,"collapse":false},{"id":"f4955b43.b25c08","type":"ui_tab","name":"Flow 2","icon":"dashboard","disabled":false,"hidden":false},{"id":"3d9e45e.bcd50ba","type":"ui_group","name":"CSS","tab":"aa9eab27.aa5688","order":2,"disp":true,"width":30,"collapse":false},{"id":"aa9eab27.aa5688","type":"ui_tab","name":"Test CSS","icon":"dashboard","disabled":false,"hidden":false},{"id":"48f7f7fe.17bda8","type":"ui_spacer","name":"spacer","group":"adc9f5e5.a672e8","order":1,"width":6,"height":1},{"id":"e959a7ec.376418","type":"ui_spacer","name":"spacer","group":"adc9f5e5.a672e8","order":2,"width":6,"height":1},{"id":"1e4d7aa9.12b025","type":"ui_spacer","name":"spacer","group":"61f6b050.c93cd","order":1,"width":3,"height":1},{"id":"3fea489a.f4c6a8","type":"ui_spacer","name":"spacer","group":"61f6b050.c93cd","order":3,"width":3,"height":1},{"id":"7560e5e8.ee7dfc","type":"ui_tab","name":"Préhension SELFIT","icon":"dashboard","order":4,"disabled":false,"hidden":false},{"id":"4573d59d.1d525c","type":"ui_tab","name":"Schedule","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"98d52966.1afc88","type":"ui_tab","name":"MYTAB","icon":"dashboard","disabled":false,"hidden":false},{"id":"1c81a733.812339","type":"ui_tab","name":"BUTTONS","icon":"dashboard","disabled":false,"hidden":false},{"id":"6552db9.7336924","type":"ui_tab","name":"Table","icon":"dashboard","disabled":false,"hidden":false},{"id":"7dcc246f.ee661c","type":"ui_tab","name":"TEST","icon":"dashboard","order":12,"disabled":false,"hidden":false},{"id":"50130141.d940f","type":"function","z":"35ed6fc.5739c9","name":"","func":"// Get the current value of the 'claw' context property - default to 0\nvar called_number = flow.get(\"called_number\")||1;\nvar guichet_number = msg.topic;\n\n\nif (msg.payload === \"RESET\") {\n // set its value locally\n called_number= 0;\n} else if (msg.payload === \"INCREMENT\") {\n called_number++;\n} else if (msg.payload === \"DECREMENT\") {\n called_number--;\n}\n else if (msg.payload === \"RECALL\") {\n called_number = called_number;\n}\n else if(0 <= msg.payload < 1000){\n called_number = msg.payload;\n}\n\n// Save the new value back to context so it will be available next time\nflow.set('called_number',called_number);\n//flow.set('guichet_number',guichet_number);\n\nmsg.payload = called_number;\nmsg.topic = guichet_number;\nvar vocal_stream = [called_number, guichet_number];\naudio = vocal_stream.join( \" \" );\naudio_out = String(audio);\nmsg.out3= audio_out;\n\nreturn [msg,msg,msg];\n","outputs":3,"noerr":0,"initialize":"","finalize":"","x":451.5,"y":232,"wires":[["96afe138.e56d4"],[],[]]},{"id":"77aa379f.a39c38","type":"ui_button","z":"35ed6fc.5739c9","name":"Dashboard button","group":"8b749e36.3178c","order":1,"width":"6","height":"2","passthru":true,"label":"NEXT","tooltip":"","color":"","bgcolor":"GREEN","icon":"","payload":"INCREMENT","payloadType":"str","topic":"1","topicType":"str","x":190,"y":200,"wires":[["50130141.d940f"]],"info":"** NEXT_ NEXT_**"},{"id":"ab3e689f.f99c48","type":"ui_button","z":"35ed6fc.5739c9","name":"with inject trigger","group":"8b749e36.3178c","order":1,"width":"6","height":"2","passthru":true,"label":"NEXT","tooltip":"","color":"","bgcolor":"GREEN","icon":"","payload":"INCREMENT","payloadType":"str","topic":"1","topicType":"str","x":190,"y":260,"wires":[["50130141.d940f","14f642a0.6b9aed"]],"info":"** NEXT_ NEXT_**"},{"id":"2d63de52.799d12","type":"inject","z":"35ed6fc.5739c9","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"50","payloadType":"str","x":90,"y":340,"wires":[["ab3e689f.f99c48"]]},{"id":"96afe138.e56d4","type":"ui_template","z":"35ed6fc.5739c9","group":"3d9e45e.bcd50ba","name":"","order":1,"width":0,"height":0,"format":"\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n* {\n box-sizing: border-box;\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: auto auto auto ;\n grid-gap: 10px;\n background-color:gray; /*#2196F3;*/\n padding: 10px;\n}\n\n.grid-container > div {\n background-color: rgba(255, 255, 255, 0.8);\n text-align: center;\n padding: 20px;\n font-size: 60px;\n}\n\n\n</style>\n</head>\n<body>\n\n<h1 id =\" welcome\">Main Interface</h1>\n\n\n\n<div class=\"grid-container\">\n <div class=\"item1\">Sender</div>\n <div class=\"item2\">Number</div>\n <div class=\"item3\">Real time and date </div> \n <div class=\"item4\">{{msg.topic}}</div>\n <div class=\"item5\">{{msg.payload}}</div>\n <div class=\"item6\">Free text </div> \n <div class=\"item7\">Topic 2</div>\n <div class=\"item8\">Payload 2</div>\n <div class=\"item9\">Free text </div>\n <div class=\"item10\">Topic 3</div>\n <div class=\"item11\">Payload 3</div>\n <div class=\"item12\">Free text</div>\n</div>\n\n\n\n\n<script>\n <script>\n var x = document.getElementById(\"item5\");\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n var x = document.getElementsByClassName(\"item5\");\n var y = document.getElementsByClassName(\"item4\");\n \n x.setAttribute('src', msg.payload);\n x.setAttribute('src', msg.topic);\n x.style.backgroundColor = \"red\";\n $(\"#my_\"+scope.$id).html(msg.payload);\n }\n });\n})(scope)\n \n\n</script>\n\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":720,"y":180,"wires":[[]]},{"id":"14f642a0.6b9aed","type":"debug","z":"35ed6fc.5739c9","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":430,"y":380,"wires":[]}]
Ouch... @Hichem please go back and edit your post with a properly formatted flow... using the </> icon in the forum editor (NOT using the < ... /> characters as you have apparently done 
)
Click the icon and paste the flow where it says ...
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
