# In nodered how to add button using uitemplate

**URL:** <https://discourse.nodered.org/t/in-nodered-how-to-add-button-using-uitemplate/7734>\
**Category:** General\
**Created:** [8 February 2019 09:25 UTC](https://discourse.nodered.org/t/in-nodered-how-to-add-button-using-uitemplate/7734 "2019-02-08T09:25:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [8 February 2019 09:25 UTC](https://discourse.nodered.org/t/in-nodered-how-to-add-button-using-uitemplate/7734/1 "2019-02-08T09:25:16Z")

</div>

In node-red how to add button using uitemplate. I want to add button and header above the table but I am not able to add.

```
console.log('length is-------->'+msg.payload.content.length);
msg.template="<style>h4 { text-align: center; margin: 10px; }";
msg.template=msg.template+"table { width: 100%; height:100% margin-top: 10px; }";
msg.template=msg.template+"th{padding: 8px; text-align: left; border-bottom: 1px solid #ddd; background-color: #000000; width: 50%;color:white;}";
msg.template=msg.template+" td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; background-color: #111111; width: 50%;}";
msg.template=msg.template+".classifier {background-color: rgb(85,150,230);text-align: center;}";
msg.template=msg.template+".title { background-color:LightGrey;}</style>";

msg.template=msg.template+"<table span=100%><tr><th>AlertId</th><th>AlertName</th><th>devicename</th><th>time</th><th>lattitude</th><th>longitude</th></tr>";

for (var i = 0; i < msg.payload.content.length; i++) {
  msg.template = msg.template + "<tr><td>" + msg.payload.content[i].id + "</td><td>" + msg.payload.content[i].alertname + "</td><td>" + msg.payload.content[i].devicename + "</td><td>" + msg.payload.content[i].time + "</td><td>" + msg.payload.content[i].lat+ "</td><td>" + msg.payload.content[i].lon + "</td></tr>";
}
msg.template = msg.template + "</table>"
```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [8 February 2019 18:19 UTC](https://discourse.nodered.org/t/in-nodered-how-to-add-button-using-uitemplate/7734/2 "2019-02-08T18:19:19Z")

</div>

> [@VIKRAMAS](#):
>
> In node-red how to add button using uitemplate. I want to add button and header above the table but I am not able to add.

There is an example on my blog that may be of use.

> **[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.

Also, assuming you are using at least Node.JS v8+, you can use ES6 "Template strings" also known as "template literals". You will find them a lot easier to work with when trying to create a complex string as you are.

Another alternative is to use a standard Node-RED html template node to build the html string. That can use mustache to integrate variables. You then pass it on to your Dashboard template node.

---

<div class="post-metadata">

**Author:** ![bbking78](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bbking78/32/19553_2.png) [@bbking78](https://discourse.nodered.org/u/bbking78)\
**Post date:** [13 March 2020 16:14 UTC](https://discourse.nodered.org/t/in-nodered-how-to-add-button-using-uitemplate/7734/3 "2020-03-13T16:14:38Z")

</div>

I checked your blog, but somehow I cant find my solution: I'm currently implementing a flow for a Yamaha speaker...I'd like to switch stations by clicking on a button and sending an url:

```auto
    <tr ng-repeat="(key, value) in msg.payload">
        <td><md-button ng-click="send({url: (value.url))">
            {{value.text}}
            </md-button>
            {{value.url}}
        </td>

```

somehow my (value.url) statement is not interpreted (tried on the replies in [https://stackoverflow.com/questions/17039926/adding-parameter-to-ng-click-function-inside-ng-repeat-doesnt-seem-to-work](https://stackoverflow.com/questions/17039926/adding-parameter-to-ng-click-function-inside-ng-repeat-doesnt-seem-to-work)). Can you advise pls?