Show Menu
トピック×

チュートリアル:アダプティブフォームの作成

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

このチュートリアルについて

アダプティブフォームは、動的でレスポンシブな次世代型のフォームです。アダプティブフォームを使用して、エクスペリエンスをカスタマイズすることができます。また、アダプティブフォームを Adobe Analytics に統合して統計情報を分析したり、Adobe Campaign に統合してキャンペーン管理を行うこともできます。For more information about adaptive forms capabilities, see Introduction to authoring adaptive forms .
正しい手順を踏めば、フォームの作成と管理を簡単に行うことができます。このチュートリアルでは、以下の操作を行う方法について説明します。
このチュートリアルの最後に、以下のようなフォームにアクセスするためのリンクがあります。 form-preview-mobile.gif

手順 1:アダプティブフォームを作成する

  1. AEM オーサーインスタンスにログインし、 Adobe Experience Manager フォーム フォームとドキュメント ​に移動します。The default URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments .
  2. 作成 」をタップして、「 アダプティブフォーム 」を選択します。テンプレートを選択するためのオプションが表示されます。 空白 ​テンプレートをタップして選択し、「 次へ 」をタップします。
  3. プロパティの追加 」オプションが表示されます。「 タイトル 」フィールドと「 名前 」フィールドは入力必須です。
    • タイトル:「タイト Add new or update shipping address ル」フィールドで指定します。 「タイトル」フィールドに入力した値が、フォームの表示名になります。タイトルを指定すると、AEM Forms ユーザーインターフェイス内のフォームを特定しやすくなります。
    • 名前 :このフィールドに、「 shipping-address-add-update-form 」と入力します。「名前」フィールドに入力した値が、フォームの名前になります。指定された名前のノードがリポジトリに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用することができます。無効な入力はすべてハイフンに置き換えられます。
  4. 作成 」をタップします。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。Tap Open to open the newly created form in a new tab. フォームが編集モードで表示されます。新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。
    アダプティブフォームのオーサリングインターフェースと使用可能なコンポーネントについて詳しくは、「 アダプティブフォームの作成について 」を参照してください。

手順 3:情報を取得して表示するためのコンポーネントを追加する

コンポーネントは、アダプティブフォームを構成するための構築ブロックです。AEM formsは、アダプティブフォーム内の情報を取得して表示するための多くのコンポーネントを提供します。 You can drag the components from to a form. To learn about available components and corresponding functionality, see Introduction to authoring adaptive forms .
  1. 数値ボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。Open properties of the component, change Title of the component to Customer ID , change Element Name to customer_ID , enable the Required Field option, enable the Use HTML5 Number Input Type option, and tap .
  2. 3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。これらのテキストボックスについて、以下のプロパティを設定します。:
プロパティ テキストボックス 1 テキストボックス 2 テキストボックス 3
タイトル 名前 発送先住所 都道府県
要素名 customer_Name customer_Shipping_Address customer_State
必須フィールド Enabled Enabled Enabled
複数行を許可 無効 Enabled 無効
  1. 数値ボックス ​コンポーネントをフッターコンポーネントの前にドラッグします。Open properties of the component, set values listed in the below table, Tap .
    プロパティ
    タイトル
    郵便番号
    要素名
    customer_ZIPCode
    最大桁数
    6
    必須フィールド
    Enabled
    表示パターンタイプ
    パターンなし
  2. 電子メール ​コンポーネントをフッターコンポーネントの前にドラッグします。Open properties of the component, set values listed in the below table, and tap .
    プロパティ
    タイトル
    電子メール
    要素名
    customer_Email
    必須フィールド
    Enabled
  3. 添付ファイル ​コンポーネントをフッターコンポーネントの前にドラッグします。Open properties of the component, set values listed in the below table, and tap .
プロパティ
タイトル Government approved address proof
要素名 customer_Address_Proof
必須フィールド Enabled
  1. 送信ボタン ​コンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。Open properties of the component, change Element Name to address_addition_update_submit , tap . これでフォームのレイアウトが設定され、フォームが以下のように表示されます。

手順 4:アダプティブフォームの送信アクションを設定する

アダプティブフォームの「送信」ボタンをタップすると、送信アクションがトリガーされます。送信アクションを使用して、フォームデータをローカルリポジトリに保存したり、フォームデータを REST エンドポイントに送信したり、フォームデータを電子メールとして送信したりすることができます。アダプティブフォームには、そのほかにも、すぐに使用できる送信アクションがいくつか用意されています。詳しくは、「 送信アクションの設定 」を参照してください。
次の手順を使用して、フォームの電子メール送信アクションとデモ送信アクションを設定できます。
  1. 電子メールサーバーを設定します。詳しくは、「 電子メール通知の設定 」を参照してください。
  2. Tap Form Container in the Content browser and tap . 左側にプロパティブラウザが開きます。
  3. 送信 送信アクション ​に移動します。「 電子メールを送信 」を選択します。次の値を指定し、
    プロパティ
    送信元
    To
    ${customer_Email}
    件名
    Acknowledgement: You have added shipping address on We.Retail website.
    電子メールテンプレート
    こち ${customer_Name} ら、お客様のアカウントの配送先住所として次の住所が追加されました。
    ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode}
    Grezants, We.Retail
    添付ファイルを含める
    Enabled
    これでフォームが作成されました。フォームのプレビューを表示して機能をテストすることができます。このチュートリアルに記載されている値を指定し、AEM Forms サーバーで稼働するマシン上に作成されたフォームにアクセスする場合は、対応するフォームが http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html に用意されています。

手順 5:アダプティブフォームのプレビューを表示して、アダプティブフォームを送信する

プレビューオプション ​を使用して、フォームの外観と動作を確認することができます。プレビューモードでフォームを送信し、フォームに適用された検証機能を確認することもできます。例えば、必須フィールドに値が入力されていな場合は、エラーメッセージが表示されます。
アダプティブフォームには、各種のデバイスでフォームの操作性をエミュレートするためのオプションも用意されています。例えば、iPhone、iPad、デスクトップパソコンなどのデバイスについて、エミュレーションを行うことができます。You can use both Preview and Emulator options in conjunction with each other to preview a form for devices of different screen sizes.
  1. フォームエディター右側の「 プレビュー 」オプションをタップします。プレビューモードでフォームが開きます。 このチュートリアルに記載されている値を使用してフォームを作成した場合、フォームのプレビュー URL は http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled になります。
  2. Use to view how the form looks on various devices.
  3. フォームのフィールドに値を入力して「 送信 」をタップします。フォームが送信され、デフォルトの「 ありがとうございます 」ページにリダイレクトされます。カスタムの「ありがとうございます」ページを指定することもできます。詳しくは、「 リダイレクトページの設定 」を参照してください。
これで、住所を追加するためのアダプティブフォームの準備が完了しました。このチュートリアルに記載されている値を指定し、AEM Forms サーバーで稼働するマシン上に作成されたフォームにアクセスする場合は、対応するフォームが http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html に用意されています。