本教程是 创建您的第一个自适应表单 系列。 Adobe建议按照时间顺序排列这些系列,以了解、执行和演示完整的教程用例。
您可以使用规则向自适应表单添加交互性、业务逻辑和智能验证。 自适应表单具有内置规则编辑器。 规则编辑器提供了拖放功能,与引导式导览类似。 拖放方法是创建规则最快、最简单的方法。 规则编辑器还为有兴趣测试其编码技能或将规则提升到更高级别的用户提供了一个代码窗口。
您可以在 自适应Forms规则编辑器.
在教程结束时,您将学习如何创建规则以:
教程每个部分末尾的交互式GIF图像可帮助您即时学习和验证要构建的表单的功能。
通过按照 创建表单数据模型 文章。 现在,您可以使用规则编辑器调用Forms数据模型服务以检索信息并将信息添加到数据库。
每个客户都会分配一个唯一的客户ID号,这有助于识别数据库中的相关客户数据。 以下过程使用客户ID从数据库中检索信息:
打开自适应表单进行编辑。
http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html
点按 客户ID 字段,然后点按 编辑规则 图标。 将打开规则编辑器窗口。
点按 +创建 图标以添加规则。 此时将打开可视编辑器。
在可视化编辑器中, WHEN 语句。 此外,表单对象(在本例中, 客户ID)中,将在 WHEN 语句。
点按 选择状态 下拉框并选择 已更改.
在 然后 语句,选择 调用服务 从 选择操作 下拉菜单。
选择 检索送货地址 服务 选择 下拉菜单。
拖放 客户ID 字段 放置对象或选择此处 字段 输入 框中。
拖放 客户ID、名称、送货地址、州和邮政编码 字段 放置对象或选择此处 字段 输出 框中。
点按 完成 来保存规则。 在规则编辑器窗口中,点按 关闭.
预览自适应表单。 在 客户ID 字段。 现在,表单可以从数据库中检索客户详细信息。
在从数据库中检索客户详细信息后,您可以更新送货地址、状态和邮政编码。 以下过程会调用表单数据模型服务来将客户信息更新到数据库:
选择 提交 字段,然后点按 编辑规则 图标。 将打开规则编辑器窗口。
选择 提交 — 单击 规则并点按 编辑 图标。 此时会显示用于编辑提交规则的选项。
在WHEN选项中, 提交 和 点击 选项。
在 然后 选项,点按 +添加语句 选项。 选择 调用服务 从 选择操作 下拉菜单。
选择 更新送货地址 服务 选择 下拉菜单。
拖放 送货地址、州和邮政编码 字段 表单对象 选项卡,指向 放置对象或选择此处 字段 输入 框中。 所有前缀为tablename的字段(例如,此用例中的customerdetails)都用作更新服务的输入数据。 这些字段中提供的所有内容都将在数据源中更新。
请勿拖放 名称 和 客户ID 字段到相应的tablename.property(例如customerdetails.name)。 这有助于避免错误更新客户的名称和ID。
拖放 客户ID 字段 表单对象 选项卡 输入 框中。 没有前缀表名的字段(例如,此用例中的customerdetails)用作更新服务的搜索参数。 的 id 此用例中的字段唯一标识 customerdetails 表。
点按 完成 来保存规则。 在规则编辑器窗口中,点按 关闭.
预览自适应表单。 检索客户详细信息、更新送货地址并提交表单。 再次检索同一客户的详细信息时,将显示更新的发运地址。
您应该对表单运行验证,以确保在表单中输入的数据正确无误,并在数据不正确时显示错误消息。 例如,如果在表单中输入了非现有客户ID,则应显示一条错误消息。
自适应表单提供了多个具有内置验证的组件,例如可用于常见用例的电子邮件和数字字段。 例如,当数据库返回零(0)条记录(无记录)时,使用规则编辑器来显示错误消息。
以下过程说明如何创建规则,以在表单中输入的客户ID在数据库中不存在时显示错误消息。 该规则还会将焦点引到并重置 客户ID 字段。 规则使用 表单数据模型服务的dataIntegrationUtils API 来检查数据库中是否存在客户ID。
点按 客户ID 字段,然后点按 Edit Rules
图标。 的 规则编辑器 窗口。
点按 +创建 图标以添加规则。 此时将打开可视编辑器。
在可视化编辑器中, WHEN 语句。 此外,表单对象(在本例中, 客户ID)中,将在 WHEN 语句。
点按 选择状态 下拉框并选择 已更改.
在 然后 语句,选择 调用服务 从 选择操作 下拉菜单。
从 可视编辑器 to 代码编辑器. 开关控件在窗口的右侧。 此时将打开代码编辑器,其中显示与以下内容类似的代码:
将输入变量部分替换为以下代码:
var inputs = {
"id" : this
};
替换 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);
}
}
});
预览自适应表单。 输入错误的客户ID。 出现错误消息。