バージョン | 記事リンク |
---|---|
AEM 6.5 | ここをクリックしてください |
AEM as a Cloud Service | この記事 |
これまでの Web フォームは、同期送信用に設定されていました。同期送信では、ユーザーがフォームを送信すると、確認ページ、ありがとうページ、または送信に失敗した場合はエラーページにリダイレクトされます。しかし、現在では、単一ページアプリケーションなどの最新の Web エクスペリエンスが広く使用されるようになっています。こうしたアプリケーションでは、バックグラウンドでクライアントとサーバー間の通信が実行されている間は、Web ページが静的な状態のままになります。非同期送信を設定すると、アダプティブフォームでこのエクスペリエンスを提供できます。
非同期送信では、ユーザーがフォームを送信すると、フォーム開発者は、別のフォームや Web サイトの別のセクションにリダイレクトするなど、別のエクスペリエンスを差し込みます。また、作成者は、別のデータストアへのデータ送信やカスタム解析エンジンの追加など、別のサービスを差し込むこともできます。非同期送信の場合、送信されたフォームデータがサーバー上で検証される際に、フォームが再読み込みされたりフォームの URL が変更されたりすることがないので、アダプティブフォームが単一ページアプリケーションのように動作します。
ここからは、アダプティブフォームの非同期送信について詳しく説明します。
アダプティブフォームの非同期送信を設定するには、以下の手順を実行します。
アダプティブフォームのオーサリングモードで、フォームコンテナオブジェクトを選択し、 をクリックしてプロパティを開きます。
「送信」プロパティセクションで、「非同期送信を使用」を有効にします。
「送信時」セクションで、フォームが正常に送信された場合に実行するオプションを以下のどちらかから選択します。
選択 をクリックしてプロパティを保存します。
Experience Manager Forms には、すぐに使用できる、フォーム送信の成功および失敗ハンドラーが用意されています。ハンドラーは、サーバー応答に基づいて実行されるクライアントサイド関数です。フォームが送信されると、データが検証のためにサーバーに転送され、送信の成功またはエラーイベントに関する情報と共に、応答がクライアントに返されます。この情報は、関連するハンドラーにパラメーターとして渡され、関数が実行されます。
また、フォームの作成者と開発者は、フォームレベルでルールを記述して、デフォルトのハンドラーを上書きできます。詳しくは、「ルールを使用したデフォルトハンドラーの上書き」を参照してください。
最初に、成功およびエラーイベントに対するサーバー応答について説明します。
送信成功イベントに対するサーバー応答は、以下のような構造になっています。
{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 にリダイレクトしたりメッセージを表示したりします。
送信エラーイベントに対するサーバー応答は、以下のような構造になっています。
{
errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",
errors : [
{ "somExpression" : "<SOM Expression>",
"errorMessage" : "<Error Message>"
},
...
]
}
フォーム送信がエラーになった場合に含まれるサーバー応答を以下に示します。
エラーハンドラーは、サーバー応答を読み取り、それに応じて、フォーム上にエラーメッセージを表示します。
フォームの開発者と作成者は、デフォルトのハンドラーを上書きするルールをフォームレベルで作成できます。成功イベントおよびエラーイベントに対するサーバー応答は、フォームレベルで公開されます。開発者は、ルール内で $event.data
を使用してサーバー応答にアクセスできます。
成功イベントとエラーイベントを処理するためのルールを作成するには、以下の手順を実行します。
アダプティブフォームをオーサリングモードで開き、任意のフォームオブジェクトを選択して、 をクリックして、ルールエディターを開きます。
選択 フォーム フォームオブジェクトツリーで「 」を選択し、 作成.
「正常に送信された」または「送信が失敗した」を状態を選択ドロップダウンリストから選択します。
選択した状態の THEN アクションを定義します。例えば、「次に移動」を選択し、URL を入力または貼り付けます。「関数」タブを使用して、任意の関数をルールにドラッグすることもできます。
選択 完了 」と入力してルールを保存します。