Unfortunately that doesn’t work
icon: =(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? oh:motion : oh:camera
One thing: The blank after “icon:” must be removed (my fault). However if this here
icon:=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? oh:motion : oh:camera
ends up with broken images.
Quoting the expression doesn’t work either. Any idea?
Have you tested if f7 icons are working? Maybe there is a bug with the oh icons.
Nope that doesn’t work either
icon:="(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? f7:airplane: f7:alarm"You have to enclose the whole statement with quotes and also need to put quotes around the strings for the icon-defintion.
icon: "=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? 'f7:airplane' : 'f7:alarm'"
hmm…
These still don’t work (I tried the second just for trial and error):
icon:"=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? 'f7:airplane' : 'f7:alarm'"
icon:="(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? 'f7:airplane' : 'f7:alarm'"
Put a space after the icon: (before the expression)
Like so?
icon: "=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? 'f7:airplane': 'f7:alarm'"
Then the whole marker is gone:
It works fine for me - did you pressed F5 once to refresh the whole page?
Whats is of course strange, is that it messes up the formatting after saving (but it works)
Thanks Flo and Rainer for the support. The final working solution is:
Put the following directly into the editable field of the config dialog:
=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? 'oh:alarm': 'oh:motion'
or add the following to the yaml (which is much more tricky as you can mess up the formatting):
icon: "=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' ||
items.MotionSensor1_MotionAlarm.state === 'Alarm') ? 'oh:alarm':
'oh:motion'"
(oh and f7 icons work both).
Hope that makes using expressions here a bit clearer. Maybe we should put some interesting examples together how to use expressions and where are the pitfalls.
btw, for anyone how would like to some very interesting examples on how to apply expressions and use various attributes you should see Rainer’s Weather Widget (Kudos to you, @RGroll ). At least for me a very good learning foundation…
In the expressions section is it worth adding a simple stacked example and a reference to the widget expression tester . What is the protocol on editing?
simple example
= (items.xxx.state === ‘0’) ? ‘Off’ : (items.xxx.state === ‘1’) ? ‘Heat’ : (items.xxx.state === ‘11’) ? ‘Economy Heat’ : (items.xxx.state === ‘15’) ? ‘Full Power’: (items.xxx.state === ‘31’) ? ‘Manual’ : ‘Not Set’
Fantastic work building all of this. Many thanks,
Me again…
as I thought I had understood it I went on and tried to apply my knowledge on the “visible” attribute similar like I have seen it in examples of the weather widget and discussed above:
visible: "=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' ||
items.MotionSensor1_MotionAlarm.state === 'Alarm') ? true: false"
So the intent is to only show the icon if the alarm is on but it has no effect.
not even
visible: "false" or visible: false
would make the icon disappear.
PS: btw, would it make sense to open a single thread on UI expressions?
If the page is still a wiki, go edit it and leave a comment describing what you changed.
If not, file a PR on the page in the github repo. I’ve written and rewritten the Pages tutorials here several times and am still not satisfied so these parts of the Getting Started Tutorial are still open for contributions here.
I am learning from it so it is a good start.
Added to the end of section 8
= (items.xxx.state === '0') ? 'Off' : (items.xxx.state === '1') ? 'Heat' : (items.xxx.state === '11') ? 'Economy Heat' : (items.xxx.state === '15') ? 'Full Power': (items.xxx.state === '31') ? 'Manual' : 'Not Set'
Stacked ternary statements to translate a value to a description.
Expressions can be tested in the Widgets Expression Tester found in the Developer Sidebar
(Shift+Alt+D).
what does
=items.MotionSensor1_MotionAlarm.displayState
and
=items.MotionSensor1_MotionAlarm.state
give you in the expression tester?
The oh-plan-marker component seems to not support the visible: property - if you see a usecase for this, it’s worth opening a enhancement suggestion for this on github
Thanks for pointing out the expression tester! I wasn’t aware of it:
Obviously I wouldn’t need a ternary operator in this case, of course.
Thanks for the research Rainer, I would have even known that I am using that type of component.
Yep, the idea is to make items appear and disappear depending on a state or in my case I wanted to make the icon blink in case of an alarm. The only idea I have to make it blink is to switch icon images.
I probably ask for this to be added to the component. 
The way I solved it is by toggling between the “oh:alarm” and and empty one: “oh:none”.
You can change the visibility of an component with classes as well. So if the visibility attribute is not available use the class display-none. See my example:
- component: f7-button
config:
class: '=(props.propZoneArray) ? "" : "display-none"'
If you need some more examples maybe this one can helb you too. I‘m using this kind of visibility there as well on some components.
it seems the oh-plan-marker also doesn’t support the classes attribute. As you can see the alarm-icon is still shown although the expression does compute “display-none” :
Could you please add some examples/templates?
I am interested to see how these widgets are configured:
Thank you!
Michal
