アダプティブフォームの非同期送信 asynchronous-submission-of-adaptive-forms

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

バージョン
記事リンク
AEM as a Cloud Service
ここをクリックしてください
AEM 6.5
この記事

これまでの Web フォームは、同期送信用に設定されていました。同期送信では、ユーザーがフォームを送信すると、確認確認ページ、「ありがとうございます」ページ、または送信エラーが発生した場合はエラーページにリダイレクトされます。 しかし、現在では、単一ページアプリケーションなどの最新の Web エクスペリエンスが広く使用されるようになっています。こうしたアプリケーションでは、バックグラウンドでクライアントとサーバー間の通信が実行されている間は、Web ページが静的な状態のままになります。非同期送信を設定することにより、アダプティブフォームでこうした Web エクスペリエンスを実現することができます。

非同期送信では、ユーザーがフォームを送信すると、フォーム開発者は、別のフォームや Web サイトの別のセクションにリダイレクトするなど、別のエクスペリエンスを提供します。また、作成者は、別のデータストアへのデータ送信やカスタム解析エンジンの追加など、別のサービスを差し込むこともできます。非同期送信がある場合、アダプティブフォームは単一ページアプリケーションのように動作します。送信されたフォームデータがサーバー上で検証されても、フォームが再読み込みされないか、URL が変更されないからです。

アダプティブフォームでの非同期送信の詳細については、以下をお読みください。

非同期送信の設定 configure

アダプティブフォームの非同期送信を設定するには:

  1. アダプティブフォームのオーサリングモードで、フォームコンテナオブジェクトを選択し、 cmppr1 をクリックしてプロパティを開きます。

  2. 送信」プロパティセクションで、「非同期送信を使用」を有効にします。

  3. 送信時」セクションで、フォームが正常に送信された場合に実行するオプションを以下のどちらかから選択します。

    • URL にリダイレクト:フォームの送信時に、指定の URL またはページにリダイレクトされます。「リダイレクト URL / パス」フィールドで URL を指定することも、ページのパスを参照して選択することもできます。
    • メッセージを表示:フォームの送信時にメッセージを表示します。「メッセージを表示」オプションの下のテキストフィールドにメッセージを入力できます。このテキストフィールドは、リッチテキスト形式をサポートします。
  4. 選択 check-button1 をクリックしてプロパティを保存します。

非同期送信の仕組み how-asynchronous-submission-works

AEM Forms には、すぐに使用できる、フォーム送信の成功および失敗ハンドラーが用意されています。ハンドラーは、サーバー応答に基づいて実行されるクライアントサイド関数です。フォームが送信されると、データが検証のためにサーバーに転送され、送信の成功またはエラーイベントに関する情報と共に、応答がクライアントに返されます。この情報は、関連するハンドラーにパラメーターとして渡され、関数が実行されます。

また、フォームの作成者と開発者は、フォームレベルでルールを記述して、デフォルトのハンドラーを上書きできます。詳しくは、「ルールを使用したデフォルトハンドラーの上書き」を参照してください。

最初に、成功およびエラーイベントに対するサーバー応答について説明します。

送信成功イベントに対するサーバー応答 server-response-for-submission-success-event

送信成功イベントに対するサーバー応答は、以下のような構造になっています。

{
  contentType : "<xmlschema or jsonschema>",
  data : "<dataXML or dataJson>" ,
  thankYouOption : <page/message>,
  thankYouContent : "<thank you page url/thank you message>"
}

フォームの送信が成功した場合のサーバーの応答には、次のものが含まれます。

  • フォームデータのフォーマットタイプ:XML または JSON
  • XML 形式または JSON 形式のフォームデータ
  • フォームに設定された、ページにリダイレクトするかメッセージを表示するために選択されたオプション
  • フォームに設定された、ページの URL またはメッセージの内容

成功ハンドラーは、サーバー応答を読み取り、それに応じて、設定されたページ URL にリダイレクトしたりメッセージを表示したりします。

送信エラーイベントに対するサーバー応答 server-response-for-submission-error-event

送信エラーイベントに対するサーバー応答は、以下のような構造になっています。

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

   errors : [
               { "somExpression" : "<SOM Expression>",
                 "errorMessage"  : "<Error Message>"
               },
               ...
             ]
 }

フォームの送信時にエラーが発生した場合のサーバーの応答には、次のものが含まれます。

  • エラーの理由、失敗した CAPTCHA またはサーバーサイド検証
  • 検証が失敗したフィールドの SOM 式と、対応するエラーメッセージを含む、エラーオブジェクトのリスト

エラーハンドラーは、サーバー応答を読み取り、それに応じて、フォーム上にエラーメッセージを表示します。

ルールを使用したデフォルトハンドラーの上書き custom

フォームの開発者と作成者は、コードエディターを使用してフォームレベルでルールを記述することにより、デフォルトのハンドラーを上書きすることができます。成功イベントおよびエラーイベントに対するサーバー応答は、フォームレベルで公開されます。開発者は、ルール内で $event.data を使用してサーバー応答にアクセスできます。

成功イベントとエラーイベントを処理するためのルールをコードエディターで記述するには、以下の手順を実行します。

  1. アダプティブフォームをオーサリングモードで開き、任意のフォームオブジェクトを選択して、 edit-rules1 をクリックして、ルールエディターを開きます。
  2. 選択 フォーム フォームオブジェクトツリーで「 」を選択し、 作成.
  3. モード選択ドロップダウンで「コードエディター」を選択します。
  4. コードエディターで、「 コードを編集. 選択 編集 をクリックします。
  5. イベント ​ドロップダウンで、「送信成功」または「送信中のエラー」を選択します。
  6. 選択したイベントのルールを作成し、「 」を選択します。 完了 」と入力してルールを保存します。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2