How can i pass array from flow to UI template

Hey there,

I use a template node to generate a table in my dashboard. The msg.payload is prepared by me beforehand as a string (see pic 1 right side). The html source text for the table is contained in the string. I do that because the length of the table and its content depends on a SQL selection. It works the way it is.

I'm just wondering if there isn't a better / more elegant solution to achieve the same result. So I started to try to transfer the data array from the database to the ui template. Unfortunately this has been unsuccessful until now. Can someone help me with the problem or has experience with it?

Yes, there is a more elegant solution. :grinning:

First, you don't need to put a complete HTML page into the template node, just the elements you want to display.

For the table you can use standard Angular directives, like ng-repeat. Here's an example of a simple table displaying an array of event objects.

This is the sole content of the ui-template node:

<table class="table">
    <tr>
        <th style="width:10em;">Time</th>
        <th>Message</th>
    </tr>
    <tr ng-repeat="event in msg.payload">
        <td>{{::event.timestamp | date:'MM-dd HH:mm:ss'}}</td>
        <td>{{::event.message}}</td>
    </tr>
</table>

The template node should be fed with the actual data, not a HTML string. So just pass your message with the payload set to an array of objects.

crazy! :smiley:
thank you, that will make the code much more elegant!

1 Like

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