AEM Formsでは、フォーム開発者がAEM Sitesのシングルページアプリ(SPA)にアダプティブフォームとインタラクティブコミュニケーションをシームレスに埋め込むことができます。 埋め込まれたアダプティブフォームとインタラクティブ通信は完全に機能し、ユーザーはページを離れることなくフォームに入力して送信できます。 Webページ上の他の要素のコンテキストを維持し、アダプティブフォームやインタラクティブコミュニケーションと同時にやり取りするのに役立ちます。
AEM Sitesシングルページアプリでは、AEM FormsSPAコンテナコンポーネント を使用して、アダプティブフォームまたはインタラクティブコミュニケーションを追加できます。 これは、サイトページに追加できるAEM SitesSPAのAEM Formsコンポーネントです。
SPA以外のAEM Sitesにアダプティブフォームを埋め込む方法について詳しくは、AEM Sitesページにアダプティブフォームまたはインタラクティブな通信を埋め込むを参照してください。
AEM FormsSPAコンテナコンポーネントを使用してAEMサイトSPAにアダプティブフォームまたはインタラクティブ通信を埋め込むには、次のをインストール済みであることを確認します。
次の手順を実行して、AEM FormsSPAコンテナコンポーネントをインストールします。
SPA用のAEM Formsコンポーネントをインストールします。 コンポーネントのインストール手順は、README.mdファイルに記載されています。
コンポーネントは、SPAコンテナコンポーネントをReactベースのSPAプロジェクトと統合するために使用できるサンプルのReactコンポーネントを含む。
README.mdファイルの説明に従って、SPAコンテナコンポーネントをReactベースのSPAプロジェクトに統合します。
AEM FormsSPAコンテナコンポーネントをインストールし、コンポーネントとReactベースのSPAプロジェクトを統合した後、AEM SitesページにアダプティブフォームとInteractive Communicationsを埋め込むことができます。
SPAコンテナコンポーネントにAEM Formsを使用してアダプティブフォームまたはインタラクティブコミュニケーションを埋め込むには:
アダプティブフォームやインタラクティブコミュニケーションを埋め込むAEMサイトページを編集モードで開きます。
次のいずれかのオプションを使用して、SPA用AEMフォームコンポーネントをページに挿入します。
サイトページのレイアウトコンテナをタップし、+をタップして、SPA コンポーネント用の AEMフォームを選択します。
コンポーネントブラウザパネルから、SPA用AEMフォームコンポーネントをページにドラッグ&ドロップします。
アセットブラウザーでアダプティブフォームまたはインタラクティブコミュニケーションを検索し、サイトページにドラッグ&ドロップします。 SPAコンポーネントコンテナ用にAEM Formsにフォームを埋め込みます。
ページ上での複数のAEM FormsSPAコンテナコンポーネントのレンダリングはサポートされていません。 1つのページに複数のAEM FormsSPAコンテナを設定できますが、一度にレンダリングされるコンポーネントは1つだけです。 不一致を避けるために、1つのページに1つのコンポーネントのみが表示されていることを確認します。
サイトページに埋め込まれたAEM FormsSPAコンテナコンポーネントをタップし、アクションバーのをタップします。 [AEM FormsSPAの編集]ダイアログが開きます。
AEM Formsコンテナを編集ダイアログで、次の設定を指定します。
アセットの種類:埋め込むアセットの種類を選択します。オプションは、アダプティブフォームとインタラクティブコミュニケーションです
Asset Path:埋め込むアダプティブフォームまたはインタラクティブコミュニケーションを参照して選択します。アダプティブフォームまたはインタラクティブ通信がアセットブラウザーを使用して挿入された場合、このフィールドには自動入力されます。
チャネル (対話型通信のみ):埋め込むインタラクティブチャネルの種類を選択します。オプションはWebチャネルと印刷チャネルです。
テーマ:アダプティブフォームまたはインタラクティブコミュニケーションのコンポーネントのスタイル設定を定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。
をタップして設定を保存します。 これで、アダプティブフォームまたはインタラクティブ通信がページに埋め込まれます。
埋め込みアセット(アダプティブフォームまたはインタラクティブコミュニケーション)をAEM Sitesページに発行する場合は、次のシナリオを考慮してください。
AEMサイトのページには、AEM Formsコンテナのアダプティブフォームとインタラクティブコミュニケーションへの参照が保持されています。 したがって、元のアダプティブフォームとインタラクティブコミュニケーションで設定されたテーマ、スタイル、送信アクションなどの設定とプロパティは、埋め込まれたアダプティブフォームとインタラクティブコミュニケーションでも保持されます。
埋め込まれたアダプティブフォームおよびインタラクティブ通信の設定やプロパティを変更するには、次のいずれかを実行します。
AEM サイトページにアダプティブフォームを埋め込む際は、以下の点に留意してください。