# Can make ui\_gauge clickable?

**URL:** <https://discourse.nodered.org/t/can-make-ui-gauge-clickable/75171>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node\
**Created:** [14 February 2023 11:31 UTC](https://discourse.nodered.org/t/can-make-ui-gauge-clickable/75171 "2023-02-14T11:31:16Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 February 2023 07:08 UTC](https://discourse.nodered.org/t/can-make-ui-gauge-clickable/75171/5 "2023-02-15T07:08:41Z")

</div>

So with the `ui_template` node

```auto
<script>
    (function(scope) { 
        
        const addListeners = function(){
            let clickables = $('.clickable')
            for(let i = 0;i<clickables.length;++i){
                clickables[i].addEventListener('click',(evt) => {
                    scope.send({payload:evt.currentTarget.getAttribute('node-id'),topic:'dashboard-element-clicked'})
                })
            }
        }

        setTimeout(addListeners,100)

    })(scope);
</script>

```

Then add `.clickable` class to all elements which you wont to be clickable.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93dff21889eb20b09c407de0bebacc9b8fb64b5d.png)

And the output of the `ui_template` will give the id of the clicked node  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/023d8acf479683d129b0b585e3d705cfe83caeee.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0b361bf79e543a0bcb58519701c59dfb5eba49b.png)

And then at server side you'll need to make some kind of logic which bounds node's id's with the data you need

---

_[View the full topic](https://discourse.nodered.org/t/can-make-ui-gauge-clickable/75171)._