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