I an just guessing. Is there a slot and accordion to much after argus??
My intent was to have argus also be an accordion that opens up. So I’d have three levels, like:
All Service
argus
InfluxDB
cerberos
fafnir
Based on the examples I assumed this was how to do it but I guess it’s not and I’m stumped.
Can’t do it either 
(which is perhaps telling)
I’ll see how to achieve this and make some changes if need be.
1 Like
I was able to do one level of depth like this, but no further:
component: oh-list-card
config:
accordionList: true
slots:
default:
- component: oh-list-item
config:
accordionItem: true
title: Depth 0
after: =1+2
slots:
accordion:
- component: oh-list
slots:
default:
- component: oh-list-item
config:
title: Depth 1 - Item 1
after: =2+3
- component: oh-list-item
config:
title: Depth 1 - Item 2
after: =3+4
- component: oh-list-item
config:
title: Depth 1 - Item 3
after: =4+5
I got it working with a few limitations and some nesting 
- Nested ‘icon: xy’ would work but will mess up the accordion layout a bit
// EDIT
- I added some real items for testing now and it seems, that the ‘item’ parameter isn´t present in ‘oh-list-item’ so you have to trick around this with an expression like ‘after: =items.vArgus_Status.state’, which should also work for the badge, if you like it.
//Edit2:
- Contrary to my statement that ‘subtitle:’ won´t work in ‘oh-label-item’ - its just depending on the ‘mediaList: true’ parameter - if set, everything works fine.
uid: nestedAccordion
tags:
- nested
- accordion
- list
component: oh-list-card
config:
title: All Services Status
accordionList: true
footer: Online status of home automation related services
slots:
default:
- component: oh-list-item
config:
title: All Services
icon: oh:network_purple
badge: " OK "
badgeColor: green
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
noBorder: true
noShadow: true
outline: true
slots:
default:
- component: oh-list-item
config:
title: "argus"
after: =items.vArgus_Status.state
accordionList: true
noBorder: true
noShadow: true
outline: true
slots:
accordion:
- component: oh-label-item
config:
item: vInfluxDB_Status
title: "influxDB"
- component: oh-label-item
config:
item: vCerberos_Status
title: "cerberos"
- component: oh-label-item
config:
item: vFafnir_Status
title: "fafnir"
- component: oh-list-item
config:
title: Show analysis
listButton: true
action: analyzer
#actionAnalyzerCoordSystem:
#actionAnalyzerItems:
3 Likes
Could anybody lead me in the right direction using multiple javascript functions inside of expressions - it seems that there are some particularities in the usage.
To be more accurate, I try to split and rearrange multiple variables if the value isn´t null. From what google teached me, it should work like that (with some extra brackets on the array, which seems to be one of the above mentioned particularities of the OH-expressions):
=([vars.contact.split(";")[0],vars.contact.split(";")[1],vars.contact.split(";")[2]]).filter(boolean).join(";")This returns ‘TypeError: undefined is not a function’
If I remove the filter, everything works fine, but it adds the delimiter, even if the value is null.
=([vars.contact.split(";")[0],vars.contact.split(";")[1],vars.contact.split(";")[2]]).join(";")
Anoyone, that are more experienced in using javascript, has an idea?
Thank you!
The expression language is not actually JavaScript, it’s based on an expression parser (GitHub - EricSmekens/jsep: JavaScript Expression Parser), so while it does resemble JavaScript code (from the jsep readme):
It can parse JavaScript expressions but not operations. The difference between expressions and operations is akin to the difference between a cell in an Excel spreadsheet vs. a proper JavaScript program.
Therefore there are a number of limitations, for instance you cannot use methods that accept functions as a parameter, like the arrays’ map or filter, because it cannot parse them.
Good to know and thanks for the link. I´ll try to learn what´s possible and what`s not. 
Another question regarding the option to set property values on some actions called ‘actionModalConfig’ in YAML - How to set them? (there are no options given in the widget-configuration)
And what exactly are these ‘property values’? Are these the ones mentioned in the framework7 documentation? (e.g. https://framework7.io/vue/popup.html#popup-properties) or is it a way to set the declared properties for the widget itself?
Both of these thoughts doesn´t work in my tests.
Is there any writeup on this feature? Best case (from my point-of-view) would be that I can also use this to set a popup title and manipulate css-classes of the popup (but that is wishful thinking) 
It’s for the widget. See the keypad example here: Widgets: context variables, add oh-input by ghys · Pull Request #356 · openhab/openhab-webui · GitHub
I think it will be part of the 3rd page in this series, which I still have to write.
If the root component of your widget defines a “label” config property it will be the title of the popup.
For example in the keypad example adding label: Please Input Pin to the root f7-block.
Altering CSS cannot be done now, I’m aware you requested it ([MainUI] Customize css of pages/popups · Issue #408 · openhab/openhab-webui · GitHub)
Ah okay, got it!
And tested this already by accident, but obviously it only works if the root component is an f7-block.
So I´ll try to wait patiently for your work on the mentioned request.
On the topic of this request - I managed it to create a widget with a custom background already (at least for the popup-case)
Thanks again!
7 Likes
Would you mind providing your Source code?
Looks great!
I think it would be best to open a new topic in the UI category (UIs - openHAB Community, maybe there could be a dedicated one) to discuss new widgets like this. I can do the same for the keypad.
3 Likes
Of course!
I’ll just clean it up a bit and add some parameters and will post it in the mentioned category later tonight. Maybe until then I also got some tweaks done, so that you can define multiple layers of images in the top-section so it can react to different type of weathers and the sunset etc.
One last questions regarding the group-parameters @ysc - Is there a link where I can find all the parameter types to define? and maybe something like a divider / headline group-item as its used for the action param?
And thanks for your kind words!
1 Like
@RGroll the format of the props in a widget is the same as the config description parameters (& groups) familiar to binding developers, only in YAML. They are described here:
For instance to have separate sections for parameters you’ll need to define a group and then set groupName: <name> in your parameters.
2 Likes
Is there an expression I can use to make the badge color depend on the state of the Item? I experimented with trying a trinary operator and the like but the editor marks it as wrong no matter what I try (probably means the answer is can’t do it). Maybe I have to use visibility?
Ultimately what I’m shooting for is a three layered accordion list that rolls up the status into one line. If something goes offline I can open up the list and see all my machines and identify which machine has something offline. Clicking on that shows the list of services and I want to see which one is offline.
So, for example, if InfluxDB goes offline All Services will show as OFFLINE. Opening that and Argus will show as OFFLINE. Opening that in turn will show that InfluxDB is OFFLINE and everything else is ONLINE.
Maybe all I can use is the after and not the badge? But being able to show the state with a colored badge would be really useful.
As I play with this stuff it’s clear that building pages is going to be as complicated as building rules to do anything more than just the basics. It’s going to need lots of docs I fear.
Something like this should definitely work I think:
badgeColor: =items.vArgus_Status.state === 'ON' ? 'green' : 'red'
As I play with this stuff it’s clear that building pages is going to be as complicated as building rules to do anything more than just the basics. It’s going to need lots of docs I fear.
yes 
But @RGroll definitely got the gist of it, so maybe people can learn by examples after a number of those are available.
Yes, i tried it for 1 month, and it’s complicated, simple things are very hard. Maybe just html with access to underline vue.js will have been simpler. Maybe we can add that to the edit mode : yaml mode and html mode with access to f7 component.
(I hate yaml 
)
1 Like
So, for example, if InfluxDB goes offline All Services will show as OFFLINE. Opening that and Argus will show as OFFLINE. Opening that in turn will show that InfluxDB is OFFLINE and everything else is ONLINE.
For that you might be better served by a Group item with an aggregation function, and simply displaying the state of that Group in the badge.
They are Group Items that I’m trying to display. That’s actually how I do it in my old sitemap. And I can see that all these Groups and Switch Items have a state when I look at the Items. But the icon isn’t changing color to match the state and the state is always showing as - on the page.
When I tried to use the ternary operator the editor marked it as an error line. When I saved it it deleted everything from that error line to the end of the YAML. 
I need to stop for today. More experiments tomorrow!