Eventi editor universale events

Scopri i diversi eventi inviati dall’editor universale che puoi utilizzare per reagire ai contenuti o alle modifiche dell’interfaccia utente nell’app remota.

Introduzione introduction

Le applicazioni possono avere requisiti diversi per gli aggiornamenti di pagine o componenti. Di conseguenza, Universal Editor invia eventi definiti alle applicazioni remote. Nel caso in cui l'applicazione remota non disponga di un listener di eventi personalizzato per l'evento inviato, viene eseguito un listener di eventi di fallback fornito dal pacchetto universal-editor-cors.

Tutti gli eventi vengono richiamati sull’elemento DOM interessato della pagina remota. Fumetto di eventi fino all'elemento BODY in cui è registrato il listener di eventi predefinito fornito dal pacchetto universal-editor-cors. Sono disponibili eventi per il contenuto e eventi per l’interfaccia utente.

Tutti gli eventi seguono una convenzione di denominazione.

Ad esempio, aue:content-update e aue:ui-select

Gli eventi includono il payload della richiesta e della risposta e vengono attivati una volta che la chiamata corrispondente ha esito positivo. Per ulteriori dettagli sulle chiamate e esempi dei payload, consulta il documento Chiamate all'editor universale.

Eventi aggiornamento contenuto content-events

aue:aggiungere contenuti content-add

L'evento aue:content-add viene attivato quando un nuovo componente viene aggiunto a un contenitore.

Il payload è un contenuto del servizio Universal Editor, con contenuto di fallback dalla definizione del componente.

{
    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 content-details

L'evento aue:content-details viene attivato quando un componente viene caricato nel pannello delle proprietà.

Il payload è il contenuto del componente e, facoltativamente, il relativo 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:spostamento contenuto content-move

L'evento aue:content-move viene attivato quando un componente viene spostato.

Il payload è il componente, il contenitore di origine e il contenitore di destinazione.

{
    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:patch di contenuto content-patch

L'evento aue:content-patch viene attivato quando i dati di un componente vengono aggiornati nel pannello delle proprietà.

Il payload è una patch JSON delle proprietà aggiornate.

{
    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:rimuovi-contenuto content-remove

L'evento aue:content-remove viene attivato quando un componente viene rimosso da un contenitore.

Il payload è l’ID dell’elemento rimosso.

{
    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:aggiornamento-contenuto content-update

L'evento aue:content-update viene attivato quando le proprietà di un componente vengono aggiornate nel contesto.

Il payload è il valore aggiornato.

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

Trasmissione dei payload passing-payloads

Per tutti gli eventi di aggiornamento del contenuto, il payload richiesto e il payload di risposta vengono trasmessi nell’evento. Ad esempio, per una chiamata di aggiornamento:

Payload richiesta:

{
  "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!"
}

Payload di risposta

{
    "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"
        }
    ]
}

Eventi interfaccia utente ui-events

aue:pubblicazione tramite interfaccia utente ui-publish

L'evento aue:ui-publish viene attivato quando il contenuto viene pubblicato (con chiamata al livello BODY).

Il payload è un elenco di ID elemento e del loro stato di pubblicazione.

aue:selezione tramite interfaccia utente ui-select

L'evento aue:ui-select viene attivato quando viene selezionato un componente.

Il payload è l’ID dell’elemento, le proprietà dell’elemento e il tipo di elemento del componente selezionato.

{
    details: {
        resource: string;       // resource of the selected
        prop: string;           // prop of the selected
        type: string;           // type of the selected
        selected: boolean;      // was selected or unselected
    }
}

aue:anteprima interfaccia utente ui-preview

L'evento aue:ui-preview viene attivato quando la modalità di modifica della pagina viene modificata in Anteprima.

Il payload è vuoto per questo evento.

{
    details: {}
}

aue:modifica tramite interfaccia utente ui-edit

L'evento aue:ui-edit viene attivato quando la modalità di modifica della pagina viene modificata in Modifica.

Il payload è vuoto per questo evento.

{
    details: {}
}

aue:ui-viewport-change ui-viewport-change

L'evento aue:ui-viewport-change viene attivato quando si modifica la dimensione del riquadro di visualizzazione.

Il payload è rappresentato dalle dimensioni del riquadro di visualizzazione.

{
    details: {
        height: number?;        // height of the viewport. Undefined when fullscreen
        width: number?;         // width of the viewport. Undefined when fullscreen
    }
}

aue:inizializzato initialized

L'evento aue:initialized viene attivato per comunicare alla pagina remota che è stata caricata correttamente nell'editor universale.

Il payload è vuoto per questo evento.

{
    details: {}
}

Listener di eventi di fallback fallback-listeners

Aggiornamenti del contenuto content-update-fallbacks

Eventi interfaccia utente ui-event-fallbacks

Risorse aggiuntive additional-resources