Eventi dell’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, l’editor universale invia eventi definiti alle applicazioni remote. Nel caso in cui l’applicazione remota non disponga di un listener di evento personalizzato per l’evento inviato, viene eseguito un listener di evento di fallback fornito dal pacchetto universal-editor-cors.

Tutti gli eventi vengono richiamati sull’elemento DOM interessato della pagina remota. Gli eventi si propagano fino all’elemento BODY in cui è registrato il listener di evento 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 relativi payload, consulta il documento Chiamate all’editor universale.

Eventi aggiornamento contenuto content-events

e&due punti;content-add content-add

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

Il payload è un contenuto del servizio dell’editor universale, 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
            }]
        }
    }
}

e&due punti;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
    }
}

e&due punti;content-move 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
    }
}

e&due punti;content-patch 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
    }
}

e&due punti;content-remove content-remove

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

Il payload è l’ID elemento del componente 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
    }
}

e&due punti;content-update 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 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

e&due punti;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: {}
}

e&due punti;modifica 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: {}
}

e&due punti;ui-viewport-change ui-viewport-change

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

Il payload è rappresentato dalle dimensioni di visualizzazione.

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

e&due punti;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 eventi di fallback fallback-listeners

Aggiornamenti del contenuto content-update-fallbacks

Eventi interfaccia utente ui-event-fallbacks

Risorse aggiuntive additional-resources