Cool, note that you can be even more creative, since you can customize the rendering of most parts of a list item or even the cell header/background:
component: oh-cell
config:
title: Doors & Windows
slots:
header:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: f7-list-item
config:
title: Doors & Windows
slots:
title:
- component: f7-chip
config:
text: "=((items.FGDW002WindowSensor_Open.state === 'OPEN' ? 1 : 0) +
(items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN' ? 1 :
0)).toString()"
- component: Label
config:
text: Front Door open!
style:
color: red
visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN'
- component: Label
config:
text: Living Room Window open!
style:
color: red
visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'
Another version:
component: oh-cell
config:
title: Doors & Windows
slots:
background:
- component: f7-block
config:
class:
- card-opened-fade-out
style:
position: absolute
right: 10px
bottom: 10px
slots:
default:
- component: f7-chip
config:
class:
- margin-left
iconF7: exclamationmark_triangle
iconColor: red
text: Front Door
visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN'
- component: f7-chip
config:
class:
- margin-left
iconF7: exclamationmark_triangle
iconColor: red
text: Living Room Window
visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'
Be aware though that visible attributes are not taken into account when editing (this is by design), so you might think it doesn’t work, switch to Run mode to see the final result with the visibility conditions applied.