Enregistrement d’une extension

Les extensions de l’interface utilisateur d’AEM sont des applications spécialisées du Créateur d’applications, basées sur React et qui utilisent le framework de l’interface utilisateur React Spectrum.

Pour définir où et comment l’extension de l’interface utilisateur AEM apparaît, deux configurations sont requises dans l’application du Créateur d’applications de l’extension : le routage de l’application et l’enregistrement de l’extension.

Itinéraires de l’application app-routes

L’App.js de l’extension déclare le routeur React qui inclut un itinéraire d’index qui enregistre l’extension dans l’interface utilisateur AEM.

L’itinéraire de l’index est appelé lors du chargement initial de l’interface utilisateur AEM, et la cible de cet itinéraire définit la manière dont l’extension est exposée dans la 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>
  )
  ...
}

Enregistrement d’une extension

ExtensionRegistration.js doit être immédiatement chargé via l’itinéraire d’index de l’extension et agit sur le point d’enregistrement de l’extension.

Selon le modèle d’extension de l’interface utilisateur AEM sélectionné lors de l’initialisation de l’extension de l’application du Créateur d’applications, différents points d’extension sont pris en charge.

Inclusion conditionnelle d’extensions

Les extensions de l’interface utilisateur AEM peuvent exécuter une logique personnalisée pour limiter les environnements AEM dans lesquels l’extension apparaît. Cette vérification est effectuée avant l’appel register dans le composant ExtensionRegistration et renvoie immédiatement si l’extension ne doit pas être affichée.

Le contexte disponible pour cette vérification est limité :

Les vérifications les plus courantes pour charger une extension sont les suivantes :

L’exemple ci-dessous illustre la limitation de l’extension à tous les environnements du programme 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);
}