# Set dashboard template msg.payload on-click

**URL:** https://discourse.nodered.org/t/set-dashboard-template-msg-payload-on-click/832
**Category:** Dashboard
**Created:** [15 June 2018 08:58 UTC](https://discourse.nodered.org/t/set-dashboard-template-msg-payload-on-click/832 "2018-06-15T08:58:23Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![anwarbashir](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anwarbashir/32/640_2.png) [@anwarbashir](https://discourse.nodered.org/u/anwarbashir)
#### Post date: [15 June 2018 08:58 UTC](https://discourse.nodered.org/t/set-dashboard-template-msg-payload-on-click/832/1 "2018-06-15T08:58:23Z")

</div>

On the dashboard template I am able to display a number a font-awesome icons. These will be used to send an instruction to an MQTT node to control a toy car (forward, back, left, right and stop).

I want to be able to click this icon and on-click the msg.payload should output some value or text that I set, how can I do this? So far I only have the icons and I am thinking that ng-click would be a good way forward but I am unsure how to implement it (tried ng-click = “msg.payload =100”). Can anyone assist?

```
<div ng-bind-html="msg.payload"></div>
<div>
<i ng-click="msg.payload = 100" class="fa fa-chevron-circle-up" style="font-size:48px;color:red"></i>
<br>
<i class="fa fa-chevron-circle-left" style="font-size:48px;color:red"></i>
<i class="fa fa-stop-circle" style="font-size:48px;color:red"></i>
<i class="fa fa-chevron-circle-right" style="font-size:48px;color:red"></i>
<br>
<i class="fa fa-chevron-circle-down" style="font-size:48px;color:red"></i>
</div>
```

---

<div class="post-metadata">

### 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: [15 June 2018 09:36 UTC](https://discourse.nodered.org/t/set-dashboard-template-msg-payload-on-click/832/2 "2018-06-15T09:36:32Z")

</div>

why not use the existing button widget set to size 1x1 ?

---

<div class="post-metadata">

### Author: ![anwarbashir](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anwarbashir/32/640_2.png) [@anwarbashir](https://discourse.nodered.org/u/anwarbashir)
#### Post date: [15 June 2018 09:44 UTC](https://discourse.nodered.org/t/set-dashboard-template-msg-payload-on-click/832/3 "2018-06-15T09:44:21Z")

</div>

It’s just that an icon is a better UI for the toy car function. BTW I think I have the solution to my own question, the following format for ng-click seems to do what I need

```
<button ng-click="send({payload: 'Hello World'})">
    Click me to send a hello world
</button>

<i ng-click="send({payload: 100})" class="fa fa-chevron-circle-left" style="font-size:48px;color:red"></i>
```

---

<div class="post-metadata">

### 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: [15 June 2018 09:50 UTC](https://discourse.nodered.org/t/set-dashboard-template-msg-payload-on-click/832/4 "2018-06-15T09:50:40Z")

</div>

you mean like this ? 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/baef19c38919f8fa93b730694a5fbdf0f540c3e3.png)

but no matter - glad you have it working