How to pass on props from custom widget to another custom widget?

What do I need to do differently to pass a props from a widget to another widget inside an f7-popup?
Based on the simplified example below I am not able to pass props.vLabel into an f7-popup which loads a custom widget.

Here is the yaml code:

uid: main-card
tags: []
props:
  parameters:
    - label: Label to be passed on to widget inside an f7-popup
      name: vLabel
      required: false
      type: TEXT
component: oh-button
config:
  popupOpen: .openPopup
slots:
  default:
    - component: whatever
        ...some stuff here
    - component: f7-popup
      config:
        class: openPopup
      slots:
        default:
          - component: widget:popup_widget
            config:
              pTitle: =props.vLabel

Results:
If property pTitle in popup_widget is defined, vLabel is not passed on to pTitle. Instead I get passed on the vLabel of the last custom widget on this page because I use this widget multiple times on a single page.

My other attempt was to delete

pTitle: =props.vLabel

because I was hoping that vLabel gets “propagated” down to the popup_widget but it doesn’t.

Your button can do double duty. Have it set a variable in addition to using the popupOpen and then use the variable for the pTitle expression. That variable will get overriden by each of the multiple widgets on the page, but it doesn’t matter because it will get set to the correct value right before any popup is opened.

This only works because you are using the popupOpen. You can’t have two actions, so you can’t set a variable and use the OH modal action, but you can use one OH action and the f7 popup/popover properties.

Edit:
I almost missed this: Also, because you are using this widget multiple times on a single page, you have to set unique classes for the popups. The actual problem here is that you’re just opening the same popup every time because all your popups have the same class. You need to add something to the class (e.g., props.vLabel) so that each popup has a unique css identifier. If you fix that, you don’t have to worry about the variable workaround.

1 Like

Sure - of course. Popups are not dynamically created when needed - they are already there in html file but just hidden…
Thanks again to my saviour :slight_smile:

HI Justin, what do you think - does my approach look like a solid concept?
I mean, probably it could be done easier by action: popup and providing data via actionmodalconfig.
I have chosen for f7-popup as it gives me more flexibility to control size and position of the popup.
Is there a way of doing it smarter?

That’s really the main deciding factor when I choose. If you are content with the default OH modal dialog then the action is fine, but if you need any control over the styling of the popup itself, then you really want to do it this way.

The only other factor to consider is if the widget is ever going to be put on the marketplace. Then you really want to integrate the popup into the widget like this instead of requiring the download of the widget and a separate popup widget.

I’ve not testing anything systematically, but anecdotally I have seen no performance difference between the two options.

Thanks, that helps.
As I need to pass on 3-4 props to the popup and there is just one variable available I currently see just the way of appending them with a seperator.
I have also looked into actionVariableKey but that does not seem to fit here, too.
Do you have an other idea?

You can use the yaml syntax to make the variable an object for sending multiple values.

actionVariable: objVar
actionVariableValue:
  height: 6
  hair: red
  age: 32

And then access them with standard object notation in expressions:

- component: widget:person
  config: 
    pHeight: =vars.objVar.height
    pHair: =vars.objVar.hair
    pAge: =vars.objVar.age

That’s smart. Thanks a ton. I didn’t know this. I wasn’t even able to find it in the docs.
Why do you know this :slight_smile:

Terminal curiosity, high risk-tolerance, and faith in my backup system.

Ok. Got it working with your help. Side note: if the page is in run mode I get the following error message:


TypeError: undefined is not an object (evaluating '(e.optional?n||{}:n)[t]')

Nothing that worries me, just wanted to mention it if it might be of interest to you.