Registratie van extensies

AEM de uitbreidingen UI zijn gespecialiseerde toepassing van App Builder, die op React wordt gebaseerd en het React Spectrumkader UI gebruikt.

Om te bepalen waar en hoe de AEM UI-extensie wordt weergegeven, zijn twee configuraties vereist in de App Builder-app van de extensie: toepassingsroutering en de registratie van de extensie.

Toepassingsroutes app-routes

De uitbreiding App.js verklaart de React routerdie een indexroute omvat die de uitbreiding in AEM UI registreert.

De indexroute wordt aangehaald wanneer AEM UI aanvankelijk laadt, en het doel van deze route bepaalt hoe de uitbreiding in de console wordt blootgesteld.

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

Registratie van extensies

ExtensionRegistration.js moet onmiddellijk worden geladen via de indexroute van de extensie en moet het registratiepunt van de extensie gebruiken.

Gebaseerd op het AEM UI die uitbreidingsmalplaatje wordt geselecteerd wanneer de App Builder app uitbreidinginitialiseert, worden de verschillende uitbreidingspunten gesteund.

Extensies voorwaardelijk opnemen

AEM UI-extensies kunnen aangepaste logica uitvoeren om de AEM omgevingen waarin de extensie wordt weergegeven, te beperken. Deze controle wordt uitgevoerd vóór de register -aanroep in de ExtensionRegistration -component en wordt onmiddellijk geretourneerd als de extensie niet moet worden weergegeven.

Voor deze controle is een beperkte context beschikbaar:

De meest gebruikte controles voor het laden van een extensie zijn:

In het onderstaande voorbeeld ziet u hoe u de extensie beperkt tot alle omgevingen in het programma 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);
}