Best way to reflect Thing status in UI?

I’m currently running OH 4.3.8 via docker image on Raspbian.

I’d like to make some UI elements sensitive to thing status, i.e., change a CSS style if the thing a switch is linked to is not ONLINE. The approach I’ve come up with is to have an item updated by a trigger on the Thing Status and use that to drive the style. Many of these already have custom widgets, so I can incorporate another item as a parameter to the widget, but I could possibly pass a widget ID instead of an item directly to the widget and then incorporate JS to check the Thing state in a CSS expression.

The first is cleaner widget code at the expense of creating additional items and rules to sync them, but the second seems like the CSS expression would be cumbersome, if it can even be done.

Ideally, this would happen all over the UI – things happen and classes of devices go offline (a USB stick goes offline, an external service (like Ecobee) is down, etc., etc.

Even cooler would be to be able to query an item to get the state of devices it’s linked to.

(this was inspired by my current ZWave troubleshooting)

I’m going with option 1; the doc doesn’t show any way to access Things in widget expressions

A general rule that can be triggered by a staus change of any Thing we want to track:

// Assuming an item named as the thingUID with : replace with _
// zwave:device:f6d34df4:node23   => zwave_device_f6d34df4_node23

// To track a Thing's status:
// * Create an item named after the thing, replace ':'  with '_'
// * Add that thing to the If section for this rule.
// The code below will detech which thing triggered it, and find the corresponding item and update it with the thing's status

// TODO -- improve error handling

var thingUID = (event.thingUID).toString(); // "zwave:device:f6d34df4:node23";
var itemName = thingUID.toString().replaceAll(":", "_");
var theThing = things.getThing(thingUID);
var theItem = items.getItem(itemName);
if (theThing && theItem) {  // may have been triggered without a thing, or one that doesn't have a tracking item
  var newState = theThing.status;
  theItem.sendCommand(newState);
}

A simple change to make UI reactive to the Thing status item:

component: oh-toggle-item
config:
item: Outdoorplug1_Switch
title: Holiday Post Light
style:
background-color: =@@'zwave_device_f6d34df4_node23' == 'ONLINE' ? 'inherit':'gray'