Show Menu
トピック×

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

これまでの Web フォームは、同期送信用に設定されていました。同期送信では、ユーザーがフォームを送信すると、確認ページ、「ありがとうございます」ページ、または送信に失敗した場合はエラーページにリダイレクトされます。 しかし、現在では、単一ページアプリケーションなどの最新の Web エクスペリエンスが広く使用されるようになっています。こうしたアプリケーションでは、バックグラウンドでクライアントとサーバー間の通信が実行されている間は、Web ページが静的な状態のままになります。非同期送信を設定することにより、アダプティブフォームでこうした Web エクスペリエンスを実現することができます。
非同期送信では、ユーザーがフォームを送信するときに、フォーム開発者は別のフォームやWebサイトの別のセクションへのリダイレクトなど、別のエクスペリエンスにプラグインします。 作成者は、別のデータストアへのデータの送信やカスタム分析エンジンの追加など、別のサービスをプラグインすることもできます。非同期送信の場合、アダプティブフォームは、フォームを再読み込みしないか、送信したフォームデータの検証時にURLが変更されないため、単一ページアプリのように動作します。
ここからは、アダプティブフォームの非同期送信について詳しく説明します。

非同期送信の設定

アダプティブフォームの非同期送信を設定するには、以下の手順を実行します。
  1. In adaptive form authoring mode, select the Form Container object and tap to open its properties.
  2. In the Submission properties section, enable Use asynchronous submission .
  3. 送信時 」セクションで、フォームが正常に送信された場合に実行するオプションを以下のどちらかから選択します。
    • URL にリダイレクト :フォームの送信時に、指定の URL またはページにリダイレクトされます。You can specify a URL or browse to choose the path to a page in the Redirect URL/Path field.
    • メッセージを表示 :フォームの送信時にメッセージが表示されます。「メッセージを表示」オプションの下のテキストフィールドにメッセージを書き込むことができます。 このテキストフィールドには、リッチテキスト形式でメッセージを入力することができます。
  4. Tap to save the properties.

非同期送信の仕組み

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 式と、対応するエラーメッセージが記載されたエラーオブジェクトのリスト
エラーハンドラーは、サーバーからの応答を読み取り、その内容に従って、エラーメッセージをフォーム上に表示します。

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

フォームの開発者と作成者は、コードエディターを使用してフォームレベルでルールを記述することにより、デフォルトのハンドラーを上書きすることができます。The server response for success and error events is exposed at form level, which developers can access using $event.data in rules.
成功イベントとエラーイベントを処理するためのルールをコードエディターで記述するには、以下の手順を実行します。
  1. Open the adaptive form in authoring mode, select any form object, and tap to open the rule editor.
  2. フォームオブジェクトツリーで「 フォーム 」選択し、「 作成 」をタップします。
  3. モード選択ドロップダウンで「 コードエディター 」を選択します。
  4. コードエディターで「 コードを編集 」をタップします。確認ダイアログで「 編集 」をタップします。
  5. イベント 」ドロップダウンで、「 送信成功 」または「 送信中のエラー 」を選択します。
  6. 選択したイベントのルールを記述し、「 完了 」をタップしてルールを保存します。