チュートリアル:アダプティブフォームを発行

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

アダプティブフォームの準備が整ったら、フォームを発行してエンドユーザーが利用できるようにすることができます。 エンドユーザーは、発行されたフォームを任意のデバイスやインターネットブラウザーで開くことができます。 アダプティブフォームが発行されると、フォームと関連するコンテンツがAEM作成者インスタンスからAEM発行インスタンスにコピーされます。 フォームは、発行インスタンスを通じてエンドユーザーが使用できるようになります。

アダプティブフォームを発行するには、次の方法があります。

事前準備

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

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

アダプティブフォームがAEMページとして発行される場合、Webページ全体には発行済みのフォームのみが含まれます。 アダプティブフォームのURLを使用して、別のWebページからリンクすることができます。 shipping-address-add-update-form​アダプティブフォームをAEMページとして発行するには:

  1. AEM Forms作成者インスタンスにログインし、AEM Forms UIでshipping-address-add-update-formアダプティブフォームを探します。
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. アダプティブフォームshipping-address-add-update-formを選択し、「発行」をタップします。 アダプティブフォームに関連するアセットを含むダイアログが表示されます。 「発行」をタップします。アダプティブフォームが発行され、成功ダイアログが表示されます。
  3. 発行インスタンスでフォームを開きます。 このフォームは、エンドユーザーが入力および送信できるようにします。
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

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

AEM Formsを使用すると、フォーム開発者はアダプティブフォームをAEM Sitesページにシームレスに埋め込むことができます。 埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。Webページ上の他の要素のコンテキストに留まり、同時にフォームを操作するのに役立ちます。

AEM Formsは、アダプティブフォームをAEM Sitesページに埋め込むためのコンポーネントAEM Formsコンテナを提供します。 デフォルトでは、コンポーネントはAEM Sitesコンテナに表示されません。 次の手順を実行して、AEM Formsコンテナコンポーネントを有効にし、アダプティブフォームをAEM Sitesページに埋め込みます。

  1. Web.Retailサイトで、編集するページを作成して開きます。 例:https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html。 アダプティブフォームはSitesページに埋め込まれます。

    アダプティブフォームは、既存のWeb.Retail Site’sページに埋め込むこともできます。 例えば、米国についてのページ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フォーム​オプションを選択して、save_iconをタップします。 AEM Formsコンテナコンポーネントがページに対して有効になっています。

  4. 手順1で開いたAEM Sitesページを含むブラウザタブを開きます。 「コンポーネントをここにドラッグ」ボックスをタップし、+をタップします。新しいコンポー ネントを 挿入」ボックスで、「 AEMフォーム」をタップします。AEM Formsコンテナ​コンポーネントがページに追加されます。

  5. AEM Formsコンテナ​コンポーネントをタップし、configure-iconをタップします。 AEM Formsコンテナのプロパティを持つダイアログボックスが表示されます。 「アセットパス」フィールドで、「shipping-address-add-update-form」アダプティブフォームを参照して選択します。 save_iconをタップします。 アダプティブフォームが ページに埋め込まれました。

  6. アダプティブフォームとSitesページの両方を発行します。 次の点について考慮してください。

    • AEM Sitesページを初めて発行し、埋め込みフォームが含まれている場合は、Sitesページと埋め込みフォームを発行します。

    • 発行済みサイトページに埋め込まれたフォームのみを変更した場合は、元のフォームを発行し、変更内容が発行済みサイトページに反映されます。 発行されたサイトページにはフォームへの参照情報が含まれているため、ページを再発行する必要はありません。

    • Sitesページと埋め込みフォームを変更した場合は、Sitesページとフォームを再発行します。

      aemサイトに埋め込む
      配送先住所と請求先住所の変更フォームがAEM Sitesページに追加されました。

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

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

このページ