最適化Forms中的自訂函式（核心元件）

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined
undefined
undefined

版本

文章連結

AEM as a Cloud Service

按一下這裡

AEM 6.5

本文章

簡介

AEM Forms 6.5匯入定義JavaScript函式的功能，以在使用規則編輯器定義複雜商業規則時使用這些函式。 AEM Forms提供許多立即可用的自訂函式，但您需要定義自己的自訂函式，並在多個表單中使用這些函式。

自訂函式可協助處理輸入的資料，以符合指定的需求，進而擴充表單的功能。它們還可以根據預先定義的條件來啟用表單行為的動態變更。
在調適型Forms中，您可以使用調適型表單🔗的規則編輯器中的自訂函式，為表單欄位建立特定的驗證規則。
讓我們瞭解自訂功能的使用方式，使用者可在其中輸入電子郵件地址，而您想要確保輸入的電子郵件地址遵循特定格式（其中包含「@」符號和網域名稱）。將自訂函式建立為「ValidateEmail」，此函式會以電子郵件地址作為輸入，並在有效時傳回true，否則傳回false。

function ValidateEmail(inputText)
{
    var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(inputText.value.match(email))
        {
            alert("Valid email address!");
            return true;
        }
    else
    {
        alert("Invalid email address!");
        return false;
    }
}

在上述範例中，當使用者嘗試提交表單時，會叫用自訂函式「ValidateEmail」以檢查輸入的電子郵件地址是否有效。

使用自訂函式 uses-of-custom-function

在最適化Forms中使用自訂函式的優點包括：

資料操控：自訂函式會操控並處理輸入到表單欄位中的資料。
資料驗證：自訂函式可讓您對表單輸入執行自訂檢查，並提供指定的錯誤訊息。
動態行為：自訂函式可讓您根據特定條件控制表單的動態行為。例如，您可以顯示/隱藏欄位、修改欄位值或動態調整表單邏輯。
整合：您可以使用自訂函式與外部API或服務整合。它有助於從外部來源擷取資料、傳送資料至外部Rest端點，或根據外部事件執行自訂動作。

支援的JS註解

若您需要自訂組態和說明，請確定您撰寫的自訂函式上方有jsdoc。有多種方式可以在JavaScript,中宣告函式，而註解可讓您追蹤函式。如需詳細資訊，請參閱usejsdoc.org。

支援的jsdoc標籤：

私人
語法： @private
私人函式不會納入為自訂函式。
名稱
語法： @name funcName <Function Name>
或者,，您可以使用： @function funcName <Function Name> 或 @func funcName <Function Name>。
funcName是函式的名稱（不允許空格）。
<Function Name>是函式的顯示名稱。
成員
語法： @memberof namespace
將名稱空間附加至函式。
引數
語法： @param {type} name <Parameter Description>
或者，您可以使用： @argument {type} name <Parameter Description> 或 @arg {type} name <Parameter Description>。
顯示函式使用的引數。一個函式可以有多個引數標籤，每個引數會依發生順序各一個標籤。
{type}代表引數型別。允許的引數型別為：
1. 字串
2. 數字
3. 布林值
4. 範圍
範圍是用來反向連結最適化表單的欄位。表單使用延遲載入時，您可以使用scope存取其欄位。您可以在載入欄位時存取欄位，或者如果欄位標示為全域。

所有其他引數型別則歸類於上述其中一種。不支援任何專案。請確定您選取以上任一型別。型別不區分大小寫。引數name中不允許空格。<Parameter Descrption> <parameter> can have multiple words. </parameter>
傳回型別
語法： @return {type}
或者，您可以使用@returns {type}。
新增函式的相關資訊，例如其目標。
{type}代表函式的傳回型別。允許的傳回型別為：
1. 字串
2. 數字
3. 布林值
所有其他回訪型別則會歸類到上述任一型別下。不支援任何專案。請確定您選取以上任一型別。傳回型別不區分大小寫。

此
語法： @this currentComponent

使用@this可參照寫入規則的最適化表單元件。

以下範例是根據欄位值。在以下範例中，規則會隱藏表單中的欄位。 this.value的this部分參考寫入規則的基礎調適型表單元件。

code language-none

code language-none
`/** * @function myTestFunction * @this currentComponent * @param {scope} scope in which code inside function will be executed. */ myTestFunction = function (scope) { if(this.value == "O"){ scope.age.visible = true; } else { scope.age.visible = false; } }`

   /**
   * @function myTestFunction
   * @this currentComponent
   * @param {scope} scope in which code inside function will be executed.
   */
   myTestFunction = function (scope) {
      if(this.value == "O"){
            scope.age.visible = true;
      } else {
         scope.age.visible = false;
      }
   }

note note
NOTE
使用自訂函式之前的註解作為摘要。摘要可以延伸至多行，直到遇到標籤為止。將大小限製為單一，以在規則產生器中提供簡要說明。

函式宣告支援的型別 function-declaration-supported-types

函式陳述式

function area(len) {
    return len*len;
}

此函式包含，但不包含jsdoc個註解。

函式運算式

var area;
//Some codes later
/** */
area = function(len) {
    return len*len;
};

函式運算式和陳述式

var b={};
/** */
b.area = function(len) {
    return len*len;
}

函式宣告為變數

/** */
var x1,
    area = function(len) {
        return len*len;
    },
    x2 =5, x3 =true;

限制：自訂函式只會從變數清單中挑選第一個函式宣告（如果同時挑選）。您可以對每個宣告的函式使用函式運算式。

函式宣告為物件

var c = {
    b : {
        /** */
        area : function(len) {
            return len*len;
        }
    }
};

建立自訂函式 create-custom-function

若要建立自訂函式，請執行下列步驟：

登入http://server:port/crx/de/index.jsp#。
在 /apps 檔案夾中建立一個檔案夾。例如，建立名為experience-league的資料夾。
儲存您的變更。
導覽至建立的資料夾，並建立型別為cq:ClientLibraryFolder的節點作為clientlibs。

導覽至新建立的clientlibs資料夾並新增allowProxy和categories屬性：

自訂程式庫節點屬性

note note
NOTE
您可以提供任何名稱來取代`customfunctionsdemo`。

儲存您的變更。
在clientlibs資料夾下建立名為js的資料夾。
在js資料夾下建立名為functions.js的JavaScript檔案
在clientlibs資料夾下建立名為js.txt的檔案。
儲存您的變更。
已建立的檔案夾結構如下所示：

連按兩下functions.js檔案以開啟編輯器。此檔案包含自訂函式的程式碼。
將下列程式碼新增至JavaScript檔案，以根據出生日期計算年齡(YYYY-MM-DD)。

code language-javascript

code language-javascript
`/** * Calculates Age * @name calculateAge * @return {string} */ function calculateAge(dateOfBirthString) { var dob = new Date(dateOfBirthString); var now = new Date(); var age = now.getFullYear() - dob.getFullYear(); var monthDiff = now.getMonth() - dob.getMonth(); if (monthDiff < 0 \|\| (monthDiff === 0 && now.getDate() < dob.getDate())) { age--; } return age; }`

    /**
         * Calculates Age
         * @name calculateAge
         * @return {string}
    */

    function calculateAge(dateOfBirthString) {
    var dob = new Date(dateOfBirthString);
    var now = new Date();

    var age = now.getFullYear() - dob.getFullYear();
    var monthDiff = now.getMonth() - dob.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
    age--;
    }

    return age;
    }