Registro de extensão

As extensões da interface do usuário do AEM são aplicativos especializados do App Builder, com base no React e usam a estrutura da interface do usuário React Spectrum.

Para definir onde e como a extensão da interface do usuário do AEM é exibida, duas configurações são necessárias no aplicativo App Builder da extensão: roteamento de aplicativos e o registro da extensão.

Rotas de aplicativo app-routes

A extensão App.js declara o roteador React que inclui uma rota de índice que registra a extensão na interface do usuário do AEM.

A rota de índice é invocada quando a interface do usuário do AEM é carregada inicialmente, e o destino dessa rota define como a extensão é exposta no 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>
  )
  ...
}

Registro de extensão

ExtensionRegistration.js deve ser carregado imediatamente por meio da rota de índice da extensão e atua como ponto de registro da extensão.

Com base no modelo de extensão da interface do usuário do AEM selecionado ao inicializar a extensão do aplicativo App Builder, há suporte para diferentes pontos de extensão.

Incluir extensões condicionalmente

As extensões da interface do usuário do AEM podem executar uma lógica personalizada para limitar os ambientes AEM em que a extensão aparece. Essa verificação é executada antes da chamada register no componente ExtensionRegistration e retorna imediatamente se a extensão não deve ser exibida.

Esta verificação tem contexto limitado disponível:

As verificações mais comuns para carregar uma extensão são:

O exemplo abaixo ilustra a limitação da extensão a todos os ambientes no 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);
}