アダプティブフォームの標準検証エラーメッセージ

アダプティブフォームは、事前設定された検証条件に基づいて、フィールドに入力した入力を検証します。 検証条件は、アダプティブフォーム内のフィールドに指定できる入力値を指します。 アダプティブフォームで使用するデータソースに基づいて、検証条件を設定できます。 例えば、RESTful web サービスをデータソースとして使用する場合、Swagger 定義ファイルで検証条件を定義できます。

入力値が検証条件を満たす場合、値がデータソースに送信されます。 それ以外の場合は、アダプティブフォームにエラーメッセージが表示されます。

この方法と同様に、アダプティブフォームをカスタムサービスと統合して、データ検証を実行できるようになりました。 入力値が検証条件を満たさず、サーバーが返す検証エラーメッセージが標準メッセージ形式の場合、エラーメッセージはフォームのフィールドレベルに表示されます。

入力値が検証条件を満たさず、サーバーの検証エラーメッセージが標準メッセージ形式でない場合、アダプティブフォームは検証エラーメッセージを標準形式に変換し、フォームのフィールドレベルで表示するメカニズムを提供します。 次の 2 つの方法のいずれかを使用して、エラーメッセージを標準形式に変換できます。

  • アダプティブフォーム送信時にカスタムエラーハンドラーを追加する
  • ルールエディターを使用して「サービスの呼び出しアクション」にカスタムハンドラーを追加する

この記事では、検証エラーメッセージの標準形式と、エラーメッセージをカスタム形式から標準形式に変換する手順について説明します。

標準検証エラーメッセージ形式

サーバー検証エラーメッセージが次の標準形式の場合、アダプティブフォームはフィールドレベルでエラーを表示します。

   {
    errorCausedBy : "SERVER_SIDE_VALIDATION/SERVICE_INVOCATION_FAILURE"
    errors : [
        {
             somExpression  : <somexpr>
             errorMessage / errorMessages : <validationMsg> / [<validationMsg>, <validationMsg>]

        }
    ]
    originCode : <target error Code>
    originMessage : <unstructured error message returned by service>
}

ここで、

  • errorCausedBy は失敗の理由を説明します
  • errors は、検証条件に失敗したフィールドの SOM 式と検証エラーメッセージに言及します
  • originCode には外部サービスから返されたエラーコードが含まれます
  • originMessage には外部サービスから返された生のエラーデータが含まれます

カスタムハンドラーを追加するためのアダプティブフォームの送信設定

サーバーの検証エラーメッセージが標準形式で表示されない場合は、非同期送信を有効にし、アダプティブフォーム送信にカスタムエラーハンドラーを追加して、メッセージを標準形式に変換できます。

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

カスタムハンドラーを追加する前に、非同期送信用にアダプティブフォームを設定する必要があります。 以下の手順を実行します。

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

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

  3. サーバーで再検証​を選択して、送信前にサーバー上で入力フィールド値を検証してください。

  4. 送信アクションを選択します。

    • データソースとして RESTful web サービスベースのフォームデータモデルを使用している場合、フォームデータモデルを使用して送信​を選択し、適切なデータモデルを選択してください。
    • データソースとして RESTful web サービスを使用している場合は、REST エンドポイントに送信​を選択し、リダイレクト URL／パス​を指定してください。

    アダプティブフォーム送信プロパティ

  5. 「保存」をタップして、プロパティを保存します。

アダプティブフォーム送信時にカスタムエラーハンドラーを追加する

AEM Forms には、フォーム送信が成功した場合と失敗した場合の処理を実行するハンドラーが用意されています。これらのハンドラーは、すぐに使用することができます。ハンドラーは、サーバー応答に基づいて実行されるクライアントサイド関数です。フォームが送信されると、データが検証のためにサーバーに転送され、送信の成功またはエラーイベントに関する情報と共に、応答がクライアントに返されます。この情報は、関連するハンドラーにパラメーターとして渡され、関数が実行されます。

アダプティブフォームの送信時にカスタムエラーハンドラーを追加するには、以下の手順を実行してください。

  1. アダプティブフォームをオーサリングモードで開き、任意のフォームオブジェクトを選択して をタップしてください。この操作により、ルールエディターが起動します。
  2. フォームオブジェクトツリーで​フォーム​選択し、作成​をタップしてください。
  3. イベントドロップダウンリストから​送信中のエラー​を選択します。
  4. カスタムエラー構造を標準エラー構造に変換するルールを作成し、「完了」をタップしてルールを保存してください。

カスタムエラー構造を標準エラー構造に変換するサンプルコードを以下に示します。

