基于核心组件创建自适应表单的自定义函数

基于核心组件的自适应Forms通过根据用户输入调整内容和行为来提供动态用户体验。 自定义函数允许开发人员扩展功能，确保表单满足特定要求。 通过集成自定义函数，开发人员可以实施复杂的逻辑、自动化流程并引入符合特定业务需求或用户期望的独特交互。 它确保表单不仅适应不断变化的条件，而且为各种用例提供更加精确和有效的解决方案。
本文会指导您完成使用核心组件为自适应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 Forms中的自定义函数为扩展和个性化表单的功能提供了可靠的解决方案。 您可以使用自定义函数来满足组织的特定需求。

这些函数支持各种功能，包括使用特定字段、使用全局字段和异步操作，以及合并缓存机制。 这种灵活性确保表单能够适应复杂的需求，并提供高效、量身定制的用户体验。 利用这些高级功能，您可以增强表单交互并优化性能，使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

字段对象是指表单中的单个组件或元素，例如文本字段和复选框。 全局对象包含只读变量，例如表单实例、目标字段实例以及在自定义函数中修改表单的方法。

自定义函数中的缓存支持

自适应Forms在规则编辑器中检索自定义函数列表时，为自定义函数实施缓存以增强响应时间。 error.log文件中显示一条消息，名称为Fetched following custom functions list from cache。

支持缓存的

如果修改了自定义函数，缓存将失效，并且会进行解析。

疑难解答

后续步骤

现在，让我们查看基于核心组件的自适应表单的各种自定义函数示例。

另请参阅