Registrazione dell’estensione

Le estensioni dell'interfaccia utente AEM sono app App Builder specializzate, basate su React e utilizzano il framework dell'interfaccia utente React Spectrum.

Per definire dove e come viene visualizzata l’estensione dell’interfaccia utente AEM, sono necessarie due configurazioni nell’app App Builder dell’estensione: il routing dell’app e la registrazione dell’estensione.

Route delle app app-routes

Il App.js dell'estensione dichiara il router React che include una route di indice che registra l'estensione nell'interfaccia utente AEM.

La route dell'indice viene richiamata al caricamento iniziale dell'interfaccia utente AEM e la destinazione di questa route definisce il modo in cui l'estensione viene esposta nella console.

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 dell’estensione

ExtensionRegistration.js deve essere caricato immediatamente tramite la route dell'indice dell'estensione e agisce come punto di registrazione dell'estensione.

In base al modello di estensione dell'interfaccia utente AEM selezionato durante l'inizializzazione dell'estensione dell'app App Builder🔗, sono supportati diversi punti di estensione.

Includi estensioni in modo condizionale

Le estensioni dell’interfaccia utente AEM possono eseguire una logica personalizzata per limitare gli ambienti AEM in cui viene visualizzata l’estensione. Questo controllo viene eseguito prima della chiamata register nel componente ExtensionRegistration e restituisce immediatamente se l'estensione non deve essere visualizzata.

Il contesto disponibile per questo controllo è limitato:

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

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

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);
}