Edge Delivery Services 表单规则编辑器

• 条件 → 操作 (When/Then)

  code language-text
  WHEN Gross Salary > 50000 THEN Show "Additional Deduction"

  最适合用于有条件的可见性和渐进方式披露信息。

• 操作 ← 条件 (Set If/Only if)

  code language-text
  SET Taxable Income = Gross Salary - Deductions IF Deductions are applicable

  最适合用于计算和数据转换。

• If → Then → Else（替代操作）

  code language-text
  IF Income > 50000 THEN Show "High Income" fields ELSE Show "Standard Income" fields

  最适合用于分支逻辑和互斥选项流程。

• 条件：“总收入超过 50,000 美元”
• 主要操作：显示“附加扣除”
• 替代操作：隐藏“附加扣除”
• 结果：用户只看到适用于他们的字段

基本权限和设置：

• AEM as a Cloud Service：有表单编辑权限的创作访问权限
• 通用编辑器：已在您的环境中安装并配置
• 规则编辑器扩展：已通过扩展管理器启用
• 表单编辑权限：能够在通用编辑器中创建和更改表单组件

验证步骤：

1. 确认您可以从 AEM Sites 控制台访问通用编辑器
2. 验证您可以创建和编辑表单组件
3. 检查在选择表单组件后是否显示规则编辑器图标

必需的知识和技能：

• 熟悉通用编辑器：具备创建表单并在其中包含文本输入、下拉菜单和基本字段属性的经验
• 理解业务逻辑：能够针对您的特定用例定义条件要求和验证规则
• 熟悉表单组件：了解字段类型（文本、数字、下拉菜单）、属性（必需、可见、只读）和表单结构

在高级使用中的可选技能：

• JavaScript 基础知识：只有在创建自定义函数时需要（数据类型、函数、基本语法）
• 理解 JSON：对复杂的数据操作和 API 集成有帮助

评估问题：

• 您可以在通用编辑器中创建包含文本输入和提交按钮的基本表单吗？
• 您是否了解在您的业务环境中哪些情况下字段是必需的，哪些情况下字段是可选的？
• 您能否确定在您的用例中哪些表单元素需要根据条件决定可见性？

重要：默认情况下，通用编辑器环境中未启用规则编辑器扩展。

激活步骤：

1. 导航到 AEM 环境中的扩展管理器
2. 在可用扩展列表中找到“规则编辑器”扩展
3. 点击​启用，然后确认激活
4. 等待系统刷新（可能需要 1-2 分钟）

验证：

• 启用之后，您选择表单组件后就会出现规则编辑器图标：

图：选择表单组件后会显示规则编辑器图标

要打开规则编辑器：

1. 在通用编辑器中选择一个表单组件。
2. 点击规则编辑器图标。
3. 规则编辑器将在侧边面板中打开。

图：用于编辑组件规则的规则编辑器界面

规则编辑器界面概述

图：完整的规则编辑器界面和带编号的组件

1. 组件标题和规则类型：确认所选组件和活跃规则类型。

2. 表单对象和函数面板：

   • 表单对象：可以在规则中引用的字段和容器的层级视图
   • 函数：内置的数学、字符串、日期和验证助手

3. 面板切换：显示/隐藏对象和函数面板，增加工作区

4. 可视化规则生成器：拖放式、下拉驱动的规则编写器

5. 控件：完成（保存）、取消（放弃）。保存之前务必测试规则。

当组件已有规则时，您可以：

• 查看：查看规则汇总和逻辑
• 编辑：更改条件和操作
• 重新排序：改变执行顺序（从上到下）
• 启用/禁用：为测试切换规则
• 删除：安全删除规则

• 如果：有条件的复杂行为的主要规则（条件 → 操作 ± 否则）
• 隐藏/显示：根据条件控制可见性（渐进展示）
• 启用/禁用：控制字段是否可交互（例如禁用提交，直到必需字段有效）

• 设置值：自动填充值（例如日期、总计、副本）
• 清除值：当条件改变时移除数据
• 格式：转换显示格式（货币、电话、日期），而不改变存储的值

• 验证：自定义验证逻辑，包括跨字段检查和业务规则

• 数学表达式：实时计算数值（总计、税额、比率）

• 设置焦点：将焦点移至特定字段（谨慎使用）
• 设置属性：动态更改组件属性（占位符、选项等）

• 提交表单：以编程方式提交表单（仅在验证通过后）
• 重置表单：清除并重置为初始状态（使用前确认）
• 保存表单：保存为草稿，以后继续使用（长表单、多会话）

• 调用服务：调用外部 API/服务（处理加载和错误）
• 添加/删除实例：管理可重复分区（例如依赖项、地址）
• 导航到：路由到其他表单/页面（导航前保留数据）
• 在面板之间导航：控制向导步骤导航和跳过
• 分派事件：触发集成或分析的自定义事件

此示例演示了有条件的可见性和自动计算。

图：包含智能条件字段的税费计算表

您将构建这样一个表单：

1. 根据用户输入显示相关字段
2. 实时计算数值
3. 验证数据，以提高准确性

• 规则 1：根据条件显示

  code language-text
  WHEN Gross Salary > 50,000 THEN Show "Additional Deduction" ELSE Hide "Additional Deduction"

• 规则 2：计算应税收入

  code language-text
  SET Taxable Income = Gross Salary - Additional Deduction (Only when Additional Deduction applies)

• 规则 3：计算应缴税费

  code language-text
  SET Tax Payable = Taxable Income × 10% (Simplified flat rate)

目标：构建包含所有字段和初始设置的基本表单。

1. 打开通用编辑器：

   • 导航到 AEM Sites 控制台，选择您的页面，点击​编辑
   • 确保您已正确配置了通用编辑器

2. 按以下顺序添加表单组件：

   • 标题 (H2)：“税费计算表”
   • 数字输入：“总收入”（必填：是，占位符：“输入年薪”）
   • 数字输入：“附加扣除”（必填：否，占位符：“输入附加扣除”）
   • 数字输入：“应税收入”（只读：是）
   • 数字输入：“应缴税费”（只读：是）
   • 提交按钮：“计算税费”

3. 配置初始字段属性：

   • 隐藏“附加扣除”（在属性面板中设置可见性：否）
   • 将“应税收入”和“应缴税费”设置为只读：是

图：配置了基本组件的初始表单结构

检查点：您现在有一个包含所有必填字段的表单，其中“附加扣除”是隐藏的，计算得到的字段为只读。

目标：只有在总收入超过 50,000 美元的情况下才显示“附加扣除”字段。

1. 选择总收入字段，然后点击规则编辑器图标

2. 创建新规则：

   • 单击​创建
   • 将规则类型从“设置值”更改为​“如果”

3. 配置条件：

   • 从下拉菜单中选择​“大于”
   • 在数字字段中输入 50000

4. 设置 Then 操作：

   • 从选择操作下拉菜单中选择​“显示”
   • 从表单对象中拖动或选择​ “附加扣除” ​字段

5. 添加 Else 操作：

   • 点击​“添加 Else 操作”
   • 从选择操作下拉菜单中选择​“显示”
   • 选择​ “附加扣除” ​字段

6. 保存规则：点击​完成

目标：根据用户输入自动计算“应税收入”和“应缴税费”。

配置应税收入的计算：

1. 选择“应税收入”字段，打开规则编辑器

2. 创建数学表达式：

   • 点击​创建 → 选择 “数学表达式”
   • 构建表达式：总收入 - 附加扣除
   • 将“总收入”拖到第一个字段
   • 选择​ “减” ​运算符
   • 将“附加扣除”拖到第二个字段

3. 保存：点击​完成

配置应缴税费计算：

1. 选择“应缴税费”字段，打开规则编辑器

2. 创建数学表达式：

   • 点击​创建 → 选择 “数学表达式”
   • 构建表达式：应税收入 × 10 ÷ 100
   • 将“应税收入”拖到第一个字段
   • 选择​ “乘以” ​运算符
   • 输入数字 10
   • 点击​“扩展表达式”
   • 选择​ “除以” ​运算符
   • 输入数字 100

3. 保存：点击​完成

测试完整流程，验证您的实施：

1. 预览表单：点击通用编辑器中的预览模式

2. 测试条件逻辑：

   • 输入总收入 = 30000 → 应隐藏“附加扣除”
   • 输入总收入 = 60000 → 应显示“附加扣除”

3. 测试计算：

   • 总收入 = 60000 的情况下，输入附加扣除 = 5000
   • 验证应税收入 = 55000 (60000 - 5000)
   • 验证应缴税费 = 5500 (55000 × 10%)

图：已完成的包含条件字段和自动计算的税费计算器

成功标准：表单应在用户输入时动态显示/隐藏字段并实时计算数值。

自定义函数的理想场景：

• 复杂计算：难以用数学表达式规则表达的多步骤计算
• 业务特有的验证：您的组织或行业特有的自定义验证逻辑
• 数据转换：格式转换、字符串操作或数据解析
• 外部集成：调用内部 API 或第三方服务（受限）

自定义函数的好处：

• 可重复使用：只需编写一次，就可用于各种表单和规则
• 可维护：集中逻辑，易于更新和调试
• 性能：与复杂规则链相比，优化了 JavaScript 执行
• 灵活：能够处理边缘情况和标准规则无法应对的复杂场景

文件位置：您的 Edge Delivery Services 项目中的所有自定义函数都必须定义在 /blocks/form/functions.js 中。

开发工作流：

1. 函数设计

   • 使用以操作为导向的描述性函数名称
   • 定义明确的参数类型和返回值
   • 妥善处理边缘情况和无效输入

2. 实施

   • 编写整齐简洁、有良好注释的 JavaScript
   • 包含输入验证和错误处理
   • 集成之前独立测试函数

3. 文档

   • 添加全面的 JSDoc 注释
   • 包含使用示例和参数说明
   • 记录任何限制或依赖关系

