Working with Custom Events

The Universal Editor sends defined events to the remote application, on top of this CustomEvent can also be sent directly from the Extension to the remote application.

Working with Custom Events

You can send events to the remote application using the triggerEvent method.

    useEffect(() => {
        (async () => {
            const guestConnection = await attach({id: extensionId});
            ...
                   await guestConnection.host.remoteApp.triggerEvent('my-custom-event',
                        'body',
                        {
                          example: 'payload'
                        }
                    );
            ...
        })();
    }, []);

API Reference

TriggerEvent API

Subscribing to events:

To listen to events sent by the Universal Editor, you can subscribe to them using the next declaration:

    function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId,
      methods: {
        events: {
          listen: (eventName, data) => {
            console.log(`Extension registered to listen to event: ${eventName}. The event data: ${JSON.stringify(data)}`);
          }
        },
      }
    });

  };
  init().catch((error) => console.error(error));

  return <Text>IFrame for integration with Host (AEM)...</Text>
}

The extension has the capability to subscribe to a wide range of events offered by the Universal Editor, enabling seamless integration and enhanced functionality.

For a comprehensive list of all available events and the corresponding response interfaces, please refer to the Universal Editor Events documentation.