Raise Fragment or Layout Events that Emit to the Parent Container

Layouts and fragments defined in your application are typically unaware of their parent container's context. This means that events defined within a layout or fragment are "listenable" only within the layout or fragment's scope. To make these events listenable on the parent container (say, a page or another container like a different outer fragment), you'll need to fire custom events that the parent can handle.

Consider this example: Say a fragment defines a form with a Save button. Any time a user updates the form's data and clicks the button, an on-click event triggers a REST call action that saves the updates. To make the update available on the page that consumes the fragments, you'll need a Fire Event action that emits its payload to the fragment container in your action chain. This makes it possible for the page to listen for this custom event, bind an event listener to the same event, and process the payload further if needed.

When a new custom event is fired from the page, keep in mind that the custom event (unlike a page event) "bubbles" up the container hierarchy. Any event listeners in a given flow or page for the event are executed before looking for listeners in the container's parent. The order of container processing is:

The page from where the event is fired
The flow containing the page
The page containing the flow
Recursively up the container, ending with the application.

To make a layout or fragment event listenable on the parent container:

Create a custom event that emits its payload to the parent container.
1. In your layout or fragment's Events tab, click + Custom Event.
2. Enter an event ID (say, shouldemailbesent), then select the option to emit the event's payload to its parent component. For a layout event, select Emit event to page; for a fragment event, select Emit event to container. Click Create.
3. If necessary, select the event in the Events editor, then click Add Parameter next to Payload in the Properties pane to specify the payload that will be passed to the parent container.
4. Enter the payload parameter name, select its type, and click Create. In our fragment example, this might be a shouldEmailBeSent payload parameter of type boolean:
  
  Description of the illustration emittocontainer-event.png
Note:
When an event is set to emit its payload to its parent container, its propagationBehavior property is set to container in the fragment or layout model. The default is self, indicating that the event can only be handled by event listeners defined in the layout or fragment.
Create an action chain with the Fire Event action that will be triggered when the event occurs.
1. Switch to the layout or fragment's Action Chains tab, click + Action Chain, enter a ID, and click Create to create a new action chain. You can also select an existing action chain.
2. In your action chain, drag and drop a Fire Event action.
3. In the Fire Event's Properties pane, select the event to be fired (for example, shouldemailbesent).
4. Under Parameters, click next to shouldemailbesent to open the Variables picker, then create a string-type value under Input Parameters.
  
  Description of the illustration emittocontainer-fireevent.png
On the page that uses your layout or fragment, configure the parent container to handle the custom event.
1. In the Page Designer, select the component (for example, a fragment) to open its Properties pane, click the Events tab, then click + Event Listener and select the suggested custom event (for example, shouldemailbesent).
2. Define the action chain that must be triggered when the event occurs. For example, you might want a notification to appear on the page when the user toggles the Switch in a fragment. To do this, you add a Fire Notification action, followed by an Assign Variable action to assign the action chain's value to a page-level variable.
  
  Description of the illustration emittocontainer-callcustomevent.png