# How to pass msg.payload to \<script\>\</script\> in template node of node-red-dashboard 3.6.5?

**URL:** <https://discourse.nodered.org/t/how-to-pass-msg-payload-to-script-script-in-template-node-of-node-red-dashboard-3-6-5/89255>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node, dashboard\
**Created:** [4 July 2024 07:35 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-script-script-in-template-node-of-node-red-dashboard-3-6-5/89255 "2024-07-04T07:35:30Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [4 July 2024 09:19 UTC](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-script-script-in-template-node-of-node-red-dashboard-3-6-5/89255/7 "2024-07-04T09:19:32Z")

</div>

You would use the second example in the side bar help for ui-template. You can then watch for incoming msg.payload.  
Example template. No html or body tags requiredd

```auto
<style>
        .rectangle {
            position: relative;
            width: 1200px;
            height: 600px;
            background-color: lightgray;
            border: 1px solid #000;
        }
    
        .dot {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }
</style>

    <div class="rectangle">
        <div id="container"></div>
    </div>
    
<script>
    (function(scope) {
        scope.$watch('msg', function(msg) {
            if (msg.payload) {
                items = msg.payload// example [{"x":67,"y":12},{"x":12,"y":30}]
                // Get the container element
                let container = document.getElementById('container');

                // Loop through the array and create divs
                items.forEach(item => {
                    // Create a new div element
                    let div = document.createElement('div');
    
                    // Set the class of the div
                    div.className = 'dot';
    
                    // Set the position of the div
                    div.style.left = `${item.x}px`;
                    div.style.top = `${item.y}px`;
    
                    // Append the div to the container
                    container.appendChild(div);
                });
            }
        });
    })(scope);
</script>

```

---

_[View the full topic](https://discourse.nodered.org/t/how-to-pass-msg-payload-to-script-script-in-template-node-of-node-red-dashboard-3-6-5/89255)._