アダプティブForms（コアコンポーネント）のカスタム関数

の説明に従って、カスタム関数に次のコードを追加します。 create-custom-function セクションで、フォームフィールドをに設定します Required.

    /**
    * enablePanel
    * @name enablePanel
    * @param {object} field1
    * @param {object} field2
    * @param {scope} globals
    */

    function enablePanel(field1,field2, globals)
    {
       if(globals.functions.validate(field1).length === 0)
       {
       globals.functions.setProperty(field2, {visible: true});
       }
    }

この例では、 personaldetails パネルは、ボタンをクリックすると発生します。 パネルでエラーが検出されなかった場合、別のパネルでは、 feedback ボタンをクリックするとパネルが表示されます。

のルールを作成しましょう Next ボタン。検証します。 personaldetails パネル化し、 feedback ユーザーがクリックすると表示されるパネル Next ボタン。

次の図を参照して、各コンポーネントの配置場所を確認してください personaldetails パネルは、 Next ボタン。 内のすべてのフィールドに適用する場合 personaldetails が検証され、 feedback パネルが表示されます。

のフィールドにエラーがある場合 personaldetails パネルの場合、 Next ボタン、および feedback パネルは非表示のままになります。

の説明に従って、カスタム関数に次のコードを追加します。 create-custom-function セクションに移動し、フィールドを検証します。

    /**
    * validateField
    * @name validateField
    * @param {object} field
    * @param {scope} globals
    */
    function validateField(field,globals)
    {

        globals.functions.validate(field);

    }

この例では、カスタムの検証パターンが contact フィールド。 ユーザーは、で始まる電話番号を入力する必要があります 10 続いて 8 数字。 ユーザーがから始まらない電話番号を入力した場合 10 含まれる数が多い、または含まれない 8 数字、ボタンをクリックすると検証エラーメッセージが表示されます。

次に、のルールを作成します Next を検証するボタン contact ボタンクリックのフィールド。

次の図を参照して、ユーザーがで始まらない電話番号を入力した場合を示してください 10すると、エラーメッセージがフィールドレベルに表示されます。

ユーザーが有効な電話番号と、そのすべてのフィールドをに入力した場合 personaldetails パネルが検証され、 feedback パネルが画面に表示されます。

の説明に従って、カスタム関数に次のコードを追加します。 create-custom-function セクションで、パネルをリセットします。

    /**
    * resetField
    * @name  resetField
    * @param {string} input1
    * @param {object} field
    * @param {scope} globals
    */
    function  resetField(field,globals)
    {

        globals.functions.reset(field);

    }

この例では、 personaldetails をクリックするとパネルがリセットされる Clear ボタン。 次に、のルールを作成します Clear ボタンをクリックしたときにパネルをリセットするボタン。

ユーザーがをクリックした場合に表示される方法については、次の図を参照してください clear ボタン、 personaldetails パネルのリセット：

を使用できます markFieldAsInvalid() フィールドを無効として定義し、フィールドレベルでカスタムエラーメッセージを設定する関数。 この fieldIdentifier 値は fieldId、または field qualifiedName、または field dataRef. という名前のオブジェクトの値 option 次になることができます {useId: true}, {useQualifiedName: true}、または {useDataRef: true}.
フィールドを無効としてマークし、カスタムメッセージを設定するために使用される構文は次のとおりです。

• globals.functions.markFieldAsInvalid(field.$id,"[custom message]",{useId: true});
• globals.functions.markFieldAsInvalid(field.$qualifiedName, "[custom message]", {useQualifiedName: true});
• globals.functions.markFieldAsInvalid(field.$dataRef, "[custom message]", {useDataRef: true});

の説明に従って、カスタム関数に次のコードを追加します。 create-custom-function フィールドレベルでカスタムメッセージを有効にする場合は、「」をクリックします。

    /**
    * customMessage
    * @name customMessage
    * @param {object} field
    * @param {scope} globals
    */
    function customMessage(field, globals) {
    const minLength = 15;
    const comments = field.$value.trim();
    if (comments.length < minLength) {
        globals.functions.markFieldAsInvalid(field.$id, "Comments must be at least 15 characters long.", { useId: true });
    }
}

この例では、ユーザーがコメント テキストボックスに 15 文字未満で入力すると、カスタムメッセージがフィールドレベルに表示されます。

次に、のルールを作成します comments フィールド :

