OH4.0.2 Cell Based Widget not working on Overview Page but works on "other" Pages

Mark_VG · August 29, 2023, 7:52am

Hi All.

I have a strange issue that I cannot seem to debug at all.

I have created a widget that pops up a f7-block when one of the components is pressed as follows:
Working

This works from the Widget Editor as well as my Overview-Test page.

However if I use the exact same code on my Overview page, the popup just does not happen. The press is detected but nothing pops up:

Not Working

I have cut down the code as much as I can to try and see what the issue is, but just no luck.

I have tried on a clean install by adding just this Cell to the overview page and get the same issue - so it appears this is something to do with the overview page.

I have other widgets on the Overview that do a similar Popup with no issue, so I am at a loss.

The code is as follows:

component: oh-cell
config:
  on: true
  title: Test
slots:
  background:
    - component: f7-block
      config:
        style:
          height: 100%
          margin: 0
          padding: 0
          position: absolute
          width: 100%
    - component: f7-block
      config:
        style:
          bottom: 5px
          left: 0px
          margin: 0
          padding: 0
          position: absolute
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              popupOpen: .test1234-pop
              style:
                height: 100%
                width: 100%
              text: OPEN
    - component: f7-popup
      config:
        class: test1234-pop
        style:
          --f7-popup-tablet-height: 720px
          --f7-popup-tablet-width: 360px
          background-color: rgb(220,220,220)
          border-radius: 30px
          height: 720px
          text-overflow: ellipsis
          width: 360px
      slots:
        default:
          - component: f7-block
            config:
              popupClose: .test1234-pop
              style:
                --f7-popup-tablet-height: 720px
                --f7-popup-tablet-width: 360px
                background-color: rgb(220,220,220)
                border-radius: 30px
                height: 720px
                margin: 0
                padding: 0
                text-overflow: ellipsis
                width: 360px
            slots:
              default:
                - component: oh-button
                  config:
                    clearVariable:
                      - mpptDetailShow
                    large: true
                    popupClose: .modal-in
                    style:
                      background: rgb(220,220,220)
                      color: white
                      display: flex
                      height: 30px
                      left: 5px
                      position: absolute
                      top: 5px
                      width: 30px
                      z-index: 999
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          color: white
                          f7: clear_fill
                          style:
                            color: black
                            font-size: 20px
                            margin: auto
                - component: Label
                  config:
                    style:
                      font-size: 25px
                      font-weight: 500
                      padding-left: 50px
                      width: 100%
                    text: Test
                - component: f7-block
                  config:
                    style:
                      margin: 0
                      padding: 0
                      top: 0px
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: variable
                          actionVariable: mpptDetailShow
                          actionVariableValue: '=(vars.mpptDetailShow == "null") ? true : !(vars.mpptDetailShow)'
                          style:
                            height: 100%
                            width: 100%
                            z-index: 0
                        slots:
                          default:
                            - component: oh-gauge
                              config:
                                borderBgColor: gray
                                borderColor: green
                                borderWidth: 20
                                class:
                                  - margin-top
                                  - margin-bottom
                                value: 4400
                                labelText: MPPT Total
                                max: 6600
                                min: 0
                                size: 150
                                style:
                                  left: 5px
                                type: semicircle
                                valueFontSize: 15
                                valueTextColor: green
                - component: f7-block
                  config:
                    style:
                      background: white
                      border: 1px solid black
                      border-radius: 20px
                      left: 15px
                      margin: 0
                      opacity: 1
                      overflow: hidden
                      padding: 0
                      position: absolute
                      top: 133px
                      width: 330px
                    visible: =(vars.mpptDetailShow) == true
                  slots:
                    default:
                      - component: oh-gauge
                        config:
                          borderBgColor: gray
                          borderColor: green
                          borderWidth: 20
                          class:
                            - margin-top
                            - margin-bottom
                          value: 1500
                          labelText: MPPT 1
                          max: 3300
                          min: 0
                          size: 145
                          style:
                            left: 10px
                            margin: 0
                            padding: 0
                          type: semicircle
                          valueFontSize: 15
                          valueTextColor: green

