icon is empty when iconname is calculated with an expression and item.state contains ":"

[galexey]

The problem

when the iconname is calculated dynamically with an expression and item.state contains a ":", the icon will not be displayed (almost all the time). Rarely the icon gets displayed when you open a new browserwindow, but if you hit F5 to refresh, the icon is gone again.

Expected behavior

the icon is displayed even with ":" in the itemstate

Steps to reproduce

create 2 string items in your .items file: String test_dynamic_icon_name_works String test_dynamic_icon_name_demo

open openhabconsole to set values:

openhab:send test_dynamic_icon_name_demo 'dummy:garden' openhab:send test_dynamic_icon_name_works 'dummy-garden'

create a testpage:

config:
  label: icontest
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-icon
                      config:
                        icon: =items.test_dynamic_icon_name_demo.state.split(":")[1]
                        
                        style:
                          height: 80px
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: Label
                      config:
                        text: =items.test_dynamic_icon_name_demo.state.split(":")[1]
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-icon
                      config:
                        icon: =items.test_dynamic_icon_name_works.state.split("-")[1]
                        
                        style:
                          height: 80px
                        
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: Label
                      config:
                        text: =items.test_dynamic_icon_name_works.state.split("-")[1]
masonry: null
grid: []
canvas: []

4. you will see that the first icon is not displayed.

Your environment

runtimeInfo:
  version: 3.2.0
  buildString: Release Build
locale: en-US
systemInfo:
  configFolder: /openhab/conf
  userdataFolder: /openhab/userdata
  logFolder: /openhab/userdata/logs
  javaVersion: 11.0.13
  javaVendor: Azul Systems, Inc.
  javaVendorVersion: Zulu11.52+13-CA
  osName: Linux
  osVersion: 5.4.0-72-generic
  osArchitecture: amd64
  availableProcessors: 12
  freeMemory: 265346240
  totalMemory: 452984832
bindings:
  - astro
  - network
  - openweathermap
  - shelly
  - sonos
  - systeminfo
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: true
    macos: false
    windows: true
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: windows
    pixelRatio: 1
    prefersColorScheme: light
  isSecureContext: false
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 8
    language: de
    languages:
      - de
      - en-US
      - en
    onLine: true
    platform: Win32
  screen:
    width: 1920
    height: 1200
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: filled
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101
    Firefox/96.0
timestamp: 2022-01-17T11:35:24.091Z

Browser console

12:37:22.664
TypeError: e is undefined
    iconName http://10.10.20.83:8080/js/app.js:33
    get http://10.10.20.83:8080/js/app.js:7
    evaluate http://10.10.20.83:8080/js/app.js:7
    wn http://10.10.20.83:8080/js/app.js:7
    getter http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    $watch http://10.10.20.83:8080/js/app.js:7
    xn http://10.10.20.83:8080/js/app.js:7
    gn http://10.10.20.83:8080/js/app.js:7
    gn http://10.10.20.83:8080/js/app.js:7
    _init http://10.10.20.83:8080/js/app.js:7
    i http://10.10.20.83:8080/js/app.js:7
    componentInstance http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    y http://10.10.20.83:8080/js/app.js:7
    S http://10.10.20.83:8080/js/app.js:7
    S http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    run http://10.10.20.83:8080/js/app.js:7
    pn http://10.10.20.83:8080/js/app.js:7
    at http://10.10.20.83:8080/js/app.js:7
    Ze http://10.10.20.83:8080/js/app.js:7
app.js:7:11689
12:37:22.670
TypeError: e is undefined
    iconName http://10.10.20.83:8080/js/app.js:33
    get http://10.10.20.83:8080/js/app.js:7
    evaluate http://10.10.20.83:8080/js/app.js:7
    wn http://10.10.20.83:8080/js/app.js:7
    mounted http://10.10.20.83:8080/js/app.js:33
    qe http://10.10.20.83:8080/js/app.js:7
    tn http://10.10.20.83:8080/js/app.js:7
    insert http://10.10.20.83:8080/js/app.js:7
    O http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    run http://10.10.20.83:8080/js/app.js:7
    pn http://10.10.20.83:8080/js/app.js:7
    at http://10.10.20.83:8080/js/app.js:7
    Ze http://10.10.20.83:8080/js/app.js:7
app.js:7:11689
12:37:33.303 Error: Promised response from onMessage listener went out of scope ExtensionMessagingService.js:89:34

​

Additional information

This behaviour is since 3.1.1 and I guess it has to do with introduction of the icon-prefix “oh:”, “f7:”, ... . My guess is, that the icon-prefix logic uses the item.state within the expression instead of the result of the expression.

E.g. in my example: the logic uses "items.test_dynamic_icon_name_demo.state." instead of the result of the expression "items.test_dynamic_icon_name_demo.state.split(":")[1]"

[ghys]

True the part before the first colon is the type (source) of the icon. For compatibility reasons no prefix still means "openHAB icon" (oh: prefix, e.g. lightbulb is equivalent to oh:lightbulb).

Try with:

icon: ='oh:' + items.test_dynamic_icon_name_demo.state.split(":")[1]

does this solve the problem?

[galexey]

Thanks, this workaround solves my problem!

[lolodomo]

An answer was given that solved the problem.