[help] set global variable from custom component onClick?

hey all! I am trying to set a variable selected to share between pages, after an onClick event inside my custom component.

what i have working:

  • component model gets updated with selected value onClick
  • a page-scoped transformer responding to updated model

i know i can set a variable in a query or a component's event handler, but it seems transformers can't do this, right?

wondering if anyone has creative workarounds. thanks for reading!

Hey @trz-justin-dev! You've probably noticed that custom components are rendered within an iframe, making it a little challenging to communicate with the parent window. This should be the perfect use case for postMessage but I've had some trouble getting it to work. :thinking: I'm fairly certain it's a byproduct of the way the different elements are sandboxed but there doesn't seem to be a good workaround. I'll keep playing around with that, though, because I really want to get it to work.

In the meantime - it's a little wacky, but you could probably create a dummy resource query that doesn't actually do anything but watches customComponent.value. In its success callback, you could trigger a JS query that updates the variable. Would that work for you?

1 Like

hey @Darren thank you for your reply. i love this idea and i’ll try it tomorrow.

1 Like