# Ui template // Send msg.topic from button click

**URL:** <https://discourse.nodered.org/t/ui-template-send-msg-topic-from-button-click/21786>\
**Category:** Dashboard\
**Created:** [16 February 2020 12:17 UTC](https://discourse.nodered.org/t/ui-template-send-msg-topic-from-button-click/21786 "2020-02-16T12:17:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![node-n00b](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@node-n00b](https://discourse.nodered.org/u/node-n00b)\
**Post date:** [16 February 2020 12:17 UTC](https://discourse.nodered.org/t/ui-template-send-msg-topic-from-button-click/21786/1 "2020-02-16T12:17:04Z")

</div>

Hy community,

im struggling long time now with this:  
I want to do my own task/shopping list using node red and sqlite.  
So far:

- Sqlite works.
- Feeding through dashboard works.
- Doing select statemnts to show specific tagged tasks work.
- Closing tasks in ui template does not work (see below).

In each column of a table there is a button. When clicked, the task with a specific id shall be set to "done".  
But it doesnt work.. my html/javascript is not the best, Any suggestions?

ui template:

```auto
<h>{{msg.listshown}}</h>
<table style="width:100%">
  <tr>
    <th>id</th> 
    <th>task</th> 
    <th>duedate</th> 
    <th>status</th>
  </tr>
  <tr ng-repeat="x in msg.payload | limitTo:50">
    <td>{{msg.payload[$index].id}}</td>
    <td>{{msg.payload[$index].task}}</td>
    <td>{{msg.payload[$index].duedate}}</td> 
    <td> <button onclick="CloseTask()">done</button> </td>
  </tr>
</table>

<script>
function CloseTask() 
{
msg.topic="UPDATE rtm SET status = 'DONE' WHERE id = '" + {{msg.payload[$index].id}} + "'";
return msg;
}
</script>

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 February 2020 14:06 UTC](https://discourse.nodered.org/t/ui-template-send-msg-topic-from-button-click/21786/2 "2020-02-16T14:06:27Z")

</div>

Try this (first make a copy of your existing ui\_template)  
change the `ui_template` to this

```auto
<h>{{msg.listshown}}</h>
<table style="width:100%">
  <tr>
    <th>id</th> 
    <th>task</th> 
    <th>duedate</th> 
    <th>status</th>
  </tr>
  <tr ng-repeat="x in msg.payload">
    <td>{{x.id}} </td>
    <td>{{x.task}} </td>
    <td>{{x.duedate}} </td> 
    <td> <md-button ng-click="send({payload:x.id})">
    done
        </md-button></td>
  </tr>
</table>

```

and un-click the `Pass through messages from input.` and `Add output messages to stored state.' options

This will return the `id` in msg payload and then you could use a `template` node to build the sql you need.

---

<div class="post-metadata">

**Author:** ![node-n00b](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@node-n00b](https://discourse.nodered.org/u/node-n00b)\
**Post date:** [17 February 2020 05:14 UTC](https://discourse.nodered.org/t/ui-template-send-msg-topic-from-button-click/21786/3 "2020-02-17T05:14:02Z")

</div>

Thanks, Zenofmud! It works!

Thank you for your support, regards, node-n00b

---

<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:** [18 March 2020 05:14 UTC](https://discourse.nodered.org/t/ui-template-send-msg-topic-from-button-click/21786/4 "2020-03-18T05:14:05Z")

</div>

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