var data = $event.data;
var som_map = {
    "id": "guide[0].guide1[0].guideRootPanel[0].Pet[0].id_1[0]",
    "name": "guide[0].guide1[0].guideRootPanel[0].Pet[0].name_2[0]",
    "status": "guide[0].guide1[0].guideRootPanel[0].Pet[0].status[0]"
};

var errorJson = {};
errorJson.errors = [];

if (data) {
    if (data.originMessage) {
        var errorData;
        try {
            errorData = JSON.parse(data.originMessage);
        } catch (err) {
            // not in json format
        }

        if (errorData) {
            Object.keys(errorData).forEach(function(key) {
                var som_key = som_map[key];
                if (som_key) {
                    var error = {};
                    error.somExpression = som_key;
                    error.errorMessage = errorData[key];
                    errorJson.errors.push(error);
                }
            });
        }
        window.guideBridge.handleServerValidationError(errorJson);
    } else {
        window.guideBridge.handleServerValidationError(data);
    }
}

var som_map には、標準形式に変換するアダプティブフォームフィールドの SOM 式が一覧表示されます。アダプティブフォーム内の任意のフィールドの SOM 式を表示するには、フィールドをタップして、SOM 式を表示​を選択してください。

アダプティブフォームは、このカスタムエラーハンドラーを使用して、var som_map に一覧表示されたフィールドを標準のエラーメッセージ形式に変更します。 その結果、検証エラーメッセージは、アダプティブフォームのフィールドレベルに表示されます。

サービスの呼び出しアクションを使用してカスタムハンドラーを追加する

次の手順を実行して、エラーハンドラーを追加し、ルールエディターのサービスの呼び出しアクションを使用してカスタムエラー構造を標準エラー構造に変換してください。

  1. アダプティブフォームをオーサリングモードで開き、任意のフォームオブジェクトを選択してから、ルールエディターをタップしてルールエディターを開きます。
  2. 「作成」をタップします。
  3. ルールの​条件​セクションで条件を作成します。例えば、[フィールド名]が変更された場合という条件が考えられます。状態の選択​ドロップダウンリストから「変更済み」を選択し、この条件を設定します。
  4. 「Then」セクションの​アクションの選択​ドロップダウンリストで「サービスの呼び出し」を選択します。
  5. 「入力」セクションから、Post サービスとそれに対応するデータ連結を選択します。例えば、アダプティブフォームの​名前、ID および​ステータス​の各フィールドを検証する場合は、「入力」セクションで Post サービス（pet）を選択し、pet.name、pet.id および pet.status を選択します。

このルールの結果、手順 2 で定義したフィールドを変更し、フォームのこのフィールドからタブを移動すると、名前、ID および ステータス​の各フィールドに入力した値が検証されます。

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

  2. 「コードを編集」をタップします。

  3. 既存のコードから次の行を削除します。

    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs);

  4. カスタムエラー構造を標準エラー構造に変換するルールを作成し、「完了」をタップしてルールを保存します。
    例えば、カスタムエラー構造を標準エラー構造に変換するには、末尾に次のサンプルコードを追加します。

    var errorHandler = function(jqXHR, data) {
var som_map = {
    "id": "guide[0].guide1[0].guideRootPanel[0].Pet[0].id_1[0]",
    "name": "guide[0].guide1[0].guideRootPanel[0].Pet[0].name_2[0]",
    "status": "guide[0].guide1[0].guideRootPanel[0].Pet[0].status[0]"
};


var errorJson = {};
errorJson.errors = [];

if (data) {
    if (data.originMessage) {
        var errorData;
        try {
            errorData = JSON.parse(data.originMessage);
        } catch (err) {
            // not in json format
        }

        if (errorData) {
            Object.keys(errorData).forEach(function(key) {
                var som_key = som_map[key];
                if (som_key) {
                    var error = {};
                    error.somExpression = som_key;
                    error.errorMessage = errorData[key];
                    errorJson.errors.push(error);
                }
            });
        }
        window.guideBridge.handleServerValidationError(errorJson);
    } else {
        window.guideBridge.handleServerValidationError(data);
    }
  }
};

guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, null, errorHandler);

    var som_map には、標準形式に変換するアダプティブフォームフィールドの SOM 式をリストします。アダプティブフォーム内の任意のフィールドの SOM 式を表示するには、フィールドをタップして、その他のオプション（…）メニューから「SOM 式を表示」を選択します。

    次のサンプルコード行をカスタムエラーハンドラーにコピーしてください。

    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, null, errorHandler);

    executeOperation API は、null パラメーターと、新しいカスタムエラーハンドラーに基づく errorHandler パラメーターを含みます。

    アダプティブフォームは、このカスタムエラーハンドラーを使用して、var som_map にリストしたフィールドを標準のエラーメッセージ形式に変更します。その結果、検証エラーメッセージは、アダプティブフォームのフィールドレベルに表示されます。

このページ