Show Menu
トピック×

Tutorial: Publish your adaptive form

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

事前準備

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

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

アダプティブフォームがAEMページとして発行される場合、Webページ全体には発行済みのフォームのみが含まれます。 アダプティブフォームのURLを使用して、別のWebページからリンクすることができます。 アダプティブフォーム をAEMページとして発行するには 、次の手順に従います。
  1. AEM Forms 作成者インスタンスにログインし、AEM Forms UIからshipping-address-add-update-formアダプティブフォームを検索します。 https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. 「shipping-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 Forms ページに埋め込むためのコンポーネント、AEM Sites コンテナを提供します。 デフォルトでは、コンポーネントは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 です 。 The adaptive form is embedded to the Sites page.
    アダプティブフォームを既存の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 (We.Retailリファレンスの実装)のインストールを参照してください。
  2. 」ページ情報をタップし、新しく作成したWeb.Retailサイトページで「テンプレート ​を編集」オプションを選択します。 ページのテンプレートがブラウザーの新しいタブに開きます。
  3. レイ アウトコンテナ ボックス内のをタップし、 をタップします。 「 許可されるコンポーネント 」タブで、 一般アコーディオンを展開し、「AEM Form 」オプションを選択し、「 save_icon」をタップします。 AEM Forms コンテナコンポーネントがページに対して有効になっています。
  4. 手順1で開いたAEM Sites ページを含むブラウザータブを開きます。 「コンポーネントを ドラッグします 」ボックスをタップし、 +をタップします。 新しいコンポーネントを 挿入 」ボックスで、「 AEM Form」をタップします。 ページに AEM Formsコンテナ コンポーネントが追加されます。
  5. AEM Formsコンテナ 」コンポーネントをタップし、「 」をタップします。 AEM Forms コンテナのプロパティを持つダイアログボックスが表示されます。 「 アセットパス 」フィールドで、アダプティブフォーム「shipping-address-add-update-form」を参照して選択します。 「 」をタップします。 アダプティブフォームが ページに埋め込まれました。
  6. アダプティブフォームと Sites ページの両方を発行します。 次の点について考慮してください。
    • If you publish the AEM Sites page for the first time and it includes an embedded form, publish the Sites page and the embedded form.
    • 発行済みサイトページに埋め込まれたフォームのみを変更した場合は、元のフォームを発行し、変更内容が発行済みサイトページに反映されます。 発行されたサイトページにはフォームへの参照情報が含まれているため、ページを再発行する必要はありません。
    • ページと埋め込みフォームを変更した場合 Sites は、ページとフォームを再発行し Sites ます。
      AEM Sites ページに送料および請求先住所の変更フォームを追加しました。

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

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