CustomWidget PopOver - Item from parameter does not use the configuration of the specific widget, but the last widget

Tags: #<Tag:0x00007efecd4b2ee0> #<Tag:0x00007efecd4b2d78>

Hello everyone,

I am quite new to OpenHab and try to setup my system with OpenHab3. For the heating control, I use a custom widget based on the tutorial from Mathew. Thanks a lot for that!

My widget uses a popover to set the target temperature.

Having one widget everything works fine, but with more than one instances of the widget, the popover just takes the last property definition for the popover. In the rest of the widget (not the popover) everything works fine and uses the specific configuration. Anyone has a tipp on how to set the popover to use the specific property of the widget?

uid: heatingWidget
tags: []
props:
parameters:
- description: Room Name
label: Room Name
name: room
required: true
type: TEXT
- context: item
description: Temperature item
label: roomtemperatur
name: itemRoomTemp
required: true
type: TEXT
- context: item
description: Humidity item
label: Humidity
name: itemHumidity
required: true
type: TEXT
- context: item
description: Target Temperature item
label: Target Temperature
name: itemTargetTemp
required: true
type: TEXT
- context: item
description: heat power state item
label: HeatPowerState
name: itemHeatpower
required: true
type: TEXT
- context: item
description: The remainding duration up to default schedule
label: TimerDuration
name: itemTimerDuration
required: true
type: TEXT
parameterGroups: []
timestamp: Jan 10, 2021, 2:53:43 PM
component: f7-card
config:
title: = “Heating " + props.room
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: = props.itemTargetTemp
actionVariableValue: = props.itemTargetTemp
popoverOpen: .heatingTargetTemperaturePopover
style:
position: absolute
top: 0px
width: 100%
height: 100%
slots:
default:
- component: f7-popover
config:
class: heatingTargetTemperaturePopover
style:
max-width: 400px
min-width: 270px
slots:
default:
- component: oh-slider-card
config:
item: = props.itemTargetTemp
title: = “Heating " + (props.room)
min: 10
max: 25
step: 1
label: true
scale: true
unit: °
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- align-items-center
- display-flex
- justify-content-space-between
- align-content-stretch
slots:
default:
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: thermometer
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemRoomTemp].displayState || items[props.itemRoomTemp].state)
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: drop
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemHumidity].displayState || items[props.itemHumidity].state)
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: decrease_quotelevel
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemTargetTemp].displayState || items[props.itemTargetTemp].state)
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: gauge
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemHeatpower].state) + " %”
style:
fontSize: 14px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: timer
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemTimerDuration].state) + " min”
style:
fontSize: 14px

Interesting that you (almost) achieved to do it like this.
I’d suggest another approach that is likely to work better:

Create a widget for the contents of your popover.
Define props for the title and the item.

uid: heating_control
props:
  parameterGroups: []
  parameters:
    - name: title
      label: Title
      type: TEXT
      description: The title
    - name: item
      label: Item
      type: TEXT
      context: item
      description: An item to control
tags: []
component: oh-slider-card
config:
  title: =props.title
  item: =props.item
  min: 10
  max: 25
  label: true
  scale: true

Then on your button use a popover action to open your other widget.

component: oh-button
config:
  ...
  action: popover
  actionModal: widget:heating_control
  actionModalConfig:
    title: =props.room
    item: =props.itemTargetTemp
1 Like

This is great! It worked. Thank you very much.

The popover now just pops up at a different place, but this is fine.

If someone is interested, here are the two widget configurations:

The popover widget

uid: heating_control
props:
  parameterGroups: []
  parameters:
    - name: title
      label: Title
      type: TEXT
      description: The title
    - name: item
      label: Item
      type: TEXT
      context: item
      description: An item to control
tags: []
component: oh-slider-card
config:
  title: =props.title
  item: =props.item
  min: 10
  max: 25
  label: true
  scale: true
  unit: °

And the main widget

uid: heatingWidget
tags: []
props:
  parameters:
    - description: Room Name
      label: Room Name
      name: room
      required: true
      type: TEXT
    - context: item
      description: Temperature item
      label: roomtemperatur
      name: itemRoomTemp
      required: true
      type: TEXT
    - context: item
      description: Humidity item
      label: Humidity
      name: itemHumidity
      required: true
      type: TEXT
    - context: item
      description: Target Temperature item
      label: Target Temperature
      name: itemTargetTemp
      required: true
      type: TEXT
    - context: item
      description: heat power state item
      label: HeatPowerState
      name: itemHeatpower
      required: true
      type: TEXT
    - context: item
      description: The remainding duration up to default schedule
      label: TimerDuration
      name: itemTimerDuration
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jan 10, 2021, 2:53:43 PM
component: f7-card
config:
  title: = "Heating " + props.room
slots:
  default:
    - component: oh-button
      config:
        action: popover
        actionModal: widget:heating_control
        actionModalConfig:
          title: =props.room
          item: =props.itemTargetTemp
        style:
          position: absolute
          top: 0px
          width: 100%
          height: 100%
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - align-items-center
                - display-flex
                - justify-content-space-between
                - align-content-stretch
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemRoomTemp].displayState || items[props.itemRoomTemp].state)
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: drop
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemHumidity].displayState || items[props.itemHumidity].state)
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: decrease_quotelevel
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemTargetTemp].displayState ||  items[props.itemTargetTemp].state)
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: gauge
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemHeatpower].state) + " %"
                          style:
                            fontSize: 14px
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - align-items-center
                      - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: timer
                          size: 36
                          color: blue
                          class:
                            - margin-top
                      - component: Label
                        config:
                          text: =(items[props.itemTimerDuration].state) + " min"
                          style:
                            fontSize: 14px
1 Like