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

これまでの 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. 選択したイベントのルールを記述し、「完了」をタップしてルールを保存します。

このページ