Show Menu
トピック×

Tutorial: Publish your adaptive form

これは、「 最初のアダプティブフォームを作成する 」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。
アダプティブフォームの準備が整ったら、フォームを発行して、エンドユーザーが使用できるようにすることができます。 エンドユーザーは、発行されたフォームを任意のデバイスやインターネットブラウザーで開くことができます。 アダプティブフォームが発行されると、フォームと関連するコンテンツがAEM作成者インスタンスからAEM発行インスタンスにコピーされます。 フォームは、発行インスタンスを通じてエンドユーザーが使用できるようになります。
アダプティブフォームを発行するには、次の方法があります。

事前準備

  • AEM Forms発行インスタンスの設定 :発行インスタンスは、発行モードで実行されるAEM Formsの公開インスタンスです。 実稼働環境では、発行インスタンスは組織のファイアウォールの外にあります。
  • レプリケーションと逆複製の設定 :複製は、作成者インスタンスのコンテンツを発行インスタンスにコピーし、発行インスタンスのユーザー入力(フォーム入力など)を作成者インスタンスに返します。

アダプティブフォームをAEMページとして発行する

アダプティブフォームがAEMページとして発行されると、Webページ全体には発行済みのフォームのみが含まれます。 アダプティブフォームのURLを使用して、別のWebページからリンクすることができます。 AEMページとし て配送先住所 — 追加 — 更新 — フォーム 、アダプティブフォームを発行するには:
  1. AEM Forms作成者インスタンスにログインし、AEM Forms UIでshipping-add-update-formアダプティブフォームを見つけます。 https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. 「発送先住所 — 追加 — 更新 — フォーム」アダプティブフォームを選択し、「発行」をタッ プします 。 アダプティブフォームに関連するアセットを含むダイアログが表示されます。 「 発行 」をタップします。アダプティブフォームが発行され、成功ダイアログが表示されます。
  3. 発行インスタンスでフォームを開きます。 エンドユーザーが入力および送信できるフォームです。 https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

AEMサイトページにアダプティブフォームを埋め込む

AEM Formsを使用すると、フォーム開発者はアダプティブフォームをAEMサイトページにシームレスに埋め込むことができます。 埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。Webページ上の他の要素のコンテキストを維持し、同時にフォームを操作するのに役立ちます。
AEM Formsは、アダプティブフォームをAEMサイトページに埋め込むためのコンポーネントであるAEM Formsコンテナを提供します。 デフォルトでは、コンポーネントはAEMサイトコンテナに表示されません。 次の手順を実行して、AEM Formsコンテナコンポーネントを有効にし、AEMサイトページにアダプティブフォームを埋め込みます。
  1. We.Retailサイトで編集用のページを作成し、開きます。 例えば、 https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html 。 アダプティブフォームはサイトページに埋め込まれます。
    アダプティブフォームを既存のWeb.Retailサイトのページに埋め込むこともできます。 例えば、米国についてのページhttps://localhost:4502/editor.html/content/we-retail/us/en/about-us.html です 。 ページを作成する時間を節約できます。 次の手順では、新しく作成されたページを使用します。
    We.Retailサイトは、AEMに付属して出荷されます。 We.Retailサイトがインストールされていない場合は、 We.Retail Reference Implementationを参照して、サイトのインストールを参照し てください。
  2. 「プロパ 」ページ情報をタップし、新しく作成 したWeb.Retailサイトページで「テンプレートの編集 」オプションを選択します。 ページのテンプレートがブラウザの新しいタブに開きます。
  3. レイアウトコンテナボッ クス内をタップし 、「feedmanagement」をタ す。 「許可され ているコンポーネント 」タブで、一般アコ ーディオンを展開し、 AEM Formオプションを選択して 、をタップしま す。 AEM Formsコンテナコンポーネントがページに対して有効になります。
  4. 手順1で開いたAEMサイトページを含むブラウザタブを開きます。 「コンポーネントを ここにドラッグ 」ボックスをタップし、 +をタップします。 Insert New Component 」ボックスで、 AEM Formをタップします。 ページ にAEM Formsコンテナ ・コンポーネントが追加されます。
  5. AEM Formsコンテナ 」コンポーネントをタップし ます。 AEM Formsのプロパティを含むダイアログボックスがコンテナします。 「アセッ トパス 」フィールドで、「配送先住所 — 追加 — 更新」フォームのアダプティブフォームを参照して選択します。 タップ . アダプティブフォームが ページに埋め込まれました。
  6. アダプティブフォームとサイトページの両方を発行します。 次の点について考慮してください。
    • AEMサイトページを初めて発行し、そのページに埋め込みフォームが含まれる場合は、サイトページと埋め込みフォームを発行します。
    • 発行済みサイトページに埋め込まれたフォームのみを変更する場合は、元のフォームを発行し、変更内容が発行済みサイトページに反映されます。 発行されたサイトページにはフォームへの参照情報が含まれているため、ページを再発行する必要はありません。
    • サイトページと埋め込みフォームを変更した場合は、サイトページとフォームを再発行します。
    AEMサイトページに「配送先住所と請求先住所の変更」フォームを追加しました。

外部Webページにアダプティブフォームを埋め込む

アダプティブフォームは、外部Webページ(AEMの外部でホストされるAEM以外のWebページ)に埋め込むことができます。この場合、外部WebページにJavaScriptの数行を挿入します。 JavaScriptコードは、アダプティブフォームと関連リソースのHTTP要求をAEM Formsサーバーに送信し、アダプティブフォームをWebページに追加します。 詳しい手順については、「外部Webペ ージへのアダプティブフォームの埋め込み」を参照してくださ い。