所见即所得创作中的规则编辑器介绍
此功能可通过提前访问计划使用。 要请求访问，请将包含您的GitHub组织名称和存储库名称的电子邮件(从您的官方地址发送到aem-forms-ea@adobe.com)。 例如，如果存储库URL为https://github.com/adobe/abc，则组织名称为adobe，存储库名称为abc。
您可以使用规则编辑器添加动态表单行为，该编辑器允许您创建规则。这些规则可实现条件字段的可见性，根据用户输入进行自动计算，并改善整体用户体验。通过简化表单填写流程，规则编辑器有助于确保准确性和效率。
规则编辑器提供了用于创建和管理规则的直观可视化界面。它的用户友好型方法使所有用户都能使用，即使是那些没有丰富专业技术知识的用户，也能毫不费力地在表单中实施逻辑。
了解规则
规则是指导用户在特定条件下执行什么操作的指令。
-
条件：条件是一种检查或规则，用于评估某事物是真还是假。它回答了下面的问题：“这符合要求吗？”
-
操作：操作是指条件为真时发生的事情。它是根据条件评估而触发的任务或行为。
规则通常遵循下面的其中一个结构：
- 条件-操作：先检查条件，然后执行操作。在规则编辑器中，
When规则类型强制执行condition-action结构。 - 操作-条件：先执行操作，然后检查条件。
Set Value Of和规则编辑器中的Validate规则类型强制执行action-condition结构。 - 操作-条件-替代操作：执行操作，检查条件，然后根据条件执行主要操作或替代操作。例如，默认情况下，
Show的替代操作是Hide；而Enable的替代操作是Disable。
例如，条件可以检查用户是否在某个字段中输入了某个值，而操作可以是显示或隐藏某个字段。
- 条件：检查收入是否大于 50000 美元。
- 操作：如果条件为真，则显示
Additional Deduction字段；否则，执行替代操作：隐藏Additional Deduction字段。
有关详细的分步说明，请参阅添加条件规则。
如何启用规则编辑器扩展？
在通用编辑器中，规则编辑器扩展默认为未启用。要启用规则编辑器扩展，请使用您的官方电子邮件 ID 写信至 aem-forms-ea@adobe.com。
为您的环境启用规则编辑器扩展后，
选择要编写规则的表单组件，然后单击
在本文中，form object 和 form component 可交替使用。
现在，您可以开始使用规则编辑器中可用的规则类型为所选表单字段编写规则或业务逻辑。
了解规则编辑器用户界面
单击
选择表单组件时，会列出该组件上的任何现有规则。您可以在规则编辑器上查看标题并预览规则摘要。此外，您还可以更改规则顺序、编辑规则、启用/禁用规则或删除规则。
可用规则类型
规则编辑器提供了一组预定义规则类型，您可以使用这些类型编写规则，如下表所示：
现在，让我们浏览如何在规则编辑器中编写规则。
编写规则
要了解如何在可视规则编辑器中编写规则，下面举一个简单的计税表单示例：
在上述表单中，用户输入工资总额。根据此输入，显示条件字段并计算应缴税款。
表单字段：
- 工资总额（用户输入）
- 额外扣除（条件字段）
- 应税收入（计算字段）
- 应缴税款（计算字段）
条件规则：
- 条件：工资总额 > 50000
- 操作：显示额外扣除字段
计算规则：
- 应税收入=工资总额 - 额外扣除（如适用）
- 应缴税款 = 应税收入 * 税率（为简单起见，假设固定税率为 10%）
要编写规则，请执行以下步骤：
1. 创作表单
要在通用编辑器中创作表单：
-
在通用编辑器中打开表单进行编辑。
-
添加以下表单组件：
- 税款计算表单（标题）
- 工资总额（数字输入）
- 额外扣除（数字输入）
- 应税收入（数字输入）
- 应缴税款 (数字输入)
- 提交（提交按钮）
-
通过打开表单
Properties，隐藏Additional Deduction表单字段。
2. 为表单字段添加条件规则
创作表单后，编写第一条规则，即只有当工资总额超过 50000 美元时才显示 Additional Deduction 字段。要添加条件规则：
- 在通用编辑器中打开要编辑的表单，在内容树中选择? 工资总额 ?字段，然后选择
出现可视化规则编辑器界面。 - 单击? 创建 ?以创建规则。
默认情况下，已选择Set Value Of规则类型。虽然不能更改或修改所选对象，但可以使用规则下拉列表选择其他规则类型。
- 打开规则类型下拉列表，并选择? 时间 ?规则类型。
- 选择? 选择状态 ?下拉列表，并选择? 大于。出现? 输入数字 ?字段。
- 在规则? 输入数字 ?字段中输入
50000。
您已将条件定义为When Gross Salary is greater than 50000。接下来，定义如果条件为True时要执行的操作。 - 在
Then声明中，从? 选择操作 ?下拉列表中选择? 显示。
- 从? 放置对象或选择此处 ?字段上的“表单对象”选项卡拖放? 额外扣除 ?字段。或者，从列出了表单中所有表单对象的弹出窗口菜单选择? 放置对象或选择此处 ?字段，并选择? 额外扣除 ?字段。
- 如果输入的工资低于
50000，单击? 添加其他部分 ?为? 工资总额 ?字段添加另一个条件。
- 在
Else声明中，从? 选择操作 ?下拉列表中选择? 隐藏。
- 从? 放置对象或选择此处 ?字段上的“表单对象”选项卡拖放? 额外扣除 ?字段。或者，从列出了表单中所有表单对象的弹出窗口菜单选择? 放置对象或选择此处 ?字段，并选择? 额外扣除 ?字段。
- 选择? 完成 ?保存规则。
规则编辑器中的规则显示如下。
3. 添加表单字段的计算规则
接下来，编写规则计算 Taxable Income，即 Gross Salary 和 Additional Deduction 之间的差值（如果适用）。要在? 应税收入 ?字段添加计算规则，请执行以下步骤：
-
在创作模式下，选择? 应税收入 ?字段，并选择
-
接下来，选择? 创建 ?以创建规则。
-
选择? 选择选项，并选择? 数学表达式。打开用于编写数学表达式的字段。
-
在数学表达式字段中：
-
从“表单对象”选项卡中选择或拖放第一个? 放置对象或在此处选择 ?字段中的? 工资总额 ?字段。
-
从? 选择运算符 ?字段中选择? 减号。
-
从“表单对象”选项卡中选择或拖放另一个? 放置对象或在此处选择 ?字段中的? 额外扣除 ?字段。
-
-
选择? 完成 ?保存规则。
现在，为
Tax Payable字段添加规则，该规则由应税收入乘以税率确定。为简单起见，假设固定税率为10%。 -
在创作模式下，选择? 应缴税款 ?字段，并选择
-
选择? 选择选项，并选择? 数学表达式。打开用于编写数学表达式的字段。
-
在数学表达式字段中：
-
从“表单对象”选项卡中选择或拖放第一个? 放置对象或在此处选择 ?字段中的? 应税收入 ?字段。
-
从? 选择运算符 ?字段中选择? 乘以。
-
从? 选择选项 ?字段中选择? 数字，然后在? 输入数字 ?字段中输入值
10。
-
-
接下来，选择表达式字段周围的突出显示区域，并选择? 扩展表达式。
-
在扩展表达式字段中，从? 选择运算符 ?字段中选择? 除以，并从? 选择选项 ?字段中选择? 数字。然后，在数字字段中指定
100。
-
选择? 完成 ?保存规则。
4. 预览表单
现在，当您预览表单并将? 工资总额 ?输入为 60,000 时，会出现? 额外扣除 ?字段，并会相应地计算出? 应税收入 ?和? 应缴税款。
除了“函数输出”下列出的现成函数（如总和、平均值）之外，您还可以编写自定义函数，实现复杂的业务逻辑。
规则编辑器中的自定义函数
Edge Delivery Services Forms 支持自定义函数，允许用户通过定义 JavaScript 函数来实现复杂的业务规则。自定义函数可扩展表单的功能，便于操作和处理输入的数据，以满足指定的要求。
创建自定义功能
要创建自定义函数，请编辑 ../[blocks]/form/functions.js 文件。创建过程一般包括以下步骤：
- 函数声明：定义函数名称及其参数（它接受的输入内容）。
- 逻辑实施：编写概述函数执行的具体计算或操作的代码。
- 函数导出：通过从相关文件导出该函数，使您的规则内可以访问该函数。
此示例演示了两个自定义函数 getFullName 和 days：
/**
* Get Full Name
* @name getFullName Concats first name and last name
* @param {string} firstname in Stringformat
* @param {string} lastname in Stringformat
* @return {string}
*/
function getFullName(firstname, lastname) {
return `${firstname} ${lastname}`.trim();
}
/**
* Calculate the number of days between two dates.
* @param {*} endDate
* @param {*} startDate
* @name days Calculates the numebr of days between two dates
* @returns {number} returns the number of days between two dates
*/
function days(endDate, startDate) {
const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
const end = typeof endDate === 'string' ? new Date(endDate) : endDate;
// return zero if dates are valid
if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
return 0;
}
const diffInMs = Math.abs(end.getTime() - start.getTime());
return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}
// eslint-disable-next-line import/prefer-default-export
export { getFullName, days };
使用规则编辑器中的自定义函数
要在规则编辑器中使用自定义函数：
-
添加函数：在
../[blocks]/form/functions.js文件中包含您的自定义函数。请记得将其添加到文件内的export声明中。 -
部署文件：将更新后的
functions.js文件部署到您的 GitHub 项目并验证是否成功构建。 -
函数的使用：在? 选择操作 ?字段中选择
Function Output选项，访问表单规则编辑器中的函数。
-
预览表单：预览具有新实施功能的表单。
附加信息
../[blocks]/form/functions.js 文件中添加完整代码。本文提供了有关通用编辑器中可用规则编辑器的有限信息。要了解有关规则编辑器和自定义函数的更多信息，请参阅以下文章：