OH3 Widget popup with populated var when called via f7-popup but not with action:popup

Mark_VG · December 13, 2022, 8:02am

I have created a popup widget with a fixed size after much assistance from Justin G, however have run into a weird issue that I just can’t solve/debug.

When calling the same widget via action:popup my vars are initialized as “null”, however when called via f7-popup the var seems to be populated and I don’t know where the value is coming from or how to alter the initial value.

By way of explanation here is a demo of what I am doing with a stripped down version of my end widget:

Popup Test

The first cell calls the widget via f7-popup (to take advantage of the fixed size I require). The second uses action:popup which does not allow any configuration of the actual popup size.

Widget Code:

uid: caddx_popup_size_text
tags: []
props:
  parameters:
    - default: Partition1
      description: Default (Fallback) Partition
      label: Default (Fallback) Partition
      name: selectedPartition
      required: false
      type: TEXT
    - description: Show Tooltips in Widget
      label: Show Tooltips in Widget
      name: tooltipEnable
      required: false
      type: BOOLEAN
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
  parameterGroups: []
timestamp: Dec 13, 2022, 9:39:26 AM
component: f7-page
config:
  style:
    --f7-bars-translucent-blur: none
    --f7-bars-translucent-opacity: none
    --f7-card-margin-horizontal: 0px
    --f7-navbar-bg-color: transparent
    --f7-navbar-border-color: transparent
    --f7-navbar-font-size: 15px
    --f7-navbar-height: 35px
    --f7-navbar-link-color: white
    --f7-navbar-shadow-image: none
    --f7-navbar-text-color: white
    --f7-popup-tablet-width: 40px
    background-color: rgb(220,220,220)
    border-radius: 20px
    height: 320px
    left: 0px
    text-overflow: ellipsis
    top: 0px
    width: 360px
slots:
  default:
    - component: oh-button
      config:
        bgColor: gray
        large: true
        popupClose: .modal-in
        style:
          color: white
          height: 55px
          left: 6.0%
          position: absolute
          top: 5%
          width: 40px
        tooltip: '=!(props.tooltipEnable) ? false : "Close Popup"'
        tooltip-trigger: hover
      slots:
        default:
          - component: f7-icon
            config:
              color: white
              f7: clear_fill
              style:
                color: black
                font-size: 25px
                left: 20%
                overflow: hidden
                position: absolute
                top: 30%
    - component: f7-badge
      config:
        bgColor: gray
        style:
          border-radius: 0px
          height: 55px
          left: 20%
          position: absolute
          top: 5%
          width: 60%
    - component: oh-link
      config:
        bgColor: gray
        large: true
        raised: true
        style:
          left: 20%
          position: absolute
          top: 5.5%
          width: 60%
        text: '=(vars.selectedPartition  === NULL) ? "Select Partition" : vars.selectedPartition '
        textColor: white
        tooltip: '=!(props.tooltipEnable) ? false : "Selected Partition"'
        tooltip-trigger: hover
    - component: f7-block
      config:
        class:
          - padding
        style:
          --f7-button-bg-color: var(--f7-card-bg-color)
          --f7-button-text-color: var(--f7-text-color)
          --f7-theme-color-rgb: var(--f7-color-blue-rgb)
          position: absolute
          top: 100px
          width: 100%
          z-index: 999
      slots:
        default:
          - component: f7-row
            config:
              class: no-gap
              style:
                --f7-button-bg-color: transparent
                --f7-theme-color: var(--f7-color-blue)
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: partition
                    fragment: true
                    in:
                      - 1
                      - 2
                      - 3
                      - 4
                      - 5
                      - 6
                      - 7
                      - 8
                  slots:
                    default:
                      - component: f7-row
                        config:
                          width: "10"
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: variable
                                actionVariable: selectedPartition
                                actionVariableValue: ='Partition' + loop.partition
                                bgColor: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? "gray" : (items["Partition" + loop.partition + "_Armed"].state === "ON") ? "red" : "green"'
                                clearVariable: true
                                disabled: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? true : false'
                                fill: true
                                raised: false
                                style:
                                  --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                                  --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                                  border-radius: 12px
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  white-space: nowrap
                                  z-index: 999
                                text: =["P" + loop.partition]
                                textColor: white
                                tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition to current run"'
                                tooltip-trigger: hover
          - component: f7-row
            config:
              class: no-gap
              style:
                --f7-button-bg-color: transparent
                --f7-theme-color: var(--f7-color-blue)
            slots:
              default:
                - component: Label
                  config:
                    text: selectedPartition currently -
                - component: Label
                  config:
                    text: "=([vars.selectedPartition]) "

Cell Code for f7-popup:

component: oh-cell
config:
  title: Alarm Popup Test
slots:
  background:
    - component: f7-block
      config:
        bgColor: none
        style:
          height: 40%
          left: 0%
          position: absolute
          top: 60%
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              popupOpen: .test-pop
              style:
                height: 100%
                width: 100%
              text: OPEN
    - component: f7-popup
      config:
        class: test-pop
        style:
          background-color: rgb(220,220,220)
          border-radius: 30px
          height: 320px
          text-overflow: ellipsis
          width: 360px
      slots:
        default:
          - component: widget:caddx_popup_size_text
            config:
              popupClose: .test-pop
              tooltipEnable: true

