Universal Editor Events

Last update: March 6, 2025

CREATED FOR:

  • Admin
  • Developer

Learn about the different events that the Universal Editor sends that you can use to react to content or UI changes in your remote app.

Introduction

Applications can have different requirements for page or component updates. Therefore, the Universal Editor sends defined events to remote applications. In case the remote application has no custom event listener for the sent event, a fallback event listener provided by the universal-editor-cors package is executed.

All events are invoked on the affected DOM element of the remote page. Events bubble up to the BODY element where the default event listener provided by the universal-editor-cors package is registered. There are events for the content and events for the UI.

All events follow a naming convention.

  • aue:<content-or-ui>-<event-name>

For example, aue:content-update and aue:ui-select

Events include the request’s and response’s payload and are triggered once the corresponding call is successful. For further details about calls and examples of their payloads, please see the document Universal Editor Calls.

Content Update Events

aue:content-add

The aue:content-add event is triggered when a new component is added to a container.

The payload is content from the Universal Editor service, with fallback content from the component definition.

{
    details: {
        request: request payload;   // what is sent to the service
        response: {                 // what is returned by the service
            resource: string;       // newly created content resource
            updates: [{
                resource: string;   // resource to update
                type: string;       // type of instrumentation
                content?: string;   // content to replace
            }]
        }
    }
}

aue:content-details

The aue:content-details event is triggered when a component is loaded in the properties panel.

The payload is the component’s content and optionally its schema.

{
    details: {
        content: object             // content object
        model: [object]             // model object
        request: request payload;   // what is sent to the service
        response: response payload; // what is returned by the service
    }
}

aue:content-move

The aue:content-move event is triggered when a component is moved.

The payload is the component, source container, and target container.

{
    details: {
        from: string;                   // container we move the component from
        component: string;              // component we move
        to: string;                     // container we move the component to
        before: string;                    // before which component shall we place the component
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

aue:content-patch

The aue:content-patch event is triggered when a component’s data is updated in properties panel.

The payload is a JSON patch of the updated properties.

{
    details: {
        patch: {
            name: string;               // attribute which is updated
            value: string;              // new value which is stored to the attribute
        },
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

aue:content-remove

The aue:content-remove event is triggered when a component is removed from a container.

The payload is the item ID of the removed component.

{
    details: {
        resource: string;               // the resource which got removed
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

aue:content-update

The aue:content-update event is triggered when the properties of a component are updated in-context.

The payload is the updated value.

{
    details: {
        value: string;                  // updated value
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

Passing Payloads

For all the content update events, the requested payload as well as the response payload is passed into the event. E.g., for an update call:

Request Payload:

{
  "connections": [
    {
      "name": "aemconnection",
      "protocol": "aem",
      "uri": "https://author-p7452-e12433.adobeaemcloud.com"
    }
  ],
  "target": {
    "resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
    "type": "text",
    "prop": "title"
  },
  "value": "Alhoa Spirit Northern Norway!"
}

Response Payload

{
    "updates": [
        {
            "resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
            "prop": "title",
            "type": "text"
        }
    ]
}