[AEM Assets]{class="badge positive" title="AEM Assetsに適用)。"}
AEM Assets View の UI 拡張機能の有効化 AEM-Assets-View-UI-Extensibility
AEM Assets View は UI 拡張機能をサポートしており、AEM Assets View の標準機能では満たされない特定のワークフローやビジネス要件に対して、カスタム UI コンポーネントを Assets View の UI に追加できます。 AEM Assets View の UI 拡張機能により柔軟性が向上し、組織は特定のワークフローと要件に合わせてインターフェイスを調整できるようになります。
拡張機能は アセット レベル、フォルダーレベル、および コレクション レベルに追加できます。 追加された拡張機能は、アセット、コレクション、または フォルダー の 詳細 ページの専用パネルに表示されます。
- AEM Assets View の UI 拡張機能は Assets Ultimate で使用できます。
- Assets view の UI 拡張機能へのアクセス権を取得するには、 Adobe カスタマーサポートケースを作成および送信してください。
- 詳細なフィードバックオプションを展開し、「問題を報告」をクリックすることで、ドキュメントに関するフィードバックを提供できます。
アセットビューへのアクセス add-UI-Extensibility-in-AEM-Assets-View
次の画像に記載されている手順に従って、Assets Viewにアクセスします。
Assets View での UI 拡張機能の表示 ui-extensibility-panel-assets-view
Assets View 内で、アセット、フォルダーまたはコレクションの 詳細 ページに移動します。 詳細ページの専用パネルには、追加された UI 拡張機能が表示されます。
拡張コンポーネントを追加するための前提条件 assets-view-ui-extensibility
Assets View UI に拡張コンポーネントを追加するには、次の要件を満たす必要があります。
- Assets View にアクセスします。
- Adobe app builder にアクセスします。
- 組織内に開発者またはシステム管理者の役割が存在する。 詳しくは、このドキュメントを参照してください。
- Adobe IO command line tool (AIO CLI) がローカルマシンにインストールされている。 このツールは、拡張プロジェクトの作成とデプロイに不可欠です。 詳しくは、最初の App Builder アプリケーションの作成(アクセスには認証が必要)を参照してください。
- JavaScript、Node.js、React のテクノロジーを十分に理解している。
UI 拡張機能コンポーネントを Assets View に追加 ui-extensibility-in-assets-view
- UI 拡張機能と Adobe App Builder フレームワークに関する重要な情報については、 はじめに を参照してください。 UI 拡張機能によって Adobe Experience Cloud services 内でカスタムロジックと UI の統合を可能にする方法と、UI 拡張機能を実装するためのアーキテクチャとワークフローについて説明します。
- ローカル環境の設定、ローカルプレビュー、公開、管理など、UI の拡張機能に関する一般的な情報については、ガイドを参照してください。
- AEM Assets View 用の UI 拡張機能の開発に必要な基本事項を理解するには、拡張機能の作成における一般的な概念を参照してください。
- Assets View インターフェイスにカスタムサイドパネルを追加します。 ホストアプリケーション(Assets View)は、これらのパネルを管理して、切り替えやディープリンクなど、UI のインタラクションを処理します。 拡張機能では、
aem/assets/details/1拡張機能ポイントを使用して、パネル ID、タイトル、コンテンツ URL などのプロパティを指定するカスタムパネルを統合します。 開発者は、getPanels()メソッドでカスタムパネルを登録し、カスタムコンテンツを表示するルートを構築します。 API リファレンスやコード例などの詳細な実装については、詳細ビューを参照してください。 - ローカル環境を設定し、最初の UI 拡張機能を作成して、Assets View で UI 拡張機能を開発するプロセスを直接体験してください。 詳しくは、AEM Assets View 拡張機能の開発手順を参照してください。
- AIO CLI を使用してアプリケーションを設定し、基本的な拡張機能構造と必要なコードを生成します。 詳しくは、 AEM Assets View のコード生成を参照してください。
- 拡張機能をローカルでテストして、想定どおりに動作することをデプロイメント前に確認します。 完全に分離された環境または部分的に分離された環境で拡張機能を実行し、テスト用に拡張機能を AEM Assets View の本番環境に接続します。 詳しくは、トラブルシューティング - AEM Assets View の拡張機能を参照してください。
Assets ビューでのアクションのカスタマイズ customize-actions-assets-view
AEM Assets ビューでは、参照ビューで次のアクションをカスタマイズできます。
-
アクションバーで1つ以上のアセットを選択したときに表示されるアクションをカスタマイズします。
-
その他のオプション(。…)をクリックすると表示されるアクションをカスタマイズします アセットカードに保存されます。
詳しくは、ビューを参照を参照してください。
Assets ビューでのヘッダーメニューのカスタマイズ customize-header-menu-assets-view
AEM Assets ビューでは、ヘッダーメニューをカスタマイズできます。 ヘッダーメニューは、ブラウズ画面と詳細画面の右上にあるボタンを指します。 次の操作を実行できます。
-
組み込みのヘッダーメニューボタンの前に、ヘッダーメニューにカスタムボタンを追加します。
-
現在の参照または詳細コンテキストの組み込みヘッダーメニューボタンを非表示にします。
-
組み込みのヘッダーメニューボタンのクリック数を上書きして、デフォルトのハンドラーではなく拡張機能がアクションを処理できるようにします。
ブラウズビューでは、ヘッダーメニューのカスタマイズは、アセット、検索、ごみ箱、最近表示したアセット、コレクションのコンテキストに対応します。 カスタムボタンは、これらのコンテキストのいずれかに追加できます。 フォルダーを作成およびアセットを追加 (アセットコンテキスト内)およびコレクションを作成 (コレクション内)などの組み込みボタンは、使用可能な場所で非表示または上書きできます。
詳細ビューでは、カスタムボタンを追加し、タスクの割り当てや ダウンロード などの組み込みアクションをカスタマイズできます。
API参照やコード例などの詳細については、 ビューを参照および詳細ビューを参照してください。
アセットビューでカスタムダイアログを開く open-custom-dialogs-assets-view
アセットビューでは、選択したテキストでカスタムダイアログを開く機能も提供されます。 テキストにリンクを追加することもできます。 詳しくは、モーダル API を参照してください。