I’m trying to create a widget to create either a list or a card for each of my HVAC zones
Each Zone has a switch/current temp, set temp, flow% and battery low state.
so ideally I would create a ROW item with the above items in separate columns
// Zone#2 Study
Switch AT_Zone_Power_Study "AC Zone Power - Study" (hvac) { channel="airtouch:airtouch5-controller:myhvac:ac-zone-2#airconditioner-zone-power" }
Number:Temperature AT_Zone_Temperature_Study "AC Zone Temperature - Study \[%.0f °C\]" (hvac) { channel="airtouch:airtouch5-controller:myhvac:ac-zone-2#airconditioner-zone-temperature" }
Number:Temperature AT_Zone_SetTemperature_Study "AC Zone Set Temperature - Study \[%.0f °C\]" (hvac) { channel="airtouch:airtouch5-controller:myhvac:ac-zone-2#airconditioner-zone-setpoint" }
Switch AT_Zone_BatLow_Study "AC Zone Battery Low - Study" (hvac) { channel="airtouch:airtouch5-controller:myhvac:ac-zone-2#airconditioner-zone-battery-low" }
Number AT_Zone_Airflow_Study "AC Zone Airflow - Study" (hvac) { channel="airtouch:airtouch5-controller:myhvac:ac-zone-2#airconditioner-zone-flow" }
I attempted with the following but I can’t see any output, is there a basic pattern I can use to get started building a list item?
uid: at_zone1
tags:
* hvac
props:
parameters:
* description: Zone name
label: Zone
name: zone
required: true
type: TEXT
* context: item
description: Zone Power Item
label: Zone Power Item
name: zone_power_item
required: true
type: TEXT
* context: item
description: Zone Temperature Item
label: Zone Temperature Item
name: zone_temp_item
required: true
type: TEXT
parameterGroups: [ ]
timestamp: May 16, 2026, 1:29:07 PM
component: oh-label-card
config: {}
slots:
default:
* component: oh-icon
config:
icon: oh:light
* component: oh-toggle
config:
item: =props.zone_power_item
* component: Label
config:
style:
color: black
text: =props.zone
I’m going to assume that there was some catastrophic copy/paste error when creating your post because the widget configuration above is not yaml at all (the stars should be -, and all the indentation, which is actually a critical part of yaml, is incorrect).
Beyond that potential issue, there are several smaller issues which are resulting in you not seeing any widget being rendered.
These do not match. If you want an widget that is an item to be placed in a list, then you do not want a card. Cards are the stand-alone type of widget which render as a rectangle with rounded corners in some other larger space.
This does not match your list of components inside the card. The default for any webpage or piece of a webpage is for consecutive elements to be placed in a column (a web page is still a page, so think of it like a book page, where unless something special needs to happen, basic layout is top to bottom). There is nothing in your yaml configuration that directs the widget to switch from the regular top to bottom layout to a side by side row layout.
If you have not already, I recommend that you read though the tutorials on building a widget and troubleshooting a widget. You already did the first and most important step which is to be able to articulate what you want, those might help you get that “basic pattern” you are looking for.
Most of the detailed issues with your configuration result from the attempt to use the label card, so it’s not worth going into those since that does not appear to be what you actually want. In this exact instance, there is widget component that’s made for exactly your desired case. It’s not commonly used but if you really want a “ROW item” with no other bells and whistles (no header, or footers, etc.) then you should start your widget with an f7-list-item-row this component satisfies both of your stated requirements: be a list element and arrange child elements in a row.
There are several ways to do this. In my opinion the easiest is to use the device object available in the widget expressions. If device.desktop is false then the page is being rendered in a mobile viewer. So for any component you don’t want to see on mobile, you can just add visible: =device.desktop to the config.
Once you have the basic framework you can add anything you like depending on complicated you are willing to get. In this case, again, “a row of columns with headers” is already put into clear enough words what you want to be able to conceive the widget structure that will be a good starting point:
