# Difference between Dashboard's button and inject node

**URL:** <https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [10 September 2021 22:22 UTC](https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875 "2021-09-10T22:22:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hichem](https://avatars.discourse-cdn.com/v4/letter/h/c67d28/32.png) [@Hichem](https://discourse.nodered.org/u/Hichem)\
**Post date:** [10 September 2021 22:22 UTC](https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875/1 "2021-09-10T22:22:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [10 September 2021 22:35 UTC](https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875/2 "2021-09-10T22:35:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [11 September 2021 08:21 UTC](https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875/3 "2021-09-11T08:21:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Hichem](https://avatars.discourse-cdn.com/v4/letter/h/c67d28/32.png) [@Hichem](https://discourse.nodered.org/u/Hichem)\
**Post date:** [11 September 2021 23:08 UTC](https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875/4 "2021-09-11T23:08:08Z")

</div>

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:

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [11 September 2021 23:25 UTC](https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875/5 "2021-09-11T23:25:38Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b7aefa7c8ad429126aa3edd4d80e9e01d5a464e.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 October 2021 23:25 UTC](https://discourse.nodered.org/t/difference-between-dashboards-button-and-inject-node/50875/6 "2021-10-11T23:25:54Z")

</div>

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