I try to create a widget that I can expand to display additional content. I figured that I need the accordion function to achieve this, but can not get it to work. The content is not displayed. I use the following .yaml code:
uid: printer_status_v2
tags: []
props:
parameterGroups: []
timestamp: Apr 9, 2021, 8:29:18 PM
component: oh-grid-col
config:
width: 100
xsmall: 50
medium: 33
slots:
default:
- component: oh-list-card
config:
accordionList: true
simpleList: false
outline: true
slots:
default:
- component: oh-list-item
config:
title: HP LaserJet Pro MFP M479
icon: f7:printer
badge: =items.HPColorLaserJetProM478f9f925EE5_Status.state
slots:
accordion:
- component: oh-link
config:
text: A
The text A is not visible and no chevron is displayed to expand:
Somehow I did not understand the syntax for this correct yet. Any help would be appreciated.
with kind regards,
rlkoshak
April 9, 2021, 7:38pm
2
I’m not good enough to tell you exactly where you’ve gone wrong. But I can provide a snippet of a working example that you can perhaps compare to yours to see where the differences are.
uid: servicesStatus
tags:
- nested
- accordion
- list
timestamp: Jan 7, 2021, 11:07:06 AM
component: oh-list-card
config:
accordionList: true
title: All Services Status
footer: Online status of home automation related services
slots:
default:
- component: oh-list-item
config:
title: All Services
subtitle: When OFF one or more services are offline
badge: '=(items.ServiceStatuses.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.ServiceStatuses.state === "ON") ? "green" : "red"'
slots:
accordion:
- component: oh-list
config:
accordionList: true
class:
- margin-left
slots:
default:
- component: oh-list-item
config:
title: argus
subtitle: Home automation server
badge: '=(items.vArgus_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vArgus_Status.state === "ON") ? "green" : "red"'
slots:
accordion:
- component: oh-list
config:
accordionList: true
class:
- margin-left
slots:
default:
- component: oh-list-item
config:
title: Mosquitto
badge: '=(items.vMosquitto_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vMosquitto_Status.state === "ON") ? "green" : "red"'
- component: oh-list-item
config:
title: Portainer Agent
badge: '=(items.vArgus_Portainer_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vArgus_Portainer_Status.state === "ON") ? "green" : "red"'
- component: oh-list-item
config:
title: cerberos
subtitle: Garage sensors and controller
badge: '=(items.vCerberos_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vCerberos_Status.state === "ON") ? "green" : "red"'
- component: oh-list-item
config:
title: fafnir
subtitle: NAS Server
badge: '=(items.vFafnir_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vFafnir_Status.state === "ON") ? "green" : "red"'
slots:
accordion:
- component: oh-list
config:
accordionList: true
class:
- margin-left
slots:
default:
- component: oh-list-item
config:
title: OMV Service
badge: '=(items.vOMV_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vOMV_Status.state === "ON") ? "green" : "red"'
- component: oh-list-item
config:
title: OMV NFS
badge: '=(items.vOMV_NFS_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vOMV_NFS_Status.state === "ON") ? "green" : "red"'
- component: oh-list-item
config:
title: OMV Timemachine
badge: '=(items.vOMV_AFP_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
badgeColor: '=(items.vOMV_AFP_Status.state === "ON") ? "green" : "red"'
It goes on from there but that should give you the gist.
Note, I don’t use this widget any more in favor of using an oh-repeater element instead which is much more flexible and dynamic.
uid: all_services
tags:
- card
- services
props:
parameters: []
parameterGroups: []
timestamp: Feb 16, 2021, 10:11:34 AM
component: f7-card
config:
title: '=(items.ServiceStatuses.state == "ON") ? "All Services Online" : "Offline"'
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
fragment: true
for: item
sourceType: itemsWithTags
itemTags: Status,Power
filter: items[loop.item.name].state != "ON" && items[loop.item.name].state != "OL"
slots:
default:
- component: oh-list-item
config:
icon: f7:wifi_slash
iconColor: red
title: =loop.item.label
item: =loop.item.name
badge: OFFLINE
badgeColor: red
If there is nothing to show, don’t show anything. I don’t need to know which services are online, only those that are offline.
Hi Rich,
thank you for your response. I used your example and try and error and could make it work
.yml
uid: printer_status_v2
tags: []
props:
parameterGroups: []
timestamp: Apr 10, 2021, 8:55:40 AM
component: oh-grid-col
config:
width: 100
xsmall: 50
medium: 33
slots:
default:
- component: oh-list-card
config:
accordionList: true
simpleList: false
outline: true
slots:
default:
- component: oh-list-item
config:
title: HP LaserJet Pro MFP M479
icon: f7:printer
badge: =items.HPColorLaserJetProM478f9f925EE5_Status.state
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
noBorder: true
noShadow: true
outline: true
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 15
slots:
default:
- component: oh-link
config:
textColor: black
text: =items.HPColorLaserJetProM478f9f925EE5_BlackLevel.state
- component: f7-col
config:
width: 85
slots:
default:
- component: f7-progressbar
config:
style:
--f7-theme-color: rgb(0, 0, 0)
--f7-progressbar-height: 20px
progress: =Number(items.HPColorLaserJetProM478f9f925EE5_BlackLevel.state.split(' ')[0])
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 15
slots:
default:
- component: oh-link
config:
textColor: black
text: =items.HPColorLaserJetProM478f9f925EE5_CyanLevel.state
- component: f7-col
config:
width: 85
slots:
default:
- component: f7-progressbar
config:
style:
--f7-theme-color: rgb(0, 255, 255)
--f7-progressbar-height: 20px
progress: =Number(items.HPColorLaserJetProM478f9f925EE5_CyanLevel.state.split(' ')[0])
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 15
slots:
default:
- component: oh-link
config:
textColor: black
text: =items.HPColorLaserJetProM478f9f925EE5_YellowLevel.state
- component: f7-col
config:
width: 85
slots:
default:
- component: f7-progressbar
config:
style:
--f7-theme-color: rgb(255, 255, 0)
--f7-progressbar-height: 20px
progress: =Number(items.HPColorLaserJetProM478f9f925EE5_YellowLevel.state.split(' ')[0])
- component: f7-row
slots:
default:
- component: f7-col
config:
width: 15
slots:
default:
- component: oh-link
config:
textColor: black
text: =items.HPColorLaserJetProM478f9f925EE5_MagentaLevel.state
- component: f7-col
config:
width: 85
slots:
default:
- component: f7-progressbar
config:
style:
--f7-theme-color: rgb(255, 0, 255)
--f7-progressbar-height: 20px
progress: =Number(items.HPColorLaserJetProM478f9f925EE5_MagentaLevel.state.split(' ')[0])
with kind regards,
1 Like
- but I still do not understand exactly how the syntax works.