Registrierung der Erweiterung

AEM-Benutzeroberflächen-Erweiterungen sind spezielle App-Entwicklungs-Apps, die auf React basieren und das React Spectrum-Benutzeroberflächen-Framework nutzen.

Um zu definieren, wo und wie die AEM-Benutzeroberflächen-Erweiterung angezeigt wird, sind zwei Konfigurationen in der App-Entwicklungs-App der Erweiterung erforderlich: App-Routing und die Registrierung der Erweiterung.

App-Routen app-routes

Die Datei App.js der Erweiterung deklariert den React-Router, der eine Indexroute enthält, die die Erweiterung in der AEM-Benutzeroberfläche registriert.

Die Indexroute wird beim erstmaligen Laden der AEM-Benutzeroberfläche aufgerufen. Das Ziel dieser Route definiert, wie die Erweiterung in der Konsole bereitgestellt wird.

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

Registrierung der Erweiterung

ExtensionRegistration.js muss sofort über die Indexroute der Erweiterung geladen werden und fungiert als Registrierungspunkt der Erweiterung.

Abhängig von der Vorlage für die AEM-Benutzeroberflächen-Erweiterung, die beim Initialisieren der App-Entwicklungs-Erweiterungs-App ausgewählt wurde, werden unterschiedliche Erweiterungspunkte unterstützt.

Bedingtes Einschließen von Erweiterungen

AEM-Benutzeroberflächen-Erweiterungen können benutzerdefinierte Logik ausführen, um die AEM-Umgebungen zu beschränken, in denen die Erweiterung angezeigt wird. Diese Prüfung wird vor dem register-Aufruf in der ExtensionRegistration-Komponente durchgeführt. Es wird sofort zurückgekehrt, wenn die Erweiterung nicht angezeigt werden soll.

Für diese Prüfung ist nur begrenzter Kontext verfügbar:

Die häufigsten Prüfungen zum Laden einer Erweiterung sind:

Das folgende Beispiel zeigt, wie die Erweiterung auf alle Umgebungen im Programm p12345 beschränkt wird.

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