In nodered how to add button using uitemplate

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>"

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

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.

1 Like

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:

    <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). Can you advise pls?