Continuation:
Default Widgets
This was already covered a little bit above under Equipment Widgets but I want to cover it in a more generic way.
All of us will have many Items that are essentially the same thing only in a different location. For example, lights, doors, windows, temp/humidity sensors, etc. As you should already know, if these are all semantically tagged they will be automatically added to the appropriate cards in the overview pages. And if you want to change how those Items appear, you can override the default by setting a “default list widget” on the Item. But you’ll be doing a lot of copy/paste/edit of default list widgets to make all your similar Items look and behave the same.
The way to avoid that is to create a custom widget and reuse it as the default widget for all your similar Items. And if you later decide you want to change how it looks or works, you can modify the custom widget and it will automatically update everywhere it’s used.
See [Wiki] Building Pages in OH 3 - Custom User Defined Widgets for details. As an example:
Here is my custom list widget for all of my humidity Items:
uid: humidity_list
tags:
- list
- humidity
props:
parameters:
- description: Widget title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item to display
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 2, 2021, 5:08:00 PM
component: oh-label-item
config:
icon: f7:drop
iconColor: '=(Number.parseInt(items[props.item].state) > 45) ? "purple" :(Number.parseInt(items[props.item].state) > 30) ? "blue" : "orange"'
title: =props.title
item: =props.item
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.item]
To apply it:
Note that often the preview of the widget doesn’t refresh properly so after you save come back and you should see the correct rendering. Notice how all I had to enter was the properties I defined in the custom widget. Everything else is defined by the custom widget.
DRY - Don’t Repeat Yourself is always the goal.
When widgets don’t work
When ever something that looks like it should work is not working, open the JavaScript console. Any errors will appear there and seeing them can save you a ton of time. for example, I’m creating a list widget for my garage door openers. I’ve defined props for a sensor_item and a control_item but nothing happened when I click on it. I opened up the JavaScript console (it’ll be under Developer Tools in your browser menus) and immediately see the following error:
That immediately tells me I messed up one of my uses of the control_item, and sure enough I forgot the leading =.
What are your tips and tricks?