現在表示中:

これまでの Web フォームは、同期送信用に設定されていました。ユーザーはフォームを送信すると、確認ページにリダイレクトされます。送信時にエラーが発生した場合は、エラーページにリダイレクトされます。しかし、現在では、単一ページアプリケーションなどの最新の Web エクスペリエンスが広く使用されるようになっています。こうしたアプリケーションでは、バックグラウンドでクライアントとサーバー間の通信が実行されている間は、Web ページが静的な状態のままになります。非同期送信を設定することにより、アダプティブフォームでこうした Web エクスペリエンスを実現することができます。この場合、送信されたフォームデータがサーバー上で検証される際に、フォームが再読み込みされたり、フォームの URL が変更されたりすることがないため、アダプティブフォームが単一ページアプリケーションと同じように動作します。

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

非同期送信の設定

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

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

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

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

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

非同期送信の仕組み

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. アダプティブフォームをオーサリングモードで開き、任意のフォームオブジェクトを選択して をタップします。この操作により、ルールエディターが起動します。

  2. フォームオブジェクトツリーで「フォーム」選択し、「作成」をタップします。

  3. モード選択ドロップダウンで「コードエディター」を選択します。

  4. コードエディターで「コードを編集」をタップします。確認ダイアログで「編集」をタップします。

  5. イベント」ドロップダウンで、「送信成功」または「送信中のエラー」を選択します。

  6. 選択したイベントのルールを記述し、「完了」をタップしてルールを保存します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー