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