Cell Code for action: popup:

component: oh-cell
config:
  action: popup
  actionModal: widget:caddx_popup_size_text
  actionModalConfig:
    tooltipEnable: true
  title: Alarm Direct Popup

Any advise will be greatly received.

EDIT: So did more testing. Cut the widget to completely bare bones and inserted a non-existent var to see what happened. That comes up as “null”

Also took most everything out of the oh-cell:

component: oh-cell
config:
  title: Alarm Popup Test
slots:
  background:
    - component: f7-block
      config: null
      slots:
        default:
          - component: oh-button
            config:
              popupOpen: .test-pop
              text: OPEN
    - component: f7-popup
      config:
        class: test-pop
      slots:
        default:
          - component: widget:caddx_popup_size_text_V2_no_repeater
            config:
              popupClose: .test-pop

And Widget:

uid: caddx_popup_size_text_V2_no_repeater
tags: []
props:
  parameters:
    - description: Show Tooltips in Widget
      label: Show Tooltips in Widget
      name: tooltipEnable
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Dec 13, 2022, 2:08:54 PM
component: f7-row
slots:
  default:
    - component: Label
      config:
        text: selectedPartition currently -
    - component: Label
      config:
        text: "=([vars.selectedPartition]) "
    - component: Label
      config:
        text: selectedPartitionZZZ currently -
    - component: Label
      config:
        text: "=([vars.selectedPartitionZZZZ]) "

hmerk · December 13, 2022, 12:51pm

There is no need to put the vars into square brackets, you can just use

 text: =vars.selectedPartition

Mark_VG · December 13, 2022, 12:57pm

Thanks for the feedback. Yes, displays without the square brackets, but does not solve the issue of the var that has a spurious value?

The square bracket does FORCE the value to be displayed even if null, so helpful for debugging

JustinG · December 13, 2022, 3:08pm

The mechanism for opening a popup using the OH modal action is completely different from the f7 popupOpen feature. For the f7 feature, the popup is rendered as part of the page, but hidden , until it is activated. For the OH action, the vue app “navigates” to that popup modal on demand which means that the popup is created in a different page context than the page that is calling it.

One of the intended functions of the widget vars is to be able to communicate between widgets on a page, so widgets on a page can access the same variable.

Most likely, what is going on is that your page has already defined the selectedPartition variable. So, when you open the popup the f7 way (i.e., in the same page context) the popup has access to the already defined variable, but when you open it the OH modal action way (i.e., in a new page context) it does not have access to the original page’s variables.

If you’re going to have multiple copies of a widget on a page, then this sort of thing is to be expected. Assuming that you want to not have the behavior (that is you don’t want each popup to have the value defined from some other popup) there are a couple of ways to handle it:

Any of the oh components that handle action should also have the clearVariable property which takes the name of the variable you want to erase (or an array if you have multiple variables you want cleared). So just add that to the button that closes your popup and anytime the popup is closed the selectedPartition variable will be reset to null. This is the easier and more elegant option but only works if you don’t need the variable value persisted between appearances of the popup.
Tweak the code of the widgets so that each one uses a variable with a distinct name. Add some sort of prefix parameter to the widget (or if the widget is already tied to a particular item, just use the item name as a prefix). Then make all of your variable calls vars[prefix + 'selectedPartition']. Now a widget that uses a1selectedPartition won’t read the variable of the widget that uses b2selectedPartition.

Mark_VG · December 13, 2022, 3:22pm

Thanks once again Justin.

Just to clarify for my own sanity…

If I use an oh-cell to call a widget that is all in an f7-page does that not make it a different page context?

I will try the options you suggested (In fact was going to try a different var name when I got a chance.

I had tried clearVariable, but think I had the syntax wrong or put in the incorrect location in code. I had:

                            - component: oh-button
                              config:
                                action: variable
                                actionVariable: selectedPartition
                                actionVariableValue: ='Partition' + loop.partition
                                bgColor: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? "gray" : (items["Partition" + loop.partition + "_Armed"].state === "ON") ? "red" : "green"'
                                clearVariable: true
                                disabled: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? true : false'
                                fill: true

Clearly wrong

EDIT: As usual Justin you are right… Added to the close button and works great. Weird that the issue persisted over a reboot though.

JustinG · December 13, 2022, 3:33pm

The mere presences of an f7-page component does not define anything as a page as far as the vue app or OH is concerned. f7-page just creates an html element with what f7 thinks should be appropriate css for building a page. You can have multiple widgets that all use an f7-page component on one OH page, but when the vue app navigates to that OH page, the way OH builds the page, that is one single context.

You had the syntax wrong; it is not a boolean property:

mstormi · February 13, 2023, 11:13pm

On a sidenote, would any of you know how to define the OH popup window size ?

JustinG · February 14, 2023, 12:41am

To my knowledge it is not possible to change the size of the popup that is created by using the OH popup action. If you want to control the size or other visual parameters of the widget then you have to go the route of building the popup as part of the widget using the f7-popup component and the popupOpen series of properties.