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

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

アダプティブフォームの準備が整ったら、フォームを発行して、エンドユーザーが使用できるようにすることができます。 エンドユーザーは、公開されたフォームを任意のデバイスおよびインターネットブラウザーで開くことができます。 アダプティブフォームが発行されると、フォームと関連コンテンツがAEMオーサーインスタンスからAEMパブリッシュインスタンスにコピーされます。 フォームは、パブリッシュインスタンスを通じてエンドユーザーに提供されます。

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

事前準備

  • AEM Formsパブリッシュインスタンスを設定します。パブリッシュインスタンスは、パブリッシュモードで実行されているAEMのパブ Forms リックインスタンスです。実稼動環境では、パブリッシュインスタンスは組織のファイアウォールの外にあります。
  • レプリケーションとリバースレプリケーションの設定:レプリケーションは、コンテンツをオーサーインスタンスからパブリッシュインスタンスにコピーし、パブリッシュインスタンスからオーサーインスタンスにユーザー入力(フォーム入力など)を返します。

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

アダプティブフォームがAEM Pageとして発行されると、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. We.Retailサイトでページを作成し、編集用に開きます。 例えば、https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.htmlのようにします。 アダプティブフォームがSitesページに埋め込まれます。

    アダプティブフォームを既存のWe.Retail Site’sページに埋め込むこともできます。 例えば、ABOUT USページhttps://localhost:4502/editor.html/content/we-retail/us/en/about-us.htmlなどです。 ページを作成する時間を節約できます。 以下の手順では、新しく作成されたページを使用します。

    We.Retailサイトは、AEMと共に出荷されます。 We.Retailサイトがインストールされていない場合は、 We.Retail参照実装へのインストールを参照してください。

  2. propertiesページ情報をタップし、新しく作成したWe.Retailサイトページで「Edit Template」オプションを選択します。 ブラウザーの新しいタブにページのテンプレートが開きます。

  3. レイアウトコンテナ​ボックス内をタップし、feedmanagementをタップします。 「許可されるコンポーネント」タブで、「一般」アコーディオンを展開し、「AEM Form」オプションを選択して、save_iconをタップします。 AEM Formsコンテナコンポーネントがページに対して有効になっている。

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

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

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

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

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

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

      embed-in-aem-sites
      配送先住所と請求先住所の変更フォームがAEM Sitesページに追加されました。

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

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

このページ