Registro de extensiones

Las extensiones de IU de AEM son aplicaciones especializadas de App Builder, basadas en React y que utilizan el módulo de IU React Spectrum.

Para definir dónde y cómo aparece la extensión de la interfaz de usuario de AEM, se requieren dos configuraciones en la aplicación de App Builder de la extensión: enrutamiento de aplicaciones y registro de la extensión.

Rutas de aplicaciones app-routes

App.js de la extensión declara el enrutador React que incluye una ruta de índice que registra la extensión en la interfaz de usuario de AEM.

La ruta de índice se invoca cuando la interfaz de usuario de AEM se carga inicialmente y el destino de esta ruta define cómo se expone la extensión en la consola.

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

Registro de extensiones

ExtensionRegistration.js debe cargarse inmediatamente a través de la ruta de índice de la extensión y actúa como punto de registro de la extensión.

En función de la plantilla de extensión de la interfaz de usuario de AEM seleccionada al inicializar la extensión de la aplicación de App Builder, se admiten diferentes puntos de extensión.

Incluir extensiones condicionalmente

Las extensiones de IU de AEM pueden ejecutar lógica personalizada para limitar los entornos de AEM en los que aparece la extensión. Esta comprobación se realiza antes de la llamada register en el componente ExtensionRegistration y devuelve inmediatamente si no se debe mostrar la extensión.

Esta comprobación tiene un contexto limitado disponible:

Las comprobaciones más comunes para cargar una extensión son:

El ejemplo siguiente ilustra la limitación de la extensión a todos los entornos del programa 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);
}