Registrazione delle estensioni

AEM le estensioni della console Frammenti di contenuto sono app specializzate di App Builder, basate su React e utilizzano l’ React Spectrum Framework di interfaccia utente.

Per definire dove e come viene visualizzata la AEM console Frammenti di contenuto l’estensione, nell’app App Builder dell’estensione sono necessarie due configurazioni specifiche: routing dell'app e registrazione dell'estensione.

Indirizzi delle app

L'estensione App.js dichiara la Reagisce router che include una route di indice che registra l'estensione nella AEM console Frammenti di contenuto.

La route di indice viene richiamata quando viene inizialmente caricata AEM console Frammenti di contenuto e la destinazione di questo percorso definisce come l'estensione viene esposta nella console.

• ./src/aem-cf-console-admin-1/web-src/src/components/App.js

import ExtensionRegistration from "./ExtensionRegistration"
...
function App(props) {
  return (
    <Router>
      <ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
        <Routes>
          {/* The index route maps to the extension registration */}
          <Route index element={<ExtensionRegistration />} />
          ...
        </Routes>
      </ErrorBoundary>
    </Router>
  )
  ...
}

Registrazione delle estensioni

ExtensionRegistration.js deve essere caricato immediatamente tramite la via di indicizzazione dell'estensione e agisce sul punto di registrazione dell'estensione, definendo:

1. il tipo di estensione; a menu intestazione o barra delle azioni pulsante .
   • Menu Intestazione le estensioni sono identificate dalle headerMenu proprietà sotto methods.
   • Barra delle azioni le estensioni sono identificate dalle actionBar proprietà sotto methods.
2. Definizione del pulsante di estensione, in getButton() funzione . Questa funzione restituisce un oggetto con campi:
   • id è un ID univoco per il pulsante
   • label è l’etichetta del pulsante di estensione nella console Frammento di contenuto AEM
   • icon è l’icona del pulsante di estensione nella console Frammento di contenuto AEM. L’icona è un React Spectrum nome dell’icona, con gli spazi rimossi.
3. Gestore di clic per il pulsante, in definito in un onClick() funzione .
   • Menu Intestazione Le estensioni non trasmettono parametri al gestore di clic.
   • Barra delle azioni Le estensioni forniscono un elenco dei percorsi di frammento di contenuto selezionati nella sezione selections parametro .

Estensione Menu intestazione

I pulsanti di estensione del menu intestazione vengono visualizzati quando non è selezionato alcun frammento di contenuto. Poiché le estensioni del menu di intestazione non agiscono in una selezione di frammenti di contenuto, non vengono forniti frammenti di contenuto al relativo onClick() handler.

• ./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js

function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId, // A unique ID for the extension
      methods: {
        // Configure your Action Bar button here
        headerMenu: {
          getButton() {
            return {
              'id': 'example.my-header-menu-extension', // Unique ID for the button
              'label': 'My header menu extension',      // Button label
              'icon': 'Edit'                            // Button icon from https://spectrum.adobe.com/page/icons/
            }
          },

          // Click handler for the extension button
          // Header Menu extensions do not pass parameters to the click handler
          onClick() { ... }
        }
      }
    })
  }
  init().catch(console.error)
}

Estensione barra delle azioni

I pulsanti di estensione della barra delle azioni vengono visualizzati quando si selezionano uno o più frammenti di contenuto. I percorsi selezionati del frammento di contenuto sono resi disponibili all’estensione tramite selections nel onClick(..) handler.

• ./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js

function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId, // A unique ID for the extension
      methods: {
        // Configure your Action Bar button here
        actionBar: {
          getButton() {
            return {
              'id': 'example.my-action-bar-extension',  // Unique ID for the button
              'label': 'My action bar extension',       // Button label
              'icon': 'Edit'                            // Button icon from https://spectrum.adobe.com/page/icons/
            }
          },

          // Click handler for the extension button
          // Only Action Bar buttons populate the selections parameter
          onClick(selections) { ... }
        }
      }
    })
  }
  init().catch(console.error)
}

Includi estensioni in modo condizionale

AEM le estensioni della console Frammenti di contenuto possono eseguire logiche personalizzate per limitare l’aspetto dell’estensione nella console Frammenti di contenuto AEM. Questo controllo viene eseguito prima del register chiama ExtensionRegistration e restituisce immediatamente se l'estensione non deve essere visualizzata.

Questo controllo ha un contesto limitato disponibile:

• L'host AEM su cui viene caricata l'estensione.
• Token di accesso AEM dell'utente corrente.

I controlli più comuni per il caricamento di un'estensione sono:

• Utilizzo dell’host AEM (new URLSearchParams(window.location.search).get('repo')) per determinare se l’estensione deve essere caricata.
  • Mostra l’estensione solo AEM ambienti che fanno parte di un programma specifico (come mostrato nell’esempio di seguito).
  • Mostra l’estensione solo in un ambiente AEM specifico (ad es. AEM host).
• Utilizzo di un Azione Adobe I/O Runtime per effettuare una chiamata HTTP a AEM per determinare se l'utente corrente deve visualizzare l'estensione.

L'esempio seguente illustra la limitazione dell'estensione a tutti gli ambienti del programma p12345.

• ./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js

function ExtensionRegistration() {
  const PROGRAM_ID = 'p12345';

  // Get the current AEM Host (author-pXXX-eYYY.adobeaemcloud.com) the extension is loading on
  const aemHost = new URLSearchParams(window.location.search).get('repo');

  // Create a check to determine if the current AEM host matches the AEM program that uses this extension
  const aemHostRegex = new RegExp(`^author-${PROGRAM_ID}-e[\\d]+\\.adobeaemcloud\\.com$`)

  // Disable the extension if the Cloud Manager Program Id doesn't match the regex.
  if (!aemHostRegex.test(aemHost)) {
    return; // Skip extension registration if the environment is not in program p12345.
  }

  // Else, continue initializing the extension
  const init = async () => { .. };

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

Risorse Business.Adobe.com