Fill tables in the template ui using input messages

Dashboard
1

Hello Team!
Please, I have a puzzle that requires your expertise. I've been working on a small project to supervise my Gensets here in the power house.
Everything is moving well, but am stocked with the alarm system.
I want to display incoming alarms in a table format using the template ui node. As seen here in the image below,

image
image1258×636 20.7 KB

I want a new row to be created every time there is an active alarm. I'll also like to differentiate between active and inactive alarms using background colors. For example, when an alarm is active, the background color is red and when that same alarm is inactive (after being mute by the operator), its background color changes to white.
I don't want empty rows to be created as shown here below
image
image1376×698 21.8 KB

I prefer only filled rows to be displayed as shown in the first image above.
Please any help on this will be highly received.
Thanks

2

Hi, does this relate to Dashboard 1, Dashboard 2, http-in/http-response, or UIBUILDER?

3

Dashboard 2

4

Moved to the right category/tag

5

In VueJS (the library we use in UI Templates), you can use a v-for to loop over a given number of data points.

We have an example of a custom table here in our documentation, which should be a good starting point.

To handle new alarms, I'd look at "Option 2" here which shows how you can add a custom event listener, in your handler, you could append to a this.myData on the template, where the table then does a v-for over that myData variable.