4. 部署

   • 函数导出时将其命名
   • 部署到您的项目存储库
   • 测试之前验证函数已完成构建

实施示例：

/**
 * Concatenates first and last name with proper formatting
 * @name getFullName
 * @description Combines first and last name, handles edge cases like missing values
 * @param {string} firstName - The person's first name
 * @param {string} lastName - The person's last name
 * @returns {string} Formatted full name or empty string if both inputs are invalid
 */
function getFullName(firstName, lastName) {
  // Handle null, undefined, or empty string inputs
  const first = (firstName || '').toString().trim();
  const last = (lastName || '').toString().trim();

  return `${first} ${last}`.trim();
}

/**
 * Calculates the number of days between two dates
 * @name days
 * @description Computes absolute difference in days, handles various date input formats
 * @param {Date|string} endDate - End date (Date object or ISO string)
 * @param {Date|string} startDate - Start date (Date object or ISO string)
 * @returns {number} Number of days between dates, 0 if inputs are invalid
 */
function days(endDate, startDate) {
  // Convert string inputs to Date objects
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // Validate date objects
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  // Calculate absolute difference in milliseconds, then convert to days
  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// Export functions for use in Rule Editor
export { getFullName, days };

图：在 functions.js 文件中添加自定义函数

集成步骤：

1. 将函数添加到项目中

   • 在您的项目中创建或编辑 /blocks/form/functions.js
   • 在导出语句中包含您的函数

2. 部署和构建

   • 提交对存储库的更改
   • 确保构建过程成功完成
   • 留出 CDN 缓存更新的时间

3. 在规则编辑器中访问

   • 为任何表单组件打开规则编辑器
   • 在​ 选择操作 ​下拉菜单中选择​“函数输出”
   • 从可用函数列表中选择您的自定义函数
   • 使用表单字段或静态值配置函数参数

4. 彻底测试

   • 预览表单，验证函数行为
   • 使用各种输入组合（包括边缘情况）进行测试
   • 验证对表单加载和交互性能的影响

图：在规则编辑器界面中选择和配置自定义函数

函数使用的最佳做法：

• 错误处理：始终包含函数失败情况下的应变行为
• 性能：用实际数据量分析函数的执行情况
• 安全性：验证所有输入，防止安全漏洞
• 测试：创建涵盖正常情况和边缘情况的测试案例

• 最大程度减少规则的复杂性；将大逻辑分解成突出重点的小规则
• 按频率对规则排序（最常用规则优先）
• 保持每个组件的规则集易于管理
• 优先采用可重复使用的自定义函数，而不是重复逻辑

• 提供清晰的验证和内联反馈
• 避免不和谐的视觉变化；谨慎使用显示/隐藏
• 测试各种不同的设备和布局

• 使用边缘情况和已知值测试
• 验证各种不同的浏览器
• 记录复杂规则背后的目的，而不仅仅记录机制
• 为大表单维护规则库存
• 为组件和规则使用一致的命名惯例
• 为自定义函数制定版本，并在非生产环境中测试

• 验证组件名称和引用
• 检查执行顺序（从上到下）
• 使用已知值验证条件
• 检查浏览器控制台是否显示阻止错误

• 检查运算符和分组（AND/OR）
• 单独测试表达式片段
• 确认数据类型（数字与字符串对比）

• 简化深度嵌套的条件
• 分析自定义函数的执行情况
• 尽量减少规则中的外部调用
• 使用特定的选择器和引用

• 确认文件路径：/blocks/form/functions.js
• 确保所命名的导出正确
• 确认构建中包含了您的更改
• 部署后清除浏览器缓存
• 验证参数类型和错误处理

• 确认规则编辑器扩展已启用
• 选择受支持的组件
• 使用受支持的浏览器（Chrome、Firefox、Safari）
• 验证您具有必需的权限

重要限制

摘要

通用编辑器中的规则编辑器将静态表单转换为智能的响应式体验，可根据用户输入实时调整。通过条件逻辑、自动计算和自定义业务规则，您无需编写应用程序代码就可以创建复杂的表单工作流。

您已了解的关键功能：

• 条件逻辑：根据用户输入显示和隐藏字段，以创建有针对性的相关体验
• 动态计算：用户与表单交互时，能自动计算数值（税额、总计、费率）
• 数据验证：通过清晰、可操作的反馈信息实施实时验证
• 自定义函数：使用 JavaScript 扩展功能实现复杂的业务逻辑和集成
• 性能优化：应用最佳做法，实现可维护、高效的规则开发

传递的价值：

• 增强用户体验：通过渐进展开的方式和智能表单流程减少认知负荷
• 减少错误：通过实时验证和引导式输入防止无效提交
• 提高效率：通过自动计算和数据输入最大限度地减少用户工作量
• 可维护的解决方案：创建可重复使用、记录良好、可在整个组织内扩展的规则

业务影响：

表单成为数据收集、潜在客户鉴定和用户参与的有力工具。规则编辑器使非技术作者能够实施复杂的业务逻辑，降低开发成本，同时提高表单完成率和数据质量。