Any suggestions on what the issue might be?

Thanks
Mark

JustinG · August 29, 2023, 3:57pm

I suspect the issue is that you have set the z-index of a couple of the elements. It’s almost certainly showing, it’s just behind the overview page background (which has a z-index of 1 so you’re z-index of 0 is getting shunted all the way to back).

You usually shouldn’t need to worry about z-index (but that’s not a hard and fast rule), so I recommend trying to figure out what it is about the structure of the widget that seems to require this and restructure the entire thing so that you don’t need an absolute z-index and can just let the system handle it.

Mark_VG · August 29, 2023, 4:39pm

Thanks for the Reply Justin

I also thought that. I only added the z-index entries to rty and force the popup to the front. I get the same issue with or without them.

I have just tried again. And weirdly the popup works (This is the forst time I have seen it work on the Overview Page
:
Working Ant

But tthen I refreshed the page (that is all I did), and not working again.
Not Working Ant

I am hoping there is some sort of debugging you can suggest in teh browser? I have tried looking at inspect etc, but not sure what to look for?

I do nto get this issue at all on any other pages, or in the Widget Editor - do you still think this would be a z-index issue?

JustinG · August 29, 2023, 4:49pm

That’s still where my focus would be for now.

Open the browser console and watch the output there when you click on the cell. Make sure it doesn’t report any errors. If nothing shows up there then you really have narrowed it down to just a location of the rendered object issue and on a mobile screen like that there’s not too many places to hide other than “under other things”.

You have also given your popup a fairly unique class (test1234-pop), so when you think it should be open and you don’t see it, then search for the class name. You should just be able to click anywhere in the elements widow and press ctrl + f to bring up an input that will search the whole page structure. That will let you know that the element is actaully on the page, you just can’t see it and you can then see if changing some of the position or z-index parameters brings it back to visible.

Mark_VG · August 29, 2023, 5:49pm

I have just realized that I have explained this really badly… Sorry.

The Popup part is working fine. The issue is the f7-block which would either be displayed or not depending on the value of a variable - so looks like a popup.

- component: f7-block
  config:
    style:
      background: white
      border: 1px solid black
      border-radius: 20px
      left: 15px
      margin: 0
      opacity: 1
      overflow: hidden
      padding: 0
      position: absolute
      top: 133px
      width: 330px
    visible: =(vars.mpptDetailShow) == true
  slots:
    default:
      - component: oh-gauge
        config:
          borderBgColor: gray
          borderColor: green
          borderWidth: 20
          class:
            - margin-top
            - margin-bottom
          value: 1500
          labelText: MPPT 1
          max: 3300
          min: 0
          size: 145
          style:
            left: 10px
            margin: 0
            padding: 0
          type: semicircle
          valueFontSize: 15
          valueTextColor: green

The visibility is set based on:

actionVariableValue: '=(vars.mpptDetailShow == "null") ? true : !(vars.mpptDetailShow)'

visible: =(vars.mpptDetailShow) == true

Even removing the visibility expression does not display the block.

I will also investigate your other suggestions and report back.

JustinG · August 30, 2023, 3:44am

Ah sorry, I understand now. Yes, then it’s less likely (although not impossible) that it’s a z-index issue.

I’ve seen a few strange visibility issues a little similar to this in the past, but those were all related to visibility of child elements of a repeater changing.

Do you have a stylesheet define somewhere else on that Overview page that may be applied to the f7-block (Long shot but worth checking for)?

Also, you could try it with just:

visible: =vars.mpptDetailShow

and

actionVariableValue: =!(vars.mpptDetailShow)

Those are equivalent to what you had, logically, but may be more direct and therefore less prone to breaking.

Mark_VG · August 30, 2023, 8:29am

Thanks again Justin (and sorry for the confusion caused by my bad explanation)

I have simplified the widget some more (removed the oh-gauge and used an oh-icon). I have also added some “logging” to see what happens with the variable.

I manage to capture the following, which shows the widget working initially (randomly seems to work sometimes) and then no longer working after a page reload (too large to include in post):

What is really weird is that this only seems to happen on the Overview page. No issues on my other pages (I have an Overview-TEST Page for staging and testing).

My updated code with fixed expression and removed z-index):

