拡張機能の登録

AEM UI 拡張機能は、React をベースとする特殊な Application Builder アプリで、React Spectrum UI フレームワークを使用します。

AEM UI 拡張機能が表示される場所と方法を定義するには、拡張機能の Application Builder アプリで、アプリのルーティングと拡張機能の登録という 2 つの設定が必要です。

アプリルート 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 は、拡張機能のインデックスルートを通じて直ちに読み込まれる必要があり、拡張機能の登録ポイントとして機能します。

Application 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