教程:将规则应用于自适应表单字段 tutorial-apply-rules-to-adaptive-form-fields

06-apply-rules-to-adaptive-form_main

本教程是创建您的第一个自适应表单系列中的步骤。 Adobe建议按时间顺序关注系列,以了解、执行和演示完整的教程用例。

关于教程 about-the-tutorial

您可以使用规则将交互性、业务逻辑和智能验证添加到自适应表单。 自适应表单具有内置规则编辑器。 规则编辑器提供了与引导式导览类似的拖放功能。 拖放方法是创建规则的最快、最简单的方法。 规则编辑器还为有兴趣测试其编码技能或将规则提升到更高层次的用户提供了一个代码窗口。

有关规则编辑器的更多信息,请访问自适应Forms规则编辑器

在本教程结束时,您将学习如何创建规则以:

  • 调用表单数据模型服务以从数据库中检索数据
  • 调用表单数据模型服务以向数据库添加数据
  • 运行验证检查并显示错误消息

本教程每个部分末尾的交互式GIF图像可帮助您动态学习和验证所构建表单的功能。

步骤1:从数据库中检索客户记录 retrieve-customer-record

您按照创建表单数据模型文章创建了表单数据模型。 现在,您可以使用规则编辑器调用Forms数据模型服务,以检索信息并将其添加到数据库。

每个客户都分配有一个唯一的客户ID号,这有助于在数据库中识别相关的客户数据。 以下过程使用客户ID从数据库中检索信息:

  1. 打开自适应表单进行编辑。

    http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html

  2. 选择​ 客户ID ​字段并选择​ 编辑规则 ​图标。 将打开“规则编辑器”窗口。

  3. 选择​ +创建 ​图标以添加规则。 该操作将打开可视编辑器。

    在可视编辑器中,默认选择​ WHEN ​语句。 此外,您从中启动规则编辑器的表单对象(在本例中为​ 客户ID)在​ WHEN ​语句中指定。

  4. 选择​ 选择状态 ​下拉列表并选择​ 已更改

    whencustomeridischanged

  5. 在​ THEN ​语句中,从​ 选择操作 ​下拉列表中选择​ 调用服务

  6. 从​ 选择 ​下拉列表中选择​ 检索送货地址 ​服务。

  7. 将​ 客户ID ​字段从“表单对象”选项卡拖放到​ 放置对象,或在 ​​输入​​ 框中选择此处 ​字段。

    dropobjectstoinputfield-retrievedata

  8. 从“表单对象”选项卡中将​ 客户ID、名称、送货地址、状态和邮政编码 ​字段拖放到​ 放置对象或在 ​​输出​​ 框中选择 ​字段。

    dropobjectstooutputfield-retrievedata

    选择​ 完成 ​以保存规则。 在规则编辑器窗口中,选择​ 关闭

  9. 预览自适应表单。 在​ 客户ID ​字段中输入ID。 该表单现在可以从数据库中检索客户详细信息。

    retrieve-information

步骤2:将更新的客户地址添加到数据库 updated-customer-address

从数据库中检索到客户详细信息后,您可以更新送货地址、省/市和邮政编码。 以下过程调用表单数据模型服务将客户信息更新到数据库:

  1. 选择​ 提交 ​字段并选择​ 编辑规则 ​图标。 将打开“规则编辑器”窗口。

  2. 选择​ 提交 — 单击 ​规则并选择​ 编辑 ​图标。 此时会显示用于编辑“提交”规则的选项。

    提交规则

    在WHEN选项中,已选择​ 提交 ​和​ 已单击 ​选项。

    已单击

  3. 在​ THEN ​选项中,选择​ +添加语句 ​选项。 从​ 选择操作 ​下拉列表中选择​ 调用服务

  4. 从​ 选择 ​下拉列表中选择​ 更新送货地址 ​服务。

    update-shipping-address

    dropobjectstoinputfield-updatedata

  5. 从表单对象选项卡中将​ 送货地址、状态和邮政编码 ​字段拖放到​ 放置对象的相应tablename .property(例如,customerdetails .shippingAddress)或在 ​​ INPUT ​​ 框中选择此处 ​字段。 以tablename为前缀的所有字段(例如,此用例中的customerdetails)用作更新服务的输入数据。 这些字段中提供的所有内容都会在数据源中进行更新。

    note note
    NOTE
    请勿将​ Name ​和​ Customer ID ​字段拖放到对应的tablename.property(例如customerdetails.name)中。 它有助于避免错误地更新客户的名称和ID。
  6. 将​ 客户ID ​字段从表单对象选项卡拖放到​ 输入 ​框中的ID字段。 不带前缀表名的字段(例如,此使用案例中的customerdetails)用作更新服务的搜索参数。 此使用案例中的​ id ​字段唯一标识​ customerdetails ​表中的记录。

  7. 选择​ 完成 ​以保存规则。 在规则编辑器窗口中,选择​ 关闭

  8. 预览自适应表单。 检索客户的详细信息,更新送货地址,并提交表单。 再次检索同一客户的详细信息时,将显示更新的送货地址。

步骤3:(额外部分)使用代码编辑器运行验证并显示错误消息 step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages

您应该对表单运行验证,以确保在表单中输入的数据正确,并且在数据不正确时显示错误消息。 例如,如果在表单中输入了不存在的客户ID,则会显示一条错误消息。

自适应表单为多个组件提供了内置的验证,例如可用于常见用例的电子邮件和数值字段。 对于高级用例,使用规则编辑器可在数据库返回零(0)记录(无记录)时显示错误消息。

以下过程说明如何创建规则,以在表单中输入的客户ID在数据库中不存在时显示错误消息。 该规则还聚焦到​ 客户ID ​字段并重置该字段。 规则使用表单数据模型服务的dataIntegrationUtils API来检查数据库中是否存在客户ID。

  1. 选择​ 客户ID ​字段并选择Edit Rules图标。 将打开规则编辑器窗口。

  2. 选择​ +创建 ​图标以添加规则。 该操作将打开可视编辑器。

    在可视编辑器中,默认选择​ WHEN ​语句。 此外,您从中启动规则编辑器的表单对象(在本例中为​ 客户ID)在​ WHEN ​语句中指定。

  3. 选择​ 选择状态 ​下拉列表并选择​ 已更改

    whencustomeridischanged

    在​ THEN ​语句中,从​ 选择操作 ​下拉列表中选择​ 调用服务

  4. 从​ 可视编辑器 ​切换到​ 代码编辑器。 开关控件位于窗口的右侧。 代码编辑器将打开,显示类似于以下内容的代码:

    代码编辑器

  5. 将输入变量部分替换为以下代码:

    code language-javascript
    var inputs = {
        "id" : this
    };
    
  6. 使用以下代码替换guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs)部分:

    code language-javascript
    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
      if (result) {
          result = JSON.parse(result);
        customer_Name.value = result.name;
        customer_Shipping_Address = result.shippingAddress;
      } else {
        if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
              customer_Name.value = " ";
             guideBridge.setFocus(customer_ID);
        }
      }
    });
    
  7. 预览自适应表单。 输入不正确的客户ID。 出现错误消息。

    display-validation-error

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2