で負のフィードバックを入力したことを表示するには、以下のデモを参照してください。 comments フィールドトリガー フィールドレベルでのカスタムメッセージの表示を設定します。

ユーザーが「コメント」テキストボックスに 15 文字を超えて入力すると、フィールドが検証され、フォームが送信されます。

次のコード行：
globals.functions.submitForm(globals.functions.exportData(), false); を使用して、操作後にフォームデータを送信します。

• 最初の引数は、送信するデータです。
• 2 番目の引数は、送信前にフォームを検証するかどうかを表します。 このプロパティは optional およびをに設定しました true デフォルトでは。
• 3 番目の引数は contentType 送信の（デフォルト値を使用する場合もオプション） multipart/form-data. その他の値は以下のとおりです。 application/json および application/x-www-form-urlencoded.

の説明に従って、カスタム関数に次のコードを追加します。 create-custom-function セクションで、サーバーで操作されたデータを送信するには：

    /**
    * submitData
    * @name submitData
    * @param {object} field
    * @param {scope} globals
    */
    function submitData(globals)
    {

    var data = globals.functions.exportData();
    if(!data.comments) {
    data.comments = 'NA';
    }
    console.log('After update:{}',data);
    globals.functions.submitForm(data, false);
    }

この例では、ユーザーがを離れた場合、 comments テキストボックスが空、 NA は、フォームの送信時にサーバーに送信されます。

次に、のルールを作成します Submit データを送信するボタン：

の図を参照してください console window 以下に、ユーザーがを離れたかどうかを示します comments テキストボックスが空の場合、値は NA 次のサーバーで送信される：

また、コンソールウィンドウを調べて、サーバーに送信されたデータを表示することもできます。

で説明されているように、次のコード行を追加します。 create-custom-function セクションを使用して、フォーム送信の送信メッセージまたは失敗メッセージをカスタマイズし、フォーム送信メッセージをモーダルボックスに表示するには：

/**
 * Handles the success response after a form submission.
 *
 * @param {scope} globals - This object contains a read-only form instance, target field instance, triggered event, and methods for performing form modifications within custom functions.
 * @returns {void}
 */
function customSubmitSuccessHandler(globals) {
    var event = globals.event;
    var submitSuccessResponse = event.payload.body;
    var form = globals.form;

    if (submitSuccessResponse) {
        if (submitSuccessResponse.redirectUrl) {
            window.location.href = encodeURI(submitSuccessResponse.redirectUrl);
        } else if (submitSuccessResponse.thankYouMessage) {
            showModal("success", submitSuccessResponse.thankYouMessage);
        }
    }
}

/**
 * Handles the error response after a form submission.
 *
 * @param {string} customSubmitErrorMessage - The custom error message.
 * @param {scope} globals - This object contains a read-only form instance, target field instance, triggered event, and methods for performing form modifications within custom functions.
 * @returns {void}
 */
function customSubmitErrorHandler(customSubmitErrorMessage, globals) {
    showModal("error", customSubmitErrorMessage);
}
function showModal(type, message) {
    // Remove any existing modals
    var existingModal = document.getElementById("modal");
    if (existingModal) {
        existingModal.remove();
    }

    // Create the modal dialog
    var modal = document.createElement("div");
    modal.setAttribute("id", "modal");
    modal.setAttribute("class", "modal");

    // Create the modal content
    var modalContent = document.createElement("div");
    modalContent.setAttribute("class", "modal-content");

    // Create the modal header
    var modalHeader = document.createElement("div");
    modalHeader.setAttribute("class", "modal-header");
    modalHeader.innerHTML = "<h2>" + (type === "success" ? "Thank You" : "Error") + "</h2>";

    // Create the modal body
    var modalBody = document.createElement("div");
    modalBody.setAttribute("class", "modal-body");
    modalBody.innerHTML = "<p class='" + type + "-message'>" + message + "</p>";

    // Create the modal footer
    var modalFooter = document.createElement("div");
    modalFooter.setAttribute("class", "modal-footer");

    // Create the close button
    var closeButton = document.createElement("button");
    closeButton.setAttribute("class", "close-button");
    closeButton.innerHTML = "Close";
    closeButton.onclick = function() {
        modal.remove();
    };

    // Append the elements to the modal content
    modalFooter.appendChild(closeButton);
    modalContent.appendChild(modalHeader);
    modalContent.appendChild(modalBody);
    modalContent.appendChild(modalFooter);

    // Append the modal content to the modal
    modal.appendChild(modalContent);

    // Append the modal to the document body
    document.body.appendChild(modal);
}

