Template node send advanced data

[RogierQ]

I have done it before but no way i can do it again...

What i wish to do is use the template to display a webpage.
this works perfect
then when i want to send external data with {{msg.payload}} it works to, like this:

<td width="7%" class="flights">msg.flight1</td>

but what i want to do is send the whole line
including the width and class parameters

What is the trick to do this?

i tried to put more code examples but the " and ` give lat of troubles because they tried to make html from it

[zenofmud]

Have you tried coding the html in msg.flight? lets say currently msg.flight is "Hello World" so instead of passing that into the template where you have
<td width="7%" class="flights">msg.flight1</td>
you set
msg.flight1='<td width="7%" class="flights">Hello World</td>'
and in the template node just use:
msg.flight1

Note: I haven't tried this, so it may or may not work.

[RogierQ]

jup i did and that just shows msg.flight1
but i thought there was a setting to do it correct

[zenofmud]

You know you could use an external file

Using msg.template :
You can also define the template content via msg.template , so you can use external files for example.
Template will be reloaded on input if it has changed.
Code written in the Template field will be ignored when msg.template is present.

[shrickus]

I believe you are running into Angular's logic that tries to "cleanse" the substituted variables... this keeps nefarious <script> tags and other elements from being inserted into the rendered page.

You can disable that (somewhat) by adding the ng-bind-html attribute to a container, and then inserting the chunk of html text directly from the msg.payload or other field, like so:

<div ng-bind-html="msg.payload"></div>

or, for you specific example, try this:
<tr ng-bind-html="msg.flight1></tr>

and send the entire line of html including the <td> ... </td> tags -- which is not very useful if you plan on showing more than 1 row in your table.

So you have a couple options for generating an entire table of html rows: use the core template node and Mustache iteration to render an array of row data as plain html source:

<table>
{{#flights}}
    <tr>
        <td width="7%" class="flights">{{flight_no}}</td>
        <td>{{departure}}</td>
        <td>{{est_arrival}}</td>
    </tr>
{{/flights}}
</table>

Assuming you pass an array of flight "objects" with those properties, it will render 1 table row for each object in the array -- pass that rendered html to the <div> example above and it should draw the whole table for you.

Another option is to use the ui_template dashboard node, with Angular's ng-repeat attribute to iterate over the rows of data directly inside the browser, something like this:

<table>
    <tr ng-repeat="flight in msg.flights">
        <td width="7%" class="flights">{{flight.flight_no}}</td>
        <td>{{flight.departure}}</td>
        <td>{{flight.est_arrival}}</td>
    </tr>
</table>

Hope this helps...

[RogierQ]

thanks for your help!