Passing html code through moustache

Dashboard
1

I am trying to create a table that has to populate the headers based on a drop-down selection. The UI Template code for the table is as follows

<table class="GeneratedTable">
  <thead>
    <tr>
      <th><div align="left">SN:</div></th>
      <th><div align="left">Timestamp</div></th>
      {{msg.code}}

    </tr>
  </thead>
  
    <tr ng-repeat="row in msg.payload | limitTo:5000 ">
	<td>{{$index+1}}</td>
      <td><div align="left">{{row.timestamp}}</div></td>
      <td><div align="left">{{row.data1}}</div></td>
      <td><div align="left">{{row.data2}}</div></td>
    </tr>
  
</table>

the {{msg.code}} moustache is a string generated based on the dropdown selection, for example:

<th><div align="left">DATA1</div></th>
<th><div align="left">DATA2</div></th>

however it doesn't seem to populate the table header, the moustache code just appears above the table header. If I paste the above code the table is populated. Can someone let me know what I am doing wrong?

2

Try triple curly brackets (see the template node built-in help for why)

3

tried that just now, the table appeared as below

image
image1589×440 12.9 KB

here is the full code for UI template


<!-- CSS Code: Place this code in the document's head (between the 'head' tags) -->
<!-- CSS Code: Place this code in the document's head (between the 'head' tags) -->
<style>
table.GeneratedTable {
  width: 100%;
  background-color: #d1eaea;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #ffffff;
  border-style: solid;
  color: #000000;
}

table.GeneratedTable td, table.GeneratedTable th {
  border-width: 2px;
  border-color: #ffffff;
  border-style: solid;
  padding: 10px;
}

table.GeneratedTable thead {
  background-color: #9690ea;
}
</style>

<!-- HTML Code: Place this code in the document's body (between the 'body' tags) where the table should appear -->
<table class="GeneratedTable">
  <thead>
    <tr>
      <th><div align="left">SN:</div></th>
      <th><div align="left">Timestamp</div></th>
      {{{msg.code}}}

    </tr>
  </thead>
  
    <tr ng-repeat="row in msg.data | limitTo:5000 ">
	<td>{{$index+1}}</td>
      <td><div align="left">{{row.timestamp}}</div></td>
      <td><div align="left">{{row.data1}}</div></td>
      <td><div align="left">{{row.data2}}</div></td>
    </tr>
  
</table>
<p>{{msg.clear}}</p>
<!-- Codes by Quackit.com -->
4

Add a debug node just before the template g show us what is inside msg.code

5

Wait, i missed the fact you were using a ui-template. Mustache syntax is only supported in the template node. You can generate the HTML in a regular template and pass it to a ui-template using msg.template (its in the the built in help)

6

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