Registrazione dell’estensione

Le estensioni dell’interfaccia utente dell’AEM sono app specializzate per App Builder, basate su React e utilizzano Spettro di reazione Framework interfaccia utente.

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

Dell'estensione App.js dichiara il Router React che include una route di indice che registra l’estensione nell’interfaccia utente dell’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.

• ./src/aem-ui-extension/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 dell’estensione

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

In base al modello di estensione dell’interfaccia utente AEM selezionato quando inizializzazione dell'estensione app Builder, sono supportati diversi punti di estensione.

• Punti di estensione dell’interfaccia utente per frammenti di contenuto

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 del register chiama in ExtensionRegistration e restituisce immediatamente se l’estensione non deve essere visualizzata.

Il contesto disponibile per questo controllo è limitato:

• 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 sugli ambienti AEM che fanno parte di un programma specifico (come mostrato nell’esempio di seguito).
  • Mostra l’estensione solo in un ambiente AEM specifico (host AEM).
• Utilizzo di un Azione Adobe I/O Runtime effettuare una chiamata HTTP all’AEM per determinare se l’utente corrente deve visualizzare l’estensione.

L’esempio seguente illustra come limitare l’estensione a tutti gli ambienti nel 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