Custom HTML Table - Context Tags

Help
1

I’ve created some custom HTML tables, successfully using context variables and device tags.

I’m now stuck trying to use a context variable tag, to label a column. I think the issue is my trying to use the tag in the Body, rather than the Head content. I’m hoping you can assist?

In my Head content, I can populate the rows of data using this code in a loop:

<tr>
              <td>${moment(point.time).format('DD MM YYYY')}</td>
              <td>${DashboardBlock.input.ctx["deviceId-0"].tags.SN["0"]}</td>
              <td>${DashboardBlock.input.ctx["deviceId-0"].name}</td>
              <td>${input.queries.float1[i].value.toFixed(3)}</td>
              </tr>

However when I try to use the same tag to label a column in the Body content the lookup doesn’t work:

<thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">SN</th>
        <th scope="col">Name</th>
        <th scope="col">${DashboardBlock.input.ctx["deviceId-0"].tags.SN["0"]}</th>
      </tr>
    </thead>
2

I believe the issue is that your first snippet is being executed in JavaScript and your second snippet is not. The Body content is plain HTML, so those template literals won’t be evaluated.

A possible solution is to give the column header element an ID, which you can then reference and populate in the JavaScript code:

Body content:

<thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">SN</th>
        <th scope="col">Name</th>
        <th scope="col" id="tag_column"></th>
      </tr>
</thead>

Then, in the Head content, in the same function with the loop that’s populating the rows, you can set that element’s value:

document.getElementById('tag_column').innerHTML = DashboardBlock.input.ctx["deviceId-0"].tags.SN["0"];
1 Like