Simplify Multiple Items In Custom Widget

Apps & Services HABPanel
,
1

I’ve been building several custom widgets and I ended up with one that had a ton of items within it. They were all from two devices. Setting it up to troubleshoot, and then again on my screens was a royal pain. And then I had an idea - just tell the widget the base device name, and have it populate the rest in the various parts of the widget. This way, the widget works for multiple devices, but requires the least input.

This has been really helpful for me, so I figured I’d pass it on as I haven’t seen anyone else do this.

Normally, an item would be displayed using:

{{itemValue(config.device_item)}}

With my method, you enter the “base” part of a name as a string instead. The rest of the item is populated within the widget as needed:

{{itemValue(config.dev_base + 'Tripped')}}
{{itemValue(config.dev_base + 'BatteryLevel')}}

This even works within ng-if statements:

<div ng-if="itemValue(config.dev_base + 'Tripped')=='OPEN'" style="width: 100%; height: 100%; padding: 0">
  It's ON!!!
</div>

Obviously, this has limitations as it will only work if you keep consistent naming conventions (which you should anyway)…

Danny

3 Likes