アダプティブフォームの非同期送信

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

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

ここからは、アダプティブフォームの非同期送信について詳しく説明します。

非同期送信の設定

アダプティブフォームの非同期送信を設定するには、以下の手順を実行します。

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

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

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

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

非同期送信の仕組み

AEM Forms には、フォーム送信が成功した場合と失敗した場合の処理を実行するハンドラーが用意されています。これらのハンドラーは、すぐに使用することができます。これらのハンドラーは、サーバーからの応答に従って実行されるクライアント側の関数です。フォームを送信すると、データが検証用としてサーバーに転送され、フォーム送信の成功イベントとエラーイベントに関する情報とともに、サーバーからクライアントに応答が返されます。この情報は、パラメーターとして関連するハンドラーに渡され、対応する関数が実行されます。

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

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

送信成功イベントに対するサーバー応答

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

{
  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 へのリダイレクトやメッセージの表示を実行します。

送信エラーイベントに対するサーバー応答

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

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

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

フォームの送信が失敗した場合、以下の情報がサーバーからの応答として返されます。

  • エラーの理由と、失敗した CAPTCHA またはサーバー側での検証結果
  • 検証が失敗したフィールドの SOM 式と、対応するエラーメッセージが記載されたエラーオブジェクトのリスト

エラーハンドラーは、サーバーからの応答を読み取り、その内容に従って、エラーメッセージをフォーム上に表示します。

ルールを使用してデフォルトのハンドラーを上書きする

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

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

  1. アダプティブフォームをオーサリングモードで開き、任意のフォームオブジェクトを選択し、edit-rules1をタップして、ルールエディターを開きます。
  2. フォームオブジェクトツリーで「フォーム」選択し、「作成」をタップします。
  3. モード選択ドロップダウンで「コードエディター」を選択します。
  4. コードエディターで「コードを編集」をタップします。確認ダイアログで「編集」をタップします。
  5. イベント」ドロップダウンで、「送信成功」または「送信中のエラー」を選択します。
  6. 選択したイベントのルールを記述し、「完了」をタップしてルールを保存します。

このページ