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

Adobeでは、最新の拡張可能なデータキャプチャを使用することをお勧めします コアコンポーネント 対象 新しいアダプティブFormsの作成 または AEM SitesページへのアダプティブFormsの追加. これらのコンポーネントは、アダプティブFormsの作成における大幅な進歩を表し、印象的なユーザーエクスペリエンスを実現します。 この記事では、基盤コンポーネントを使用してアダプティブFormsを作成する古い方法について説明します。

これまでの Web フォームは、同期送信用に設定されていました。同期送信では、ユーザーがフォームを送信すると、確認ページ、ありがとうページ、または送信に失敗した場合はエラーページにリダイレクトされます。しかし、現在では、単一ページアプリケーションなどの最新の 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. 選択したイベントのルールを作成してをタップします。 完了 」と入力してルールを保存します。

Business.Adobe.com リソース

Auto Text Summarization Automated Onboarding Style System Auto Form Fill Mobile Forms Content Management