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.
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?