Adobeでは、最新の拡張可能なデータキャプチャを使用することをお勧めします コアコンポーネント 対象 新しいアダプティブFormsの作成 または AEM SitesページへのアダプティブFormsの追加. これらのコンポーネントは、アダプティブFormsの作成における大幅な進歩を表し、印象的なユーザーエクスペリエンスを実現します。 この記事では、基盤コンポーネントを使用してアダプティブFormsを作成する古い方法について説明します。
バージョン | 記事リンク |
---|---|
AEM as a Cloud Service | ここをクリックしてください |
AEM 6.5 | この記事 |
これまでの Web フォームは、同期送信用に設定されていました。同期送信では、ユーザーがフォームを送信すると、確認ページ、ありがとうページ、または送信に失敗した場合はエラーページにリダイレクトされます。しかし、現在では、単一ページアプリケーションなどの最新の Web エクスペリエンスが広く使用されるようになっています。こうしたアプリケーションでは、バックグラウンドでクライアントとサーバー間の通信が実行されている間は、Web ページが静的な状態のままになります。非同期送信を設定することにより、アダプティブフォームでこうした Web エクスペリエンスを実現することができます。
非同期送信では、ユーザーがフォームを送信すると、フォーム開発者は、別のフォームや Web サイトの別のセクションにリダイレクトするなど、別のエクスペリエンスを提供します。作成者は、別のデータストアへのデータの送信やカスタム分析エンジンの追加など、個別のサービスをプラグインすることもできます。非同期送信の場合、アダプティブフォームは、送信されたフォームのデータがサーバー上で検証される際にリロードされなかったり、URL が変更されなかったりするため、単一ページアプリケーションのように動作します。
アダプティブフォームでの非同期送信の詳細については、以下を参照してください。
アダプティブフォームの非同期送信を設定するには:
アダプティブフォームのオーサリングモードで、フォームコンテナオブジェクトを選択し、 をタップしてプロパティを開きます。
「送信」プロパティセクションで、「非同期送信を使用」を有効にします。
「送信時」セクションで、フォームが正常に送信された場合に実行するオプションを以下のどちらかから選択します。
をタップしてプロパティを保存します。
AEM Formsには、すぐに使用できる、フォーム送信の成功ハンドラーとエラーハンドラーが用意されています。 ハンドラーは、サーバー応答に基づいて実行されるクライアントサイド関数です。フォームが送信されると、データが検証のためにサーバーに転送され、送信の成功またはエラーイベントに関する情報と共に、応答がクライアントに返されます。この情報は、関連するハンドラーにパラメーターとして渡され、関数が実行されます。
また、フォームの作成者と開発者は、フォームレベルでルールを記述して、デフォルトのハンドラーを上書きできます。詳しくは、「ルールを使用したデフォルトハンドラーの上書き」を参照してください。
最初に、成功およびエラーイベントに対するサーバー応答について説明します。
送信成功イベントに対するサーバー応答は、以下のような構造になっています。
{
contentType : "<xmlschema or jsonschema>",
data : "<dataXML or dataJson>" ,
thankYouOption : <page/message>,
thankYouContent : "<thank you page url/thank you message>"
}
フォーム送信が成功した場合に含まれるサーバー応答を以下に示します。
成功ハンドラーは、サーバー応答を読み取り、それに応じて、設定されたページ URL にリダイレクトしたりメッセージを表示したりします。
送信エラーイベントに対するサーバー応答は、以下のような構造になっています。
{
errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",
errors : [
{ "somExpression" : "<SOM Expression>",
"errorMessage" : "<Error Message>"
},
...
]
}
フォーム送信がエラーになった場合に含まれるサーバー応答を以下に示します。
エラーハンドラーは、サーバー応答を読み取り、それに応じて、フォーム上にエラーメッセージを表示します。
フォーム開発者と作成者は、フォームレベルで、コードエディターでルールを記述して、デフォルトのハンドラーを上書きできます。 成功イベントおよびエラーイベントに対するサーバー応答は、フォームレベルで公開されます。開発者は、ルール内で $event.data
を使用してサーバー応答にアクセスできます。
成功イベントとエラーイベントを処理するためのルールをコードエディターで記述するには、以下の手順を実行します。