教程:将规则应用于自适应表单字段

06-apply-rules-to-adaptive-form_main

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

关于教程

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

您可以在自适应Forms规则编辑器中了解有关规则编辑器的更多信息。

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

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

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

步骤1:从数据库检索客户记录

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

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

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

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

  2. 点按​客户ID​字段,然后点按​编辑规则​图标。 将打开规则编辑器窗口。

  3. 点按​+创建​图标以添加规则。 此时将打开可视编辑器。

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

  4. 点按​选择状态​下拉列表,然后选择​已更改

    when customidischanged

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

  6. 从​Select​下拉列表中选择​Retrieve Shipping Address​服务。

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

    dropobjectstoinputfield-retrievedata

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

    dropobjectstooutputfield-retrievedata

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

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

    检索信息

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

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

  1. 选择​Submit​字段,然后点按​编辑规则​图标。 将打开规则编辑器窗口。

  2. 选择​提交 — 单击​规则,然后点按​编辑​图标。 此时会显示用于编辑提交规则的选项。

    submit-rule

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

    已单击提交

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

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

    update-shipping-address

  5. dropobjectstoinputfield-updatedata

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

    注意

    请勿将​Name​和​Customer ID​字段拖放到相应的tablename.property(例如customerdetails.name)中。 这有助于避免错误更新客户的名称和ID。

  6. 将“表单对象”选项卡中的​客户ID​字段拖放到​INPUT​框中的id字段。 没有前缀表名的字段(例如,此用例中的customerdetails)用作更新服务的搜索参数。 此用例中的​id​字段唯一标识客户详细信息表中的记录。

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

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

步骤3:(附加部分)使用代码编辑器运行验证并显示错误消息

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

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

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

  1. 点按​客户ID​字段,然后点按Edit Rules图标。 将打开规则编辑器窗口。

  2. 点按​+创建​图标以添加规则。 此时将打开可视编辑器。

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

  3. 点按​选择状态​下拉列表,然后选择​已更改

    when customidischanged

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

  4. 从​Visual Editor​切换到​代码编辑器。 开关控件在窗口的右侧。 此时将打开代码编辑器,其中显示与以下内容类似的代码:

    代码编辑器

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

    var inputs = {
        "id" : this
    };
    
  6. 将guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs)部分替换为以下代码:

    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。 出现错误消息。

    显示验证错误

在此页面上