Widget with F7 expandable not displaying params

Setup, Configuration and Use Beginners
1

Hello,

I created a widget

uid: widgetSteckdose
tags:
  - Soll Tag
  - homekit-look
  - in use
props:
  parameters:
    - description: Location?
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - description: Thermostate icon f7
      label: f7 icon name
      name: icon1
      required: false
      type: TEXT
    - description: Humidity icon f7
      label: f7 icon name
      name: icon2
      required: false
      type: TEXT
    - context: item
      description: A actual power item to display
      label: Item
      name: itemActualPower
      required: false
      type: TEXT
    - context: item
      description: A total power item to display
      label: Item
      name: itemTotalePower
      required: false
      type: TEXT
    - context: item
      description: A daily total power item to display
      label: Item
      name: itemDailyTotalPower
      required: false
      type: TEXT
    - context: item
      description: the switch state
      label: Item
      name: itemSwitch
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 14, 2023, 12:26:29 PM
component: f7-card
config:
  class:
    - card-expandable-animate-width
  expandable: true
  noShadow: false
  style:
    --f7-card-expandable-margin-horizontal: 5px
    --f7-card-expandable-margin-vertical: 10px
    --f7-card-expandable-tablet-border-radius: 2px
    --moz-user-select: none
    --ms-user-select: none
    --webkit-user-select: none
    background-color: '=(Number.parseFloat(items[props.itemDailyTotalPower].state.split(" ")[0]) > 60) ? "white" : (Number.parseFloat(items[props.itemActualPower].state.split(" ")[0]) > 22) ? "white" : "rgba(228,228,228,0.9)"'
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    display: flex;
    flex-direction: column
    height: 120px
    justify-content: space-between
    max-height: 120px
    max-width: 400px
    min-height: 120px
    min-width: 110px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 100%
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: -4px
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          class:
                            - align-self-center
                          f7: =props.icon1
                          size: 22
                          style:
                            color: '=(Number.parseFloat(items[props.itemDailyTotalPower].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemActualPower].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
                            margin-left: -6px
                            margin-top: 0px
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.itemDailyTotalPower].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemActualPower].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
                            font-size: 14px
                            font-weight: 500
                            margin-left: -4px
                            margin-top: 0px
                          text: =props.prop1
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.itemDailyTotalPower].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemitemActualPower].state.split(" ")[0]) > 22) ? "red" : "black"'
                            font-size: 40px
                            font-weight: 350
                            line-height: 1.1
                            margin-left: -2px
                            margin-top: 20px
                          text: =(Number.parseFloat(items[props.itemActualPower].state.split(" ")[0]) * 100 / 100).toFixed(1) + 'W'
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: =props.icon2
                          size: 16
                          style:
                            color: '=(Number.parseFloat(items[props.itemDailyTotalPower].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
                            left: 0px
                            top: 0px
                          visible: =props.itemDailyTotalPower !== undefined
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.itemDailyTotalPower].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"'
                            font-size: 13px
                            font-weight: 500
                            left: 0px
                            margin-top: 0px
                          text: =(Number.parseFloat(items[props.itemDailyTotalPower].state)) + 'kWh'
                          visible: =props.itemDailyTotalPower !== undefined
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: arrowshape_turn_up_right
                          size: 16
                          style:
                            color: rgb(0,0,0,0.5)
                            opacitiy: 0.5
                            padding-right: 0px
                            padding-top: 83px
                            position: absolute
                            right: 0
                            top: 0
                            z-index: 999
                      - component: f7-chip
                        config:
                          bgColor: "=((items[props.itemSwitch].state) == 'ON') ? 'green' : 'red'"
                          style:
                            border-radius: 25px 25px 25px 25px
                            color: white
                            margin-top: -7px
                            position: absolute
                            right: -3px
                            size: 20
                            top: 8px
                            z-index: 2
                          text: =(Number.parseFloat(items[props.itemTotalePower].state)) + 'kWh'
                - component: oh-trend
                  config:
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: var(--f7-theme-color-bg-color)
                      filter: opacity(30%)
                      height: 100%
                      left: 2
                      position: absolute
                      top: 0
                      width: 100%
                      z-index: 1
                    trendItem: =[props.itemActualPower]
                - component: oh-link
                  config:
                    action: group
                    actionGroupPopupItem: =[props.itemGroup]
                    class:
                      - card-prevent-open
                    style:
                      height: 100%
                      left: 0
                      position: absolute
                      top: 0
                      width: 100%
                      z-index: 1

But if I cklik on it the expandable is empty… see here

[openhab hosted at ImgBB — ImgBB]

I tried that all the information which is configured as Property is displayed there in rows. But it is not working…Where is my error?

And the next question is it also possible to display a graph/trend line in this expandable popup?

2

Your error for both of these is the same. Any of the widget configuration properties that require an item (e.g., actionGroupPopupItem and trendItem) use just a string of the item name. What you have:

 trendItem: =[props.itemActualPower]

is actually a 1-element array with a string as the first element, so the widget cannot find the item names you want to work with. Get rid of the [ and ] and jsut use the props object:

 trendItem: =props.itemActualPower

And you should see your trendline. Do the same for the group link and your popup will be populated.

3

Like this

                    actionGroupPopupItem: =props.itemGroup

and

 trendItem: =props.itemDailyTotalPower

Because the “popup” is still empty…

4

That is the correct form of the expression. If the popup is still empty then you need to check if you are setting the itemGroup property correctly or if the item you are selecting is even a group with members to show.

5

Hello,
one more questions. For a trend item. The item must be saved regularly.

Means in the persistance configuartion of this item it must be strategy = everyMinute (for example) and not strategy = everyChange

right?

6

A regular persistence strategy will typically give you better results visually, but as long as the data is persisted in some way you should still get a trend line.