# Access msg object in dashboard ui\_template **URL:** \ **Category:** Dashboard\ **Created:** [5 December 2018 14:24 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502 "2018-12-05T14:24:33Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![JayGhb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayghb/32/5550_2.png) [@JayGhb](https://discourse.nodered.org/u/JayGhb)\ **Post date:** [5 December 2018 14:24 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/1 "2018-12-05T14:24:33Z")
Hi, I have implemented a Google Maps interface using ui\_template node with some functionality. Next step for me is to load the markers from a database, as they are currently hardcoded. I figured that this would be possible if I trigger a query everytime the "Maps" tab is refreshed. However the template code will not "run" after a ```auto var len = msg.payload.length ``` command, neither can I access the ```auto msg.payload[0].lat msg.payload[0].lng ``` as they are returned from the query. I am posting the necessary nodes from the flow + a screenshot from the db returned items below. Please note that a Gmaps API key is necessary for the script to work (bottom of the code). **If you don't have one,** it would be equally good if you could just tell me how to access the msg object from within the ui\_template node. Thank you in advance EDIT: I've already tried to include everything in ```auto (function(scope) scope.$watch('msg',function(msg){ . . . })(scope); ``` ```auto [{"id":"5be741bd.6e203","type":"ui_template","z":"ba566a8f.bd7bc8","group":"10ede6b0.919749","name":"Map","order":0,"width":"27","height":"16","format":"\n\n \n My Map\n \n \n \n \n \n \n \n\n \n\n
\n \n
    \n
  1. Sensor1
    2. \n
  2. Sensor2
    3. \n
  3. Sensor3
    4. \n
  4. Sensor4
    5. \n
  5. Sensor5
    6. \n
\n
    \n
  1. Sensor1
    2. \n
  2. Sensor2
    3. \n
  3. Sensor3
    4. \n
  4. Sensor4
    5. \n
\n
    \n
  1. Sensor1
    2. \n
  2. Sensor2
    3. \n
  3. Sensor3
    4. \n
\n
    \n
  1. Sensor1
    2. \n
  2. Sensor2
    3. \n
\n \n\n \n \n \n \n \n \n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":571.1000366210938,"y":582.6000366210938,"wires":[["34d604c0.d80f5c","8e105e9d.1d75d","83a41ec1.a12f8"]]},{"id":"34d604c0.d80f5c","type":"debug","z":"ba566a8f.bd7bc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":474,"y":490,"wires":[]},{"id":"3b392773.a32f08","type":"mysql","z":"ba566a8f.bd7bc8","mydb":"cca3b54f.41e9a8","name":"","x":417,"y":582,"wires":[["b911ee3e.14aea","5be741bd.6e203"]]},{"id":"6558677c.4475a8","type":"function","z":"ba566a8f.bd7bc8","name":"pin query","func":"msg.topic=\"SELECT * FROM pins\";\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":605,"wires":[["3b392773.a32f08"]]},{"id":"138f13a8.59c3fc","type":"link in","z":"ba566a8f.bd7bc8","name":"","links":["80cbf799.5988a8","83a41ec1.a12f8"],"x":162,"y":569,"wires":[["6558677c.4475a8"]]},{"id":"b911ee3e.14aea","type":"debug","z":"ba566a8f.bd7bc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":267,"y":469,"wires":[]},{"id":"83a41ec1.a12f8","type":"link out","z":"ba566a8f.bd7bc8","name":"","links":["138f13a8.59c3fc"],"x":589,"y":648,"wires":[]},{"id":"10ede6b0.919749","type":"ui_group","z":"","name":"Map","tab":"511291be.008a","disp":false,"width":"27","collapse":false},{"id":"cca3b54f.41e9a8","type":"MySQLdatabase","z":"","host":"127.0.0.1","port":"3306","db":"maps","tz":""},{"id":"511291be.008a","type":"ui_tab","z":"","name":"Map","icon":"map"}] ``` ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4d3be398ae0380637e5ba81b2710a7bef1ae8447.png) ---
**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\ **Post date:** [5 December 2018 16:22 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/2 "2018-12-05T16:22:13Z")
Did you try: `var len = {{msg.payload.length}}` ? same applies to the properties: ```auto {{msg.payload[0].lat}} {{msg.payload[0].lng}} ``` ---
**Author:** ![JayGhb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayghb/32/5550_2.png) [@JayGhb](https://discourse.nodered.org/u/JayGhb)\ **Post date:** [5 December 2018 16:33 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/3 "2018-12-05T16:33:31Z")
Thanks for your answer. Yes I have. However this does not work in \ tags ---
**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\ **Post date:** [5 December 2018 18:28 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/4 "2018-12-05T18:28:56Z")
And this? $scope.msg.id $scope.msg.lat $scope.msg.lng $scope.msg.position ---
**Author:** ![JayGhb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayghb/32/5550_2.png) [@JayGhb](https://discourse.nodered.org/u/JayGhb)\ **Post date:** [6 December 2018 08:27 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/5 "2018-12-06T08:27:12Z")
Thanks krambriw. To use that I have to wrap the necessary part in function(scope) etc (?) Whenever I wrap something in ```auto (function(scope){ scope.$watch('msg',function(){ ... }) })(scope) ``` the map in the dashboard template does not even render. Most likely I am typing something the wrong way because that seems to be the answer everywhere I looked. Can someone please provide me with a working simple example of pushing a msg, with the structure given in the screenshot, into a dashboard template node and output from the ui\_templ just the msg.payload[0].lat or something? It would be just what I need. Jason EDIT: output it with code in \ tags ---
**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\ **Post date:** [6 December 2018 09:32 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/6 "2018-12-06T09:32:24Z")
Well, this example works if you put it into a ui\_template node and sends a json payload to the same ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/aef8e45abe85df73b7b9dedbb41f8dd55441d53e.png) Example (I did put it into an inject node) ```auto {"id":1,"lat":51.59,"lng":-2.4,"position":"UK"} ``` ```auto ``` But to make it work; I keep the dashboard page open where the ui\_template node is placed. I suppose that is the intention, you would like to update a dashboard with the values? ---
**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\ **Post date:** [6 December 2018 12:41 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/7 "2018-12-06T12:41:32Z")
just checking you are aware of the node-red-contrib-web-worldmap node that can do maps in the dashboard. ---
**Author:** ![JayGhb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayghb/32/5550_2.png) [@JayGhb](https://discourse.nodered.org/u/JayGhb)\ **Post date:** [6 December 2018 13:51 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/8 "2018-12-06T13:51:21Z")
Hello dceejay, yes I am however its description states that markers and other elements on it are not clickable yet and attaching actionlisteners to markers is essential for my application. ---
**Author:** ![JayGhb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayghb/32/5550_2.png) [@JayGhb](https://discourse.nodered.org/u/JayGhb)\ **Post date:** [6 December 2018 13:55 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/9 "2018-12-06T13:55:34Z")
Thank you krambriw, your answer pointed me to the right direction for what I wanted! The trick was executing the ```auto initMap(data) ``` google maps callback function in place of your " update(data) ". Then I could normally access the msg returned from the query like ```auto for (var a = 0; a < data.length; a++) { var tmpLat = data[a].lat; var tmpLng = data[a].lng; var marker = _newGoogleMapsMarker({ _map: map, _lat: tmpLat, _lng: tmpLng }); } ``` ---
**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\ **Post date:** [6 December 2018 15:52 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/10 "2018-12-06T15:52:32Z")
Ah that was soooo yesterday.. I think they are now 🙂 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5c01d300321ada206c89a798127192bf35df2b3f.png) ---
**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\ **Post date:** [25 February 2019 22:50 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/11 "2019-02-25T22:50:26Z")
Apologies if I'm muddying an existing thread but I have a related question on this topic: @krambriw I've been researching this for a while now and am missing something very basic I suspect. How can I access the payload in the script block in a UI\_template node? ie. ```auto ``` ---
**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\ **Post date:** [26 February 2019 06:34 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/12 "2019-02-26T06:34:51Z")
Hi, not sure if you have a question or if you already solved the issue. Anyway, based on my previous example, this is how you can access the payload and assign values to other variables in the script Lets assume, you send a javascript object {"name":"jmacle"} as payload to the ui\_template node In the template node, the script captures the payload, sends it further to the debug node then extracts the "name", assigns it to you new variable bleh, and sends the value of bleh to the debug node As soon as you have assigned the value to bleh, you can do whatever is required, basically just extend the function otherStuff Hope this helped you ```auto ``` ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9282ec5dcdb0d9988e8d1b6689d089260de0ed1a.png) `[{"id":"20cb4ed7.366822","type":"ui_template","z":"d01d2553.fd9838","group":"16fdc5e1.9ee0fa","name":"","order":0,"width":0,"height":0,"format":"\n\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":940,"y":380,"wires":[["e5bfeff6.d88e2"]]},{"id":"4e748181.57245","type":"inject","z":"d01d2553.fd9838","name":"","topic":"","payload":"{\"name\":\"jmacle\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":880,"y":290,"wires":[["20cb4ed7.366822"]]},{"id":"e5bfeff6.d88e2","type":"debug","z":"d01d2553.fd9838","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1040,"y":460,"wires":[]},{"id":"16fdc5e1.9ee0fa","type":"ui_group","z":"","name":"Buttons","tab":"8f57f520.e87078","order":1,"disp":false,"width":"6","collapse":false},{"id":"8f57f520.e87078","type":"ui_tab","z":"","name":"Some buttons","icon":"dashboard","order":1}]` ---
**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\ **Post date:** [26 February 2019 21:19 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/13 "2019-02-26T21:19:28Z")
No I hadn't solved it yet but now with your help it is working! Much appreciated @krambriw I am however confused on how it is handling the msg.payload value. With the first section: ```auto // Watch the payload and update (function(scope) { scope.$watch('msg.payload', function(data) { update(data); }); })(scope); ``` What is actually happening here? Is the payload being retrieved by the scope.watch? And then the update() function stores it in a variable? Just trying to wrap my head around this. And thanks again for your help. ---
**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\ **Post date:** [27 February 2019 04:58 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/14 "2019-02-27T04:58:47Z")
> [@jmacle](#): > > What is actually happening here? This is javascript, using the watch method. I think it is pretty good explained in the link below. So in our case, we are watching for a property (msg.payload) to be assigned a new value. When this happens, the specified function will be called (update) with the payload as parameter and then the next call to otherStuff will be called In this way you can watch other properties (msg, msg.topic, msg.whatever etc). The scope in this case I believe is related to the dashboard internals, it's anyway how you have to watch for changes when you are in a ui\_template, it is described in the info for the node, cannot explain and do not know the inner details [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Object/watch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch) ---
**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\ **Post date:** [27 February 2019 10:28 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/15 "2019-02-27T10:28:18Z")
I can't possibly add better examples than the ones already given but can share a couple of links from my bookmark. > **[Node-RED Dashboard Template Examples (AngularJS)](https://it.knightnet.org.uk/kb/nr-qa/dashboard-template-examples/)** > > Some examples of using AngularJS with the Node-RED Dashboard. > Not all features of Angular are accessible via the Dashboard. > ---
**Author:** ![andor](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@andor](https://discourse.nodered.org/u/andor)\ **Post date:** [16 January 2020 14:16 UTC](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/16 "2020-01-16T14:16:22Z")
Hi guys, sorry for commenting on this topic after one year: I am a little bit confused, since the linked reference ([javascript:watch object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch)) is claiming, that you should not use the watch object since it is not supported by any current browser anymore. Does this recommendation not apply to the ui\_template node? Is there any other way how to get the msg.payload object into a script block within an ui\_template?