component: oh-cell
config:
  title: Test
slots:
  background:
    - component: f7-block
      config:
        style:
          height: 100%
          margin: 0
          padding: 0
          position: absolute
          width: 100%
    - component: f7-block
      config:
        style:
          bottom: 5px
          left: 0px
          margin: 0
          padding: 0
          position: absolute
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              popupOpen: .test1234-pop
              style:
                height: 100%
                width: 100%
              text: OPEN
    - component: f7-popup
      config:
        class: test1234-pop
        style:
          --f7-popup-tablet-height: 720px
          --f7-popup-tablet-width: 360px
          background-color: rgb(220,220,220)
          border-radius: 30px
          height: 720px
          text-overflow: ellipsis
          width: 360px
      slots:
        default:
          - component: f7-block
            config:
              popupClose: .test1234-pop
              style:
                background-color: rgb(220,220,220)
                border-radius: 30px
                height: 720px
                margin: 0
                padding: 0
                text-overflow: ellipsis
                width: 360px
            slots:
              default:
                - component: oh-button
                  config:
                    clearVariable:
                      - mpptDetailShow
                    large: true
                    popupClose: .modal-in
                    style:
                      background: rgb(220,220,220)
                      color: white
                      display: flex
                      height: 30px
                      left: 5px
                      position: absolute
                      top: 5px
                      width: 30px
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          color: white
                          f7: clear_fill
                          style:
                            color: black
                            font-size: 20px
                            margin: auto
                - component: Label
                  config:
                    style:
                      font-size: 25px
                      font-weight: 500
                      padding-left: 50px
                      width: 100%
                    text: Test
                - component: Label
                  config:
                    style:
                      font-size: 25px
                      font-weight: 500
                      padding-left: 50px
                      width: 100%
                    text: ="Variable Value " + vars.mpptDetailShow
                - component: f7-block
                  config:
                    style:
                      margin: 0
                      padding: 0
                      top: 0px
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: variable
                          actionVariable: mpptDetailShow
                          actionVariableValue: '=(vars.mpptDetailShow == "null") ? true :
                            !(vars.mpptDetailShow)'
                          style:
                            height: 100%
                            width: 100%
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                color: white
                                f7: ant
                                style:
                                  color: black
                                  font-size: 100px
                                  margin: auto
                - component: f7-block
                  config:
                    style:
                      background: white
                      border: 1px solid black
                      border-radius: 20px
                      left: 15px
                      margin: 0
                      opacity: 1
                      overflow: hidden
                      padding: 0
                      position: absolute
                      top: 133px
                      width: 330px
                    visible: =(vars.mpptDetailShow) == true
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          color: white
                          f7: ant
                          style:
                            color: black
                            font-size: 100px
                            margin: auto

I have also confirmed again that I see the same on a clean install of OH4.0.2 with no binding etc at all.

EDIT: Upgraded test system to openHAB 4.1.0 Build #3606 and see the same. Also do not see any console errors.

The only issue with this way is that the Block starts off being displayed, which I would prefer not. It also requires two clicks to remove.,

Thanks
Mark

Mark_VG · August 30, 2023, 11:04am

I have done a further test with no Popup or anything “fancy”. Just an oh- cell with an oh-button that toggles a variable to affect the oh-cell title:

component: oh-cell
config:
  title: ="Test " + vars.testVariable
