Template node send advanced data

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

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.

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

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.

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

2 Likes

thanks for your help!

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