この例では、ユーザーがパラメーター customSubmitSuccessHandler および customSubmitErrorHandler カスタム関数の場合、成功メッセージと失敗メッセージはモーダルに表示されます。 JavaScript 関数 showModal(type, message) を使用すると、モーダルダイアログボックスを動的に作成し、画面に表示できます。

次に、フォーム送信が成功するためのルールを作成します。

フォームが正常に送信されると成功メッセージがモーダルに表示されることを示すには、以下の図を参照してください。

同様に、失敗したフォーム送信に対するルールを作成します。

フォームの送信に失敗したときにエラーメッセージがモーダルに表示されることを示すには、次の図を参照してください。

フォーム送信の成功と失敗をデフォルトで表示するには、 Default submit Form Success Handler および Default submit Form Error Handler 関数は標準で使用できます。

既存のAEM プロジェクトまたはフォームでカスタム送信ハンドラーが期待どおりに動作しない場合は、を参照してください。 トラブルシューティング セクション。

カスタム関数のキャッシュサポート

アダプティブFormsは、カスタム関数のキャッシュを実装して、ルールエディターでカスタム関数のリストを取得する際の応答時間を短縮します。 メッセージ： Fetched following custom functions list from cache 次に表示： error.log ファイル。

カスタム関数が変更されると、キャッシュが無効化され、解析されます。

トラブルシューティング troubleshooting

• 既存のAEM プロジェクトまたはフォームでカスタム送信ハンドラーが期待どおりに実行できない場合は、次の手順を実行します。

  • 必ずを コアコンポーネントのバージョンが 3.0.18 以降に更新されました. ただし、既存のAEM プロジェクトとフォームの場合は、さらに次の手順に従う必要があります。

  • AEM プロジェクトの場合、のインスタンスをすべて置き換える必要があります submitForm('custom:submitSuccess', 'custom:submitError') （を使用） submitForm() Cloud Manager パイプラインを通じてプロジェクトをデプロイします。

  • 既存のフォームで、カスタム送信ハンドラーが正しく機能しない場合は、を開いて保存する必要があります。 submitForm に関するルール Submit ルールエディターを使用してボタンをクリックします。 既存のルールを置き換えます。 submitForm('custom:submitSuccess', 'custom:submitError') （を使用） submitForm() フォームで。

• カスタム関数のコードを含んだ JavaScript ファイルにエラーがある場合、カスタム関数はアダプティブフォームのルールエディターに表示されません。 カスタム関数のリストを確認するには、に移動します。 error.log エラーのファイル。 エラーが発生すると、カスタム関数のリストは空で表示されます。

  

  エラーがない場合、カスタム関数が取得され、に表示されます。 error.log ファイル。 メッセージ： Fetched following custom functions list 次に表示： error.log ファイル：

  

考慮事項

• この parameter type および return type サポートしない None.

• カスタム関数リストでサポートされていない関数は次のとおりです。

  • ジェネレーター関数
  • 非同期/待機関数
  • メソッドの定義
  • クラスメソッド
  • デフォルトのパラメーター
  • REST パラメーター

関連トピック see-also

• AEM アダプティブフォームの作成
• AEM Sites ページへ AEM アダプティブフォームを追加
• AEM アダプティブフォームへテーマを適用
• AEM アダプティブフォームへコンポーネントを追加
• AEM アダプティブフォームでの Captcha の使用
• AEM アダプティブフォームの PDF バージョン（DoR）を生成
• AEM アダプティブフォームを翻訳
• フォームの使用状況を追跡するアダプティブフォームの Adobe Analytics を有効にする
• Microsoft SharePoint へアダプティブフォームを接続
• Microsoft Power Automate へアダプティブフォームを接続
• Microsoft OneDrive へアダプティブフォームを接続
• Microsoft Azure Blob Storage へアダプティブフォームを接続
• Salesforce へアダプティブフォームを接続
• AEM アダプティブフォームで Adobe Sign を使用
• アダプティブフォームの新しいロケールを追加
• データベースへアダプティブフォームデータを送信
• REST エンドポイントへアダプティブフォームデータを送信
• AEM ワークフローへアダプティブフォームデータを送信
• フォームポータルを使用して AEM web サイト上の AEM アダプティブフォームを一覧表示
• アダプティブフォームへのバージョン管理、コメント、注釈の追加
• アダプティブフォームの比較