根據核心元件建立最適化表單的自訂函式

以核心元件為基礎的最適化Forms會根據使用者輸入調整內容和行為，以提供動態使用者體驗。 自訂函式可讓開發人員擴充功能，確保表單符合特定需求。 透過整合自訂函式，開發人員可以實作複雜的邏輯、自動化流程，並匯入符合特定業務需求或使用者期望的獨特互動。 這可確保表單不僅適應各種條件，還可為各種使用案例提供更精確有效的解決方案。
本文會逐步引導您使用核心元件，針對Adaptive Forms建立自訂函式。

考量事項

建立自訂函式的先決條件

開始將自訂函式新增至最適化Forms之前，請確定您具備下列條件：

軟體：

建立自訂函數 create-custom-function

建立使用者端程式庫以呼叫規則編輯器中的自訂函式。 如需詳細資訊，請參閱使用使用者端資料庫。

建立自訂函式的步驟如下：

建立使用者端資源庫 create-client-library

您可以透過新增使用者端資料庫來新增自訂函式。 若要建立使用者端程式庫，請執行下列步驟：

複製存放庫

複製您的AEM Formsas a Cloud Service存放庫：

這個命令會下載存放庫並在您的電腦上建立複製存放庫的本機資料夾。 在本指南中，我們將此資料夾稱為[AEMaaCS專案目錄]。

新增使用者端資料庫資料夾

若要將新的使用者端程式庫資料夾新增至[AEMaaCS專案目錄]，請遵循下列步驟：

新增檔案和資料夾至使用者端資料庫資料夾

將下列專案新增至新增的使用者端程式庫資料夾：

Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/

在filter.xml中包含新資料夾：

將新建立的使用者端資料庫資料夾部署至您的AEM環境

將AEM as a Cloud Service [AEMaaCS專案目錄]部署至您的Cloud Service環境。 若要部署至您的Cloud Service環境：

如果您尚未設定管道，請參閱上的指南如何設定AEM Formsas a Cloud Service的管道。

管道執行成功後，新增到使用者端資料庫中的自訂函式便可在最適化表單規則編輯器中使用。

將使用者端程式庫新增至最適化表單 use-custom-function

將使用者端程式庫部署到Forms CS環境後，請在最適化表單中使用其功能。 若要在最適化表單中新增使用者端程式庫

您可以使用JavaScript註解，在最適化表單🔗的規則編輯器中使用自訂函式。

在最適化表單中使用自訂函式

在最適化表單中，您可以在規則編輯器🔗中使用自訂函式。 讓我們將下列程式碼新增至JavaScript檔案（Function.js檔案），以根據出生日期計算年齡(YYYY-MM-DD)。 建立自訂函式為calculateAge()，它以出生日期作為輸入並傳回年齡：

    /**
        * Calculates Age
        * @name calculateAge
        * @param {object} field
        * @return {string}
    */

    function calculateAge(field) {
    var dob = new Date(field);
    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;
    }

在上述範例中，當使用者以(YYYY-MM-DD)格式輸入出生日期時，會叫用自訂函式calculateAge並傳回年齡。

讓我們預覽表單，以觀察如何透過規則編輯器實作自訂函式：

自訂函式的功能

AEM表單中的自訂函式提供強大的解決方案，可擴充及個人化表單的功能。 您可以使用自訂函式來符合您組織的特定需求。

這些函式支援各種功能，包括使用特定欄位、使用全域欄位和非同步操作，以及合併快取機制。 這種靈活性可確保表單能夠適應複雜的需求，並提供有效率、量身打造的使用者體驗。 運用這些進階功能，您可以增強表單互動並最佳化效能，讓您的AEM表單功能更強大，回應速度也更快。

讓我們來探討自訂函式的功能。

自訂函式中的非同步支援 support-of-async-functions

非同步自訂函式未出現在規則編輯器清單中。 不過，您也可以在使用同步函式運算式建立的自訂函式中叫用非同步函式。

檢視以下程式碼，瞭解如何使用自訂函式叫用非同步函式：

    async function asyncFunction() {
    const response = await fetch('https://petstore.swagger.io/v2/store/inventory');
    const data = await response.json();
    return data;
    }

    /**
    * callAsyncFunction
    * @name callAsyncFunction callAsyncFunction
    */
    function callAsyncFunction() {
    asyncFunction()
        .then(responseData => {
        console.log('Response data:', responseData);
        })
        .catch(error => {
         console.error('Error:', error);
    });
}

在上述範例中，asyncFunction函式是asynchronous function。 它透過向https://petstore.swagger.io/v2/store/inventory發出GET請求來執行非同步操作。 它會使用await等待回應、使用response.json()將回應本文剖析為JSON，然後傳回資料。 callAsyncFunction函式是同步自訂函式，會叫用asyncFunction函式並在主控台中顯示回應資料。 雖然callAsyncFunction函式是同步的，但它會呼叫非同步asyncFunction函式，並以then和catch陳述式處理其結果。

若要檢視其運作情況，讓我們新增按鈕，並為按鈕建立規則，此規則會在按鈕按一下時叫用非同步函式。

請參考下方主控台視窗的圖例，以示範當使用者按一下Fetch按鈕時，會叫用自訂函式callAsyncFunction，進而呼叫非同步函式asyncFunction。 Inspect主控台視窗中，檢視對按鈕點按的回應：

自訂函式中支援的欄位和全域範圍物件 support-field-and-global-objects

欄位物件是指表單中的個別元件或元素，例如文字欄位、核取方塊。 全域物件包含唯讀變數，例如表單例項、目標欄位例項，以及在自訂函式內進行表單修改的方法。

自訂函式中的快取支援

Adaptive Forms會在規則編輯器中擷取自訂函式清單時，實作自訂函式的快取，以增強回應時間。 在error.log檔案中會顯示訊息為Fetched following custom functions list from cache。

具有快取支援的

如果修改自訂函式，快取會失效，並加以剖析。

疑難排解

下一步

現在讓我們檢視以核心元件為基礎的最適化表單的各種自訂函式範例。

另請參閱