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

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​字段,然后点按​编辑规则​图标。 “规则编辑器”(Rule Editor)窗口将打开。

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

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

  4. 点按​选择状态​下拉框,选择​已更改

    当自定义更改时

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

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

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

    dropojectstoinputfield-retriedata

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

    dropobjectstooutputfield-retrieddata

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

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

    检索信息

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

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

  1. 选择​提交​字段,然后点按​编辑规则​图标。 “规则编辑器”(Rule Editor)窗口将打开。

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

    提交规则

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

    submit-is clicked

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

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

    update-shipping-address

    dropojectstoinputfield-updatedata

  5. 将表单对象选项卡中的​发运地址、状态和邮政编码​字段拖放到​投入​[!UICONTROL ​输入<a6<a>中<a6/>对象<a3/>的相应表名属性(例如customerdetails .shippingAddress)或在此处选择​]​字段7/>。​以表名(例如,此用例中的customerdetails)为前缀的所有字段用作更新服务的输入数据。 这些字段中提供的所有内容都将在数据源中更新。

    注意

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

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

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

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

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

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

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

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

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

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

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

  3. 点按​选择状态​下拉框,选择​已更改

    当自定义更改时

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

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

    代码编辑器

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

    display-validation-error

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now