Conditional f7-icon

I try to load an icon by a condition but I really fail with the syntax

here is my syntax try, would be nice if someone can help me :slight_smile:

- component: f7-icon
              f7: "= (items.number_openhaboperatingmodus_dayphase.state === '0') ?  'sunrise' 
                       :  (items.number_openhaboperatingmodus_dayphase.state === '1') ? 'sunrise'
                       :  (items.number_openhaboperatingmodus_dayphase.state === '2') ? 'sunrise'
                       : ''"
              size: 18
                margin-right: 10px
              visible: "=props.icon ? true : false"

When building expressions like these, use the developer sidebar expression tester to gradually build it up over.

Also, see Creating Personal Widgets | openHAB. Using a Object for this would make it easier to write and read.

f7: =({'0':'sunrise','1':'sunrise','2':'sunrise'})[@@number_openhaboperatingmodus_dayphase] || ''

See Building Pages - Components & Widgets | openHAB for reference for @@.

Finally, I don’t know if expressions are supported everywhere in widgets, particularly when used with raw f7 components.

1 Like

At this point, there are very few places where expressions are not supported. The stylesheet property remains one, and a few of the chart properties, if I recall. All the f7 components should support expressions for all of their configurations.

Rich’s suggestion for the object syntax is probably the best way to go here.

On a related note, you can also improve

visible: "=props.icon ? true : false"

You don’t need the true and false here. This statement says “if props.icon returns true then return true if it returns false then return false”. You can see how that is redundant. Because visible only requires a true/false value, you just need the test (in this case the value of props.icon) because that, returns a true or false (well, falsy) value already.

visible: =props.icon
1 Like

and in the text i added

text: =({'0':'Sunrise','1':'Morning','2':'Day','3':'Sunset','4':'Evening','5':'Night'})[@@number_openhaboperatingmodus_dayphase] || 'Not Set'

But result is always

Not Set

That most likely means that @@number_openhaboperatingmodus_dayphase is just not returning the data you are expecting. This is where the expression tester is so important. Put =@@number_openhaboperatingmodus_dayphase into the tester and see what it shows you is the actual output.

it says


but in the rest api i see

  "link": "",
  "state": "4",
  "stateDescription": {
    "pattern": "%d %unit%",
    "readOnly": false,
    "options": []
  "unitSymbol": "one",
  "metadata": {
    "semantics": {
      "value": "Point_Status",
      "config": {
        "isPointOf": "group_smarthomedevice"
    "stateDescription": {
      "value": " ",
      "config": {
        "pattern": "%d %unit%"
  "editable": false,
  "type": "Number:Dimensionless",
  "name": "number_openhaboperatingmodus_dayphase",
  "label": "Operating Modus",
  "tags": [
  "groupNames": [




text: =({'0':'Sunrise','1':'Morning','2':'Day','3':'Sunset','4':'Evening','5':'Night'})[items.number_openhaboperatingmodus_dayphase.state]

is also fine

What version of OH are you on. If it’s not at least 4.1 you can’t use @ and @@ IIRC. they weren’t added until later.

I am running oh4.2 m2

1 Like

Sorry, I missed it the first time. When using @ or @@ you need quotes around the item name:


Edit: without the quotes it’s treating number_openhaboperatingmodus_dayphase as a variable (which you obviously haven’t defined).

1 Like

thats fine now