Triggering events in composite components' children

Hello there,

I had a really good - and shockingly productive! - first day with Composer yesterday. Thank you for that. This is fun!

I would now like to get a better understanding of events in composite components. Specifically, I had the need to set an app variable after a tap on a child component.

It seems that (to enforce encapsulation?), logic flows of child components don’t have access to “the outside world,” e.g., to app variables. Only logic flows of the top-level (outermost) component of a composite component do. So, I figured, alright, this makes sense, I’ll simply do this:

  • Add an output value to the composite component.
  • Set the output value in the child component’s tap handler and then trigger a new tap event in the child after that.
  • The tap event triggered by the child would then bubble up to the top level of the composite component.
  • At the top level I would have another tap handler, which would grab the output value that was set by the child, and copy it over into my app variable.

Turns out that this almost works. The event that I trigger in the child apparently just cannot be a tap event. It looks like it needs to be a custom event. The following worked:

  • At the top level, add a Receive event flow function that listens to Fired from “Trigger event” events.
  • In the child component’s tap handler, trigger this event (instead of simply another tap event) after setting the output value.

My questions:

  • Am I right in assuming that the only way for child components to send events to the top-level component are custom events, i.e., that standard events like tap won’t work?
  • If so, then why does the Trigger event flow function allow me to send a tap event from the child component? What would be a use case for this? I feel like my mental model of events is still a little lacking.

Thanks for any insights you might be able to share!

Hmmmmm not sure about the Trigger event showing tap events, that may be a composite component bug. Passing the tap event from inside to outside doesn’ttttt sound like it should work, and we will be adding some more stuff regarding composite events etc. hopefully in the near future.

But if you want to use app variables etc. inside composites, you can just convert the composite into a container. That’d be the simplest solution for your case, probably.

Screenshot 2021-01-18 at 15.16.24

Thank you for your help, Mevi. Converting a composite into a container is a really useful addition to my toolbelt. Great!

1 Like

Hi @thomas,

I am currently struggling on sending the tap event from inside a composite component to the outside. You said something about setting up a custom event instead, but I cannot figure out how.

Do you have a tipp how to setup the custom event within the composite component?

Thanks a lot

It is no longer possible in the current interface to "convert the composite into a container* as far as I can tell with the new Universal Theme interface. So what is the correct approach now?

Events from within composites work, but don’t get parameters at the moment, so put whatever parameters you need into output properties and then use the events you need.