Custom Widget with popup

Setup, Configuration and Use Widgets
1

Hi at all!

I’m creating new widgets for my smarthome.
Now i build a custom widget with some informations on the widget itself.

But i’m looking for a solution to get a popup of the group-items as the installed widgets of OH3.

I didn’t know, where and how i have to picked the action: popup and actionGroupPopupItem: BMW_iX3

This is my code:

uid: BMW-Card
tags: []
props:
  parameters:
    - description: Name des Fahrzeugs
      label: Fahrzeug
      name: title
      required: false
      type: TEXT
    - context: item
      description: Kilometerstand
      label: Item
      name: kilometerstand
      required: false
      type: TEXT
    - context: item
      description: Batteriestatus
      label: Item
      name: batterie
      required: false
      type: TEXT
    - context: item
      description: Reichweite
      label: Item
      name: reichweite
      required: false
      type: TEXT
    - description: Bild des Fahrzeugs
      label: Bild mit Suffix
      name: bild
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 3, 2023, 2:32:55 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 200px
          background: url(/static/bmw5.jpeg)
          background-size: cover
          background-position: left
          border-radius: 12px
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: Label
            config:
              text: =props.title
              style:
                color: black
                margin: 0px 15px
                font-size: 28px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.kilometerstand].state
              iconF7: timer
              iconSize: 20
              color: yellow
              style:
                margin: 0px 90px
                font-size: 20px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.batterie].state
              iconF7: battery_25
              iconSize: 20
              color: yellow
              style:
                margin: 0px 90px
                font-size: 20px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.reichweite].state
              iconF7: compass
              iconSize: 20
              color: yellow
              style:
                margin: 0px 90px
                font-size: 20px
                font-weight: bold
          - component: oh-link
            config:
              action: group
              actionGroupPopupItem: BMW_iX3

Hope, that someone can help me.

Thanx

2

You have them configured correctly in the config section of the oh-link. You’re problem is the the link is not showing because you have not given it anything to display. If you give your link some text, or an icon then you will have something to click on.

If you want the entire widget to be clickable then you can either change the base widget to one of the oh- options that allow actions or just use styling to force the empty link to be the full size of the patent widget.

3

Thanks very much. hmmm… that works perfectly…
only that I now have the font in the too far down on the widget, although I set margin to 0
Wie bekomme ich die Schrift wieder an den oberen Rand des Widgets?

uid: EQA-Card
tags:
  - EQA
  - Auto
props:
  parameters:
    - description: Name des Fahrzeugs
      label: Fahrzeug
      name: title
      required: false
      type: TEXT
    - context: item
      description: Kilometerstand
      label: Item
      name: kilometerstand
      required: false
      type: TEXT
    - context: item
      description: Batteriestatus
      label: Item
      name: batterie
      required: false
      type: TEXT
    - context: item
      description: Reichweite
      label: Item
      name: reichweite
      required: false
      type: TEXT
    - description: Bild des Fahrzeugs
      label: Bild mit Suffix
      name: bild
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 3, 2023, 3:37:23 PM
component: f7-card
config: {}
slots:
  default:
    - component: oh-link
      config:
        action: group
        actionGroupPopupItem: Mercedes_Benz_EQA
        style:
          min-height: 200px
          background: url(/static/eqa.jpeg)
          background-size: cover
          background-position: left
          border-radius: 12px
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: Label
            config:
              text: =props.title
              style:
                color: black
                margin: 0px 15px
                font-size: 0px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.kilometerstand].state
              iconF7: timer
              iconSize: 20
              color: blue
              style:
                margin: 0px 15px
                font-size: 20px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.reichweite].state
              iconF7: compass
              iconSize: 20
              color: blue
              style:
                margin: 0px 5px
                font-size: 20px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.batterie].state
              iconF7: battery_25
              iconSize: 20
              color: blue
              style:
                margin: 0px 0px
                font-size: 20px
                font-weight: bold
4

(Auf Englisch, bitte… :wink:)

Right now, the container created by your oh-link is using flex styling (which you’ve taken advantage to get your column arrangement). If you want the whole column to start at the top of the card, then you just need to add justify-content: flex-start to the styles on the link. If you want the Label at the top of the card and the other pieces in the middle then you will have to start adding additional position styles to the label to override its flex positioning.

5

thanks again. I didn’t now this command.
And sorry for my question in the wrong language. :slight_smile:
I hope that doesn’t happen to me again. English and German in one post… hrggg

But now it looks like very good.
Thank you for your fast answer… :slight_smile:
Wish u a nice weekend.