확장 등록

AEM UI 확장은 React를 기반으로 하는 특수 App Builder 앱이며 React Spectrum UI 프레임워크를 사용합니다.

AEM UI 확장이 표시되는 위치와 방법을 정의하려면 확장의 App Builder 앱에 앱 라우팅과 확장 등록이라는 두 가지 구성이 필요합니다.

앱 경로 app-routes

확장의 App.js은(는) AEM UI에 확장을 등록하는 인덱스 경로를 포함하는 React 라우터를 선언합니다.

인덱스 경로는 AEM UI가 처음 로드될 때 호출되며, 이 경로의 대상은 확장이 콘솔에 표시되는 방법을 정의합니다.

  • ./src/aem-ui-extension/web-src/src/components/App.js
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>
  )
  ...
}

확장 등록

ExtensionRegistration.js은(는) 확장의 인덱스 경로를 통해 즉시 로드되어야 하며, 확장의 등록 지점을 처리합니다.

App Builder 앱 확장을 초기화할 때 선택한 AEM UI 확장 템플릿에 따라 다른 확장 지점이 지원됩니다.

조건부로 확장 포함

AEM UI 확장은 사용자 지정 로직을 실행하여 확장이 표시되는 AEM 환경을 제한할 수 있습니다. 이 검사는 ExtensionRegistration 구성 요소에서 register 호출 전에 수행되며, 확장을 표시하지 말아야 하는 경우 즉시 반환됩니다.

이 검사에는 사용할 수 있는 제한된 컨텍스트가 있습니다.

  • 확장이 로드되는 AEM 호스트입니다.
  • 현재 사용자의 AEM 액세스 토큰입니다.

확장 로드에 대한 가장 일반적인 검사는 다음과 같습니다.

  • AEM 호스트(new URLSearchParams(window.location.search).get('repo'))를 사용하여 확장을 로드해야 하는지 확인합니다.

    • 특정 프로그램의 일부인 AEM 환경에서만 확장을 표시합니다(아래 예제에 표시됨).
    • 특정 AEM 환경(AEM 호스트)에서만 확장을 표시합니다.
  • Adobe I/O Runtime 작업을 사용하여 AEM에 대한 HTTP 호출을 수행하여 현재 사용자에게 확장이 표시되어야 하는지 확인합니다.

아래 예제에서는 확장을 p12345 프로그램의 모든 환경으로 제한하는 방법을 보여 줍니다.

  • ./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js
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);
}
recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69