Tillägg - registrering

Gränssnittstilläggen för AEM är specialiserade App Builder-appar som bygger på React och använder gränssnittsramverket React Spectrum.

För att definiera var och hur AEM UI-tillägg ska visas krävs två konfigurationer i tilläggets App Builder-app: approutning och tilläggsregistrering.

Appvägar app-routes

Tilläggets App.js deklarerar Reaktionsroutern som innehåller en indexväg som registrerar tillägget i AEM.

Indexflödet anropas när AEM-gränssnittet läses in och målet för den här vägen definierar hur tillägget visas i konsolen.

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

Tillägg - registrering

ExtensionRegistration.js måste läsas in omedelbart via tilläggets indexflöde och fungerar som registreringspunkt för tillägget.

Baserat på den AEM UI-tilläggsmallen som valdes när App Builder-programtilläggetinitierades stöds olika tilläggspunkter.

Inkludera tillägg villkorligt

AEM UI-tillägg kan utföra anpassad logik för att begränsa de AEM miljöer som tillägget finns i. Den här kontrollen utförs före anropet register i komponenten ExtensionRegistration och returnerar omedelbart om tillägget inte ska visas.

Den här kontrollen har begränsad kontext:

De vanligaste kontrollerna för att läsa in ett tillägg är:

I exemplet nedan visas hur du begränsar tillägget till alla miljöer i programmet 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);
}