slots:
  background:
    - component: f7-block
      config:
        style:
          height: 100%
          margin: 0
          padding: 0
          position: absolute
          width: 100%
    - component: f7-block
      config:
        style:
          bottom: 5px
          left: 0px
          margin: 0
          padding: 0
          position: absolute
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              action: variable
              actionVariable: testVariable
              actionVariableValue: '=(vars.testVariable == "null") ? true : !(vars.testVariable)'
              style:
                height: 100%
                width: 100%
              text: OPEN

This also works on my Overview-TEST page:

However on Overview page the variable does not change:

It looks therefore that there is a problem setting a variable when on the Overview page for some reason?

EDIT: I can also confirm that if I leave the Overview page open for an extended time (30 to 90 minutes) the widget starts to work?

JustinG · August 30, 2023, 2:52pm

I cannot replicate the issue with the test widget you’ve provided. It works just fine both on my test page and on my overview page. I’m on a 4.1 snapshot that’s a few weeks old (#3576), so between 4.0.2 and your newest snapshot test. I’m testing it on chrome (although according to the angry “update” button at the top, I’m not on the very latest version of chrome); that appears to be the browser you are using as well in the video.

Do you see any errors appear in the browser console when you click on the button?

Ok, this is just getting weird…

Mark_VG · August 30, 2023, 3:51pm

I am on the latest Chrome, though I have tested with edge as well as Firefox and see the same issue.

I also see the issue with the Android App, though not able to test that it works if the page has been open for an extended time. I will try figure a way to test with that.

There are no errors in the browser console. This is just after a page refresh on my “clean” install. Before refresh was working, after not:

Very… Just don’t know what else to try. I can’t understand why only the Overview page is affected and even on a completely clean install.

JustinG · August 30, 2023, 4:16pm

What about initializing the variable on the overview page? Does that help?

config:
  defineVars:
    testVariable: true

Mark_VG · August 30, 2023, 4:51pm

Do you mean via the “Code” tab on the actual overview page?

I applied the code there, extract as follows:

config:
  label: Overview
  defineVars:
    testVariable: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: oh-cell
                config:
                  title: Test
                slots:
                  background:
                    - component: f7-block
                      config:
                        style:
                          height: 100%

Strangely that does seem to help when in the Settings, Pages view. But the variable is not defined when the actual Overview page is viewed.

I also thought from a while back it was not possible to define a variable? I even logged a GIT request for that?

Tested with random value and is set on the page when veiwed via Settings/Pages. But not on actual page

Also managed to test with Android App. Same symptom. If yoh wsut on the page long enough it works

JustinG · August 30, 2023, 5:45pm

Ok, I think you’ve got something that warrants a github issue.

I was able to reproduce your error to some extent now. When I first tested your stripped down widget code, I actually saved it as a standalone widget and added that widget to the overview page. This works exactly as expected. Just now, I added that widget to the overview page again and also added the same yaml directly to the overview page right next to it. This gives me two identical widgets side-by-side. The one that is the standalone widget still works as expected, but the one defined in-line on the page does not show any change in the variable status either on that widget or on another widget referencing that page variable. You are correct; there is something not working about variables defined on the overview page (which is odd, as that part of the overview page code does not appear to have changed in 3 years).

It has never been, and is still not, possible to define variables with default values in the widget editor. It has been possible to define variables on pages using defineVars nearly since the beginning because one of the original ideas behind variables was the ability to pass information between different widgets on the same page, and this gives the variables a page-wide context so all widgets can access them.

Indeed, it seems that whatever is impacting variable use on the overview page is effecting even the initializing of the variables using defineVars but only when displayed, the editing window does appear to work.

This is still the most mysterious part. It seems that eventually the overview page variable system does come online, but I cannot begin to image why this take 30 minutes. That make no sense at all to me.

Mark_VG · August 30, 2023, 5:57pm

Thanks for all the help Justin. I will submit an issue in the morning. Am I correct that this would be under webui?

JustinG · August 30, 2023, 5:59pm

That’s where I’d start.

Mark_VG · August 31, 2023, 6:05am

I did not realize that defineVars should be available on the Overview page. This would go a long way to eliminate warnings such as:

07:59:32.346 [WARN ] [se.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined_Partition_In_Exit_Delay
07:59:32.346 [WARN ] [se.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined_Partition_Has_All_Zones_Closed

which result from the variable not having been initialized yet when the page is opened.

Hopefully some day my feature request will get picked up

github.com/openhab/openhab-webui

[webui]Extend props. default value to vars.

opened 05:09PM - 22 Aug 22 UTC

Mark-VG

enhancement main ui

As discussed in https://community.openhab.org/t/oh3-widget-vars-default-value/13…8318 it is currently not possible to set a default value for a variable in an OH3 widget. Being able to do so would simplify many widgets and remove the need to manually protect against undefined variable son each and every expression. The props. default value issue was resolved in https://github.com/openhab/openhab-webui/pull/1049/commits/cf7cfd9e5b7d2156f1b55c2c0f67698dade6e00f and it would be great is this could be extended to cater for variables as well. The following widget code does not work, as the var. default value is not working: ``` uid: demo:default_vars tags: [] props: parameters: - default: This is a default value description: A text prop label: Prop 1 name: prop1 required: false type: TEXT parameterGroups: [] timestamp: Aug 22, 2022, 5:38:10 PM component: f7-card config: title: =(vars.prop1 || 'No Default Value Set') ``` The following is the result: ![image](https://user-images.githubusercontent.com/84638697/185978525-68e6fe77-ed76-4dd3-9d9f-4dc854c6934e.png) However when using props. as follows: ``` uid: demo:default_vars tags: [] props: parameters: - default: This is a default value description: A text prop label: Prop 1 name: prop1 required: false type: TEXT parameterGroups: [] timestamp: Aug 22, 2022, 5:38:10 PM component: f7-card config: title: =(props.prop1 || 'No Default Value Set') ``` the default value is used and results as follows: ![image](https://user-images.githubusercontent.com/84638697/185979033-73858538-e45c-44fd-b2ac-6848f00bc386.png) In my widget I use many vars. expressions as they are carried across to other expressions etc and are changed in the widget, which it appears is not supported with props. It would be useful to many if the default value could be extended to variables as well as the current props.

I have logged this current issue as follows:

github.com/openhab/openhab-webui

[MainUI] Overview Page prevents variables from working correctly in widgets etc

opened 05:55AM - 31 Aug 23 UTC

Mark-VG

bug main ui

## The problem I use variable inside certain widgets to control the visibilit…y of blocks depending on the state of a variable defined inside a widget. The widget I developed worked perfectly in the Widget Editor as well as on my Overview-TEST page. However when I put it live on the Overview page I could not get the f7-block to display on activating the variable. The following is what should happen vs what actually happens (as you will see pressing OPEN should toggle the variable between true and false): ![Overview-TEST](https://github.com/openhab/openhab-webui/assets/84638697/3fba2f9c-85ff-45d3-833e-22acaed82bbb) ![Overview](https://github.com/openhab/openhab-webui/assets/84638697/60ea71a3-3328-4035-bb3b-31271dce8a4e) The widget code I used for this test is: ``` component: oh-cell config: title: ="Test " + vars.testVariable slots: background: - component: f7-block config: style: height: 100% margin: 0 padding: 0 position: absolute width: 100% - component: f7-block config: style: bottom: 5px left: 0px margin: 0 padding: 0 position: absolute width: 100% slots: default: - component: oh-button config: action: variable actionVariable: testVariable actionVariableValue: '=(vars.testVariable == "null") ? true : !(vars.testVariable)' style: height: 100% width: 100% text: OPEN ``` During debugging it also became evident that when initializing a variable on the actual Overview page as follows (code extract from the code tab of Overview page: ``` config: label: Overview defineVars: testVariable: zzzaaabbb blocks: - component: oh-block config: {} slots: default: - component: oh-grid-cells config: {} slots: default: - component: oh-cell config: title: Test slots: background: ``` The variable ```defineVars``` is not processed on the actual Overview page, however it is processed on the Setting, Pages, Overview page used for editing etc. ![image](https://github.com/openhab/openhab-webui/assets/84638697/d155c73f-34e7-4ed1-b9f9-66e8e41130ce) VS: ![image](https://github.com/openhab/openhab-webui/assets/84638697/df461b50-dbdf-43ea-9fd0-2745e2492400) It is also important to note that the widget seems to start working on the Overview page if the Overview page is left active on a browser for an extended period (>30min). After that period for some reason the widget just works. However if the page is refreshed the widget once again stops working I have also checked and the are no errors reported on the browser console when trying the press the button etc to cause the widget to fail. I have reproduced this issue on my Live system, on a Clean install running OH 4.0.2 as well as on that system upgraded to 4.1.0 Build #3606 I have also tested with Chrome, Edge, Firefox and the Android APP, and see the same issue all 4. ## Expected behavior I would expect that the widget would perform the same way on the Overview page as on any other page as well as on the widget editor and that variables defined using ```defineVars:``` should be honored on all pages. I am baffled by the fact that the widget starts working after an extended period of time of the Overview page being active. ## Steps to reproduce 1. Create a new Cell on the Overview page using the Setting, Pages, Overview, + option, Cell 2. Edit the newly created Cell and choose Edit YAML. 3. Paste the following code over the existing YAML: ``` component: oh-cell config: title: ="Test " + vars.testVariable defineVars: testVariable: false slots: background: - component: f7-block config: style: height: 100% margin: 0 padding: 0 position: absolute width: 100% - component: f7-block config: style: bottom: 5px left: 0px margin: 0 padding: 0 position: absolute width: 100% slots: default: - component: oh-button config: action: variable actionVariable: testVariable actionVariableValue: '=(vars.testVariable == "null") ? true : !(vars.testVariable)' style: height: 100% width: 100% text: OPEN ``` 4. Save the Overview page 5. Navigate to the Overview page and test. The cell will display "Test undefined" and does not toggle the "undefined" to true and false as it should 6. Leave the Overview page open for an extended period (>30mins) and try again and the widget will perform as expected. In order to test the ```defineVars``` setting the steps to reproduce would be: 1. Navigate to Settings, Pages, Overview, Code Tab 2. Add the following under the ```label: Overview``` setting ``` defineVars: testVariable: MyVariableTest ``` 3. Save the Overview Page 4. Click on "Run Mode (Ctrl-R) 5. The Cell will display with the correct variable defined 6. Navigate to the Overview Page, the Cell will display with the variable "undefined" (and widget will not work to toggle) ## Your environment ``` runtimeInfo: version: 4.0.2 buildString: Release Build locale: en-ZA systemInfo: configFolder: C:\openHAB\conf userdataFolder: C:\openHAB\userdata logFolder: C:\openHAB\userdata\logs javaVersion: 17.0.8 javaVendor: Azul Systems, Inc. javaVendorVersion: Zulu17.44+15-CA osName: Windows 10 osVersion: "10.0" osArchitecture: amd64 availableProcessors: 8 freeMemory: 619645656 totalMemory: 1073741824 startLevel: 100 bindings: null clientInfo: device: ios: false android: false androidChrome: false desktop: true iphone: false ipod: false ipad: false edge: false ie: false firefox: false 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: true locationbarVisible: true menubarVisible: true navigator: cookieEnabled: true deviceMemory: 8 hardwareConcurrency: 8 language: en-US languages: - en-US - en onLine: true platform: Win32 screen: width: 1920 height: 1080 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 timestamp: 2023-08-31T05:36:55.056Z ``` ## Browser console ``` Proxy: need Partition4_Detailed_Partition_State app.e4469a9e02bf8bc86419.js:7 updateTrackingList: Pending tracking list update, not calling the API app.e4469a9e02bf8bc86419.js:7 Updating tracking list: ["ParadoxpanelEVO192_PanelState","ParadoxpanelEVO192_Voltage","undefined_Partition_In_Exit_Delay","undefined_Partition_Has_All_Zones_Closed","ParadoxpanelEVO192_BatteryVoltage","ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input","ShellyGateshelly1a4cf12f41d5e10163199231_Input","Shelly_UNI_Garage_ElectricFence_State","ShellyGarageDoorshelly1a4cf12f486ac10163199232_Power","ShellyGateshelly1a4cf12f41d5e10163199231_Power","Shelly_UNI_Garage_ElectricFence","GPSGroup_LastSeen","GPSMark_LastSeen","GPSRiley_LastSeen","GPSEthan_LastSeen","GPSAnne_LastSeen","SunSynk_Battery_LastUpdate","SunSynk_Battery_Status","SunSynk_Battery_Voltage","SunSynk_Battery_SOC","SunSynk_Battery_Temp","ShellyGateshelly1a4cf12f41d5e10163199231_Temperature","HarmonyHubMarkHub_CurrentActivity","SunSynk_vac_L1_L2","SunSynk_inv_Total_Power_175","SunSynk_gen_To_Mi_Power_166","SunSynk_acL1_Power_167","SunSynk_Load_Grid","SunSynk_MPPT_TOTAL","UI_Refresh_Timer","GPSMarkatHome","GPSRileyatHome","GPSEthanatHome","GPSAnneatHome","GPSAnneatMerv","GPSRileyatWilden","GPSEthanatWilden","GPSAnneatHoylake","GPSRileyatHoylake","GPSEthanatHoylake","LocalSunRise_StartTime","LocalSunSet_StartTime","LocalMoon_PhaseName","LocalMoon_Sign","LocalMoonRise_StartTime","LocalMoonSet_StartTime","LocalMoon_FullMoon","Lounge_Room_Switch","Lounge_Room_Brightness","LoungeRoom_ColorTemperature","LoungeRoom_Color","Lounge_Room_Scene","Riley_Room_Switch","Riley_Room_Brightness","RileyRoom_ColorTemperature","RileyRoom_Color","Riley_Room_Scene","Ethan_Room_Switch","Ethan_Room_Brightness","EthanRoom_ColorTemperature","EthanRoom_Color","Ethan_Room_Scene","ShellyEM_MAINS_TotalEnergy_Switch","ShellyEM_MAINS_TotalEnergy_Monthly","ShellyEM_Mains_LastStored","ShellyEM_MAINS_TotalEnergy","ShellyEM_Mains_TotalEnergy_PreviousMonth","SunSynk_MPPT1_House","SunSynk_MPPT2_Garage","SunSynk_Battery_Power","SunSynk_Inverter_Load_Power","SunSynk_inv_Current_L1_164","Partition1_PartitionState","Partition2_PartitionState","Partition3_PartitionState","Partition4_PartitionState","Partition1_Partition_In_Exit_Delay","Partition2_Partition_In_Exit_Delay","Partition3_Partition_In_Exit_Delay","Partition4_Partition_In_Exit_Delay","Partition1_Partition_Label","Partition1_Detailed_Partition_State","Partition2_Partition_Label","Partition2_Detailed_Partition_State","Partition3_Partition_Label","Partition3_Detailed_Partition_State","Partition4_Partition_Label","Partition4_Detailed_Partition_State"] 10app.e4469a9e02bf8bc86419.js:35 Setting keepalive interval seconds 10 ``` ## Additional information There is a lot of detail in the community thread I created around this issue: https://community.openhab.org/t/oh4-0-2-cell-based-widget-not-working-on-overview-page-but-works-on-other-pages/149172 A slightly more complex widget that also does not work. Uses more level for the variable: ``` component: oh-cell config: title: ="Test " + vars.testVariable slots: background: - component: f7-block config: style: height: 100% margin: 0 padding: 0 position: absolute width: 100% - component: f7-block config: style: bottom: 5px left: 0px margin: 0 padding: 0 position: absolute width: 100% slots: default: - component: oh-button config: popupOpen: .test1234-pop action: variable actionVariable: testVariable actionVariableValue: '=(vars.testVariable == "null") ? true : !(vars.testVariable)' style: height: 100% width: 100% text: OPEN - component: f7-popup config: class: test1234-pop style: --f7-popup-tablet-height: 720px --f7-popup-tablet-width: 360px background-color: rgb(220,220,220) border-radius: 30px height: 720px text-overflow: ellipsis width: 360px slots: default: - component: f7-block config: popupClose: .test1234-pop style: background-color: rgb(220,220,220) border-radius: 30px height: 720px margin: 0 padding: 0 text-overflow: ellipsis width: 360px slots: default: - component: oh-button config: clearVariable: - DetailShow - testVariable large: true popupClose: .modal-in style: background: rgb(220,220,220) color: white display: flex height: 30px left: 5px position: absolute top: 5px width: 30px z-index: 999 slots: default: - component: f7-icon config: color: white f7: clear_fill style: color: black font-size: 20px margin: auto - component: Label config: style: font-size: 25px font-weight: 500 padding-left: 50px width: 100% text: Test - component: Label config: style: font-size: 25px font-weight: 500 padding-left: 50px width: 100% text: ="Variable Value " + vars.DetailShow - component: f7-block config: style: margin: 0 padding: 0 top: 0px slots: default: - component: oh-link config: action: variable actionVariable: DetailShow actionVariableValue: '=(vars.DetailShow == "null") ? true : !(vars.DetailShow)' style: height: 100% width: 100% z-index: 0 slots: default: - component: f7-icon config: color: white f7: ant style: color: black font-size: 100px margin: auto - component: Label config: style: font-size: 25px font-weight: 500 padding-left: 50px width: 100% text: Click on Ant - component: f7-block config: style: background: white border: 1px solid black border-radius: 20px left: 15px margin: 0 opacity: 1 overflow: hidden padding: 0 position: absolute top: 133px width: 330px visible: =(vars.DetailShow) == true slots: default: - component: f7-icon config: color: white f7: ant style: color: black font-size: 100px margin: auto ```

ubeaut · August 31, 2023, 6:20am

So that is why I am getting this:?
2023-08-31 16:16:17.931 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn’t exist: undefined

If I open the page I get that warning.
Then I go to another page and if I open that page where I am getting the warning I don’t get the warning.
The widgets I have on that page all seem to work and I cannot see anything that I have that is not being referenced.
The warning I get doesn’t even say what the item is (that would be handy if it did).

Mark_VG · August 31, 2023, 6:29am

Mine is slightly different. It is constructed from the undefined part which is prepended to create the actual item name.

Yours is referring a completely undefined item, but assume it could be a similar issue if you are using variables etc?

ubeaut · August 31, 2023, 6:31am

It doesn’t bother me but it is something I have noticed.
When I get time I may look deeper into the issue.
I did modify a widget someone else had done and I cut bits out of it so there may be something I have missed.
Probably something I have done.

JustinG · August 31, 2023, 2:46pm

Your pages work fine because this is just a warning. It doesn’t interfere with the functioning of the page. But, it’s just as Mark said; it means that on that particular page you have a widget that attempts to connect to an item, but the expression that should result in the name of an existing item instead results in the name of an item which doesn’t exist (in this case the full expression result is undefined).

I went through a while back and fixed all the instances of that in my more used pages. It shaved about 250ms off of the loading time for the pages and got rid of the warnings and nothing else.