I want to create a widget that I can use (via metadata) as the “Default List Item Widget” on an item. My widget should reveal further details via an accordion component. I can’t get the accordion to work.
My “Hello World” widget looks like this:
uid: test_accordion2
component: oh-list-item
config:
title: My title
accordionItem: true
slots:
accordion:
- component: oh-list
slots:
default:
- component: oh-label-item
config:
title: Unterpunkt A
icon: f7:circle
- component: oh-list-item
config:
title: Unterpunkt B
icon: f7:circle
Sorry, I missed this first time. This is also part of the problem. Your yaml now works on my system, but I’m running a recent snapshot. I don’t when the fixes were applied, but it looks like you may be running an OH version that still is impacted by the main problem discussed in your two links: for an oh-list-item just adding accordionItem: true is not enough. The parent of that item (usually, but not always a oh-list) must also have the configuration accordionList: true. The difficulty, however, when you are building and deploying a list item based widget is that you don’t have access to the oh-list because it’ll be part of whatever page this item ends up on in the end.
You can demonstrate this, by just doing a quick test where you manually add the oh-list to your widget:
That should at least show you your working accordion item.
Of course, that doesn’t help you right now, because that’s not a widget you can use as a default list item for and Item.
There are two solutions to this:
First option: You can to resort to a strange hack “workaround”. There are two components that produce no html (and therefore will not interfere the creation of the list) but can be used as parent items in the yaml structure: the oh-repeater and the oh-context. In this case, the oh-context is the better choice because it is simpler. You need to make the root component of your widget an oh-context and just use that context’s config to set accordionList: true.
Your widget will not render correctly in the widget editor, but it will finally work properly when you add it as the default list item for an Item.
Second option:
I don’t know if this works for your long term goal, but are not really using any of the oh- specific code for your list item. In that case, your root item can be an f7-list-item instead. You’ll have to change a little more of the code because you’ll be building the accordion from scratch instead of letting the oh-list-item handle the heavy lifting, but it’s a less “hacky” solution than the first one.
