Show Menu
トピック×

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

アダプティブフォームは、事前設定された検証条件に基づいて、フィールドに入力した入力を検証します。 検証条件は、アダプティブフォーム内のフィールドに許容される入力値を参照します。 アダプティブフォームで使用するデータソースに基づいて、検証条件を設定できます。 例えば、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 外部サービスから返された生のエラーデータが含まれます。

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

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

Configure asynchronous adaptive form submission

カスタムハンドラーを追加する前に、アダプティブフォームで非同期送信を設定する必要があります。 以下の手順を実行します。
  1. In adaptive form authoring mode, select the Form Container object and tap to open its properties.
  2. In the Submission properties section, enable Use asynchronous submission .
  3. 送信前にサーバー上の入力フィールドの値を検証するには、 「サーバーで再検証 」を選択します。
  4. 送信アクションを選択します。
    • Submit using Form Data Model 」を選択し、適切なデータモデルを選択します(データソースとしてRESTful Webサービスベースの フォームデータモデルを使用している場合 )。
    • RESTful Webサービスをデータソースとして使用する場合は、 「RESTエンドポイントに 送信」を選択し ​リダイレクトURL/パスを指定します。
  5. 」をタップして、プロパティを保存します。

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

AEM Forms には、フォーム送信が成功した場合と失敗した場合の処理を実行するハンドラーが用意されています。これらのハンドラーは、すぐに使用することができます。これらのハンドラーは、サーバーからの応答に従って実行されるクライアント側の関数です。フォームを送信すると、データが検証用としてサーバーに転送され、フォーム送信の成功イベントとエラーイベントに関する情報とともに、サーバーからクライアントに応答が返されます。この情報は、パラメーターとして関連するハンドラーに渡され、対応する関数が実行されます。
次の手順を実行して、アダプティブフォームの送信時にカスタムエラーハンドラーを追加します。
  1. Open the adaptive form in authoring mode, select any form object, and tap to open the rule editor.
  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);
    }
}

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

Invoke Serviceアクションを使用した追加カスタムハンドラー

次の手順を実行して、カスタムエラー構造を標準エラー構造に変換するエラーハンドラを追加します。このエラーハンドラは、 ルールエディタの 「Invoke Service」アクションを使用して実行します。
  1. Open the adaptive form in authoring mode, select any form object, and tap to open the rule editor.
  2. 作成 」をタップします。
  3. ルールの「 When 」セクションで条件を作成します。 例えば、フィールド # を変更するとします。 「選択」 、「状態を 選択 」ドロップダウンリストから変更され、この条件を満たすようになりました。
  4. Then 」セクションの「 アクションの選択 」ドロップダウンリストで「 サービスの呼び出し 」を選択します。
  5. Input 」セクションからPostサービスとそれに対応するデータ連結を選択します。 例えば、アダプティブフォームの 名前 ID ステータスフィールドを検証する場合は、投稿サービス(pet)を選択し、pet name、pet.id、pet.statusの各セクションを選択し ます。
このルールの結果、 名前 ID ​ステータスフィールドに入力した値は、手順2で定義したフィールドが変更され、フォームのフィールド外にタブ移動した直後に検証されます。
  1. Select Code Editor from the mode selection drop-down list.
  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);
    
    
    標準形式に変換するアダプティブフォームフィールドのSOM式を var som_map リストします。 フィールドをタップし、 その他のオプション (...)メニューから「 表示SOM式 」を選択すると、アダプティブフォーム内の任意のフィールドのSOM式を表示できます。
    次のサンプルコード行をカスタムエラーハンドラーにコピーしてください。
    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, null, errorHandler);
    
    
    executeOperation APIには、新しいカスタムエラーハンドラーに基づ null くパラメーターと errorHandler パラメーターが含まれます。
    アダプティブフォームは、このカスタムエラーハンドラーを使用して、に示すフィールドを標準エラーメッセージ形式 var som_map に変換します。 その結果、検証エラーメッセージはアダプティブフォームのフィールドレベルで表示されます。