AEM Adaptive Formsの非同期送信の設定 asynchronous-submission-of-adaptive-forms

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

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

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

非同期送信の設定 configure

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

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

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

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

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

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

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

{oneOf: [
{  properties : {
     contentType : {"type" : "string",  "enum" : ["xmlschema", "jsonschema"]},
    data : {type : "string", description : "Form data in XML or  JSON  format"},
   thankYouOption : {type : "string"}
   }},
  properties : {
     contentType : {"type" : "string",  "enum" : ["xmlschema", "jsonschema"]},
    data : {type : "string", description : "Form data in XML or  JSON  format"},
   thankYouContent: {type: "string"}
   }
]

}

フォーム送信が成功した場合に含まれるサーバー応答を以下に示します。

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

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

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

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

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

フォーム送信がエラーになった場合に含まれるサーバー応答を以下に示します。

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

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

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

成功イベントとエラーイベントを処理するためのルールを作成するには、以下の手順を実行します。