1. Building Responsive Applications with Visual Builder Studio
  2. Develop Applications
  3. Work With Fragments
  4. Pass Data Between a Fragment and Its Parent Container
  5. Automatically Wire a Fragment's Custom Event to the Parent Container

Automatically Wire a Fragment's Custom Event to the Parent Container

When working with a fragment custom event set up to emit payload to the parent container, you can automatically wire the event to the fragment's parent container (say, a page or dynamic container). Autowiring an event makes it easier to create an event listener on the parent container—you won't have to define an event handler in HTML—and allows the event listener on the parent container to be invoked whenever the event is fired on the fragment.

  1. Create a custom event that emits its payload to the parent container, then enable it for autowiring on the parent container.
    1. In the fragment's Events tab, create a custom event that emits its payload to the parent container (Emit event to container must be selected and parameters added to specify the payload that will be passed to the parent container).
    2. Enter an Auto Wire Event ID, which will identify the event's listener on the parent container once created.
      Description of fragment-autowireeventid.png follows
      Description of the illustration fragment-autowireeventid.png

  2. Create a listener for the autowired event on the fragment's immediate parent container. If your fragment is used on a page (for example), create an event listener on the page's Event Listeners tab; if it is used in a layout's form template, create the event listener on the layout's Event Listeners tab.
    1. Go to the parent container's Event Listeners tab, click + Event Listener, and select the autowired event under Fragment Events. Click Next.
      Description of autowiredevent.png follows
      Description of the illustration autowiredevent.png

    2. Create (or select) the action chain that must be triggered when the event occurs. Click Finish.
    3. If you chose to create an action chain, look for the newly created event listener under Fragment Events on the Event Listeners page—it will use the ID you specified for the autowired event with the suffix Listener added to it (for example, emailPreferenceSetAutoWireListener). Hover next to it and click Go to Action Chain to open the action chain and build the sequence that will be triggered when the event occurs.

      Note:

      When a fragment event is autowired to its parent container, the event listener's autoWire property is set to selfOnly in the fragment model, indicating that the event can only be handled by event listeners defined in the fragment's immediate parent container.