# How to Change the Background Color of a Group in Node-RED Dashboard Based on Test Results?

**URL:** <https://discourse.nodered.org/t/how-to-change-the-background-color-of-a-group-in-node-red-dashboard-based-on-test-results/82867>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [15 November 2023 07:39 UTC](https://discourse.nodered.org/t/how-to-change-the-background-color-of-a-group-in-node-red-dashboard-based-on-test-results/82867 "2023-11-15T07:39:59Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 November 2023 10:43 UTC](https://discourse.nodered.org/t/how-to-change-the-background-color-of-a-group-in-node-red-dashboard-based-on-test-results/82867/2 "2023-11-15T10:43:03Z")

</div>

This might help you. Take a look at this project I created quite awhile ago

> [@'ET Display Home' a flow to help manage your ESPeasy, Sonoff/Tasmota and Homie flashed devices (now on GitHub)](https://discourse.nodered.org/t/et-display-home-a-flow-to-help-manage-your-espeasy-sonoff-tasmota-and-homie-flashed-devices-now-on-github/1893):
>
> This project is designed to help you keep your Wemos and Sonoff devices under control by providing a dashboard with a link to the latest ESPeasy ano/or Sonoff Tasmota release, the node name, status, current software version (devices with older versions are hi-lighted), The current RSSI value, a link to each online device's configuration page and other infomation that will seem reasonable to provide. The project uses two tables in an SQLite database and is designed that, i…

the 'magic' is done in a `ui-template` node with this code:

```auto
<div id="et_home">
<h2 style="text-align: center;">ET Display Home {{msg.etdh_version}}</h2>
<p style="text-align: center;">ESPeasy current release: <a href="https://github.com/letscontrolit/ESPEasy/releases/download/{{msg.esp_release}}/ESPEasy_ESP82xx_{{msg.esp_release}}.zip" target="_blank">{{msg.esp_release}}</a> (click to download)</p>
<p style="text-align: center;">Tasmota current release: <a href="https://github.com/arendst/Tasmota-firmware/raw/main/release-firmware/tasmota/tasmota-display.bin" target="_blank">{{msg.tas_release}}</a> (click to download)</p>

<br/>
<table id="table" border="1">
    <tr>
        <th>Node Name</th> 
        <th>Node Status</th> 
        <th>Last Seen</th> 
        <th>Version</th>
        <th>RSSI</th>
        <th>Uptime</th>
        <th>Last boot cause</th>
        <th>Free RAM</th>
        <th>IP</th>
    </tr>
    <tbody style="text-align: center">
        <tr ng-repeat="x in msg.payload">
            <td ng-if="x.node_status == 'database is empty'" class="warning_red" >DATABASE IS EMPTY</td>
 
            <td ng-if='x.node_status == 1' class="device_online" >{{x.node_name}}</td>
            <td ng-if='x.node_status == 0' class="device_offline">{{x.node_name}}</td>
            
            <td ng-if='x.node_status == 1' class="device_online" >On Line </td>
            <td ng-if='x.node_status == 0' class="device_offline" >Off Line</td>
            
            <td ng-if='x.node_status == 1' class="device_last_seen" >{{x.last_seen}} </td>
            <td ng-if='x.node_status == 0' class="device_last_seen" >{{x.last_seen}} </td>

            
            <td ng-if="(x.firmware_type == 'espeasy' && x.firmware_build == msg.esp_release)" class="device_online"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'espeasy' && x.firmware_build != msg.esp_release)" class="warning_color"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'tasmota' && x.firmware_build == msg.tas_release)" class="device_online"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'tasmota' && x.firmware_build != msg.tas_release)" class="warning_color"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'homie' && x.firmware_build == msg.hom_release)" class="device_online"> {{x.firmware_build}} </td>
            <td ng-if="(x.firmware_type == 'homie' && x.firmware_build != msg.hom_release)" class="warning_color"> {{x.firmware_build}} </td>
             
            <td ng-if='x.node_status == 1' > {{x.rssi}} </td>
            <td ng-if='x.node_status == 0' >- - -</td>
            
            <td ng-if='x.node_status == 1' > {{x.uptime}} </td>
            <td ng-if='x.node_status == 0' >- - - - -</td>
            
            <td ng-if='x.node_status == 1' > {{x.last_boot_cause}} </td>
            <td ng-if='x.node_status == 0' >- - - - - - -</td>
            
            <td ng-if='x.node_status == 1' > {{x.free_ram}} </td>
            <td ng-if='x.node_status == 0' >- - - - -</td>
            <td>
                <a href="http://{{x.ip}}" target="_blank"> {{x.ip}} </a>
            </td>
        </tr>
    </tbody>
</table>

</div>

```

So the way it works is that each device is an object which contains node\_status. The node\_status determines the color in the table.

 ![Screenshot 2023-11-15 at 5.42.04 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/754e665d0c62745f77d50e4aca6356556d120dfe.png)

Hopefully this will help you out.

---

_[View the full topic](https://discourse.nodered.org/t/how-to-change-the-background-color-of-a-group-in-node-red-dashboard-based-on-test-results/82867)._