自定义自适应表单错误消息的布局和位置 customize-layout-and-positioning-of-error-messages-of-an-adaptive-form
您可以自定义自适应表单错误消息的布局和位置。 您可以执行以下自定义:
- 自定义字段标题的位置和布局,而无需对相应的CSS属性进行任何更改
- 自定义内联错误消息的位置
- 自定义动态帮助指示器的内容
- 自定义字段组件(标题、小组件、简短描述、长描述和帮助指示器组件)的位置,而无需对相应的CSS属性进行任何更改
自定义字段布局 customize-layout-of-fields
您可以自定义单个字段或所有字段的布局,以更改题注和错误消息的位置。 执行以下步骤以将自定义布局应用到字段:
自定义单个字段的布局 customize-layout-of-a-single-field
执行以下步骤以将自定义布局应用于单个字段:
-
在中打开表单 样式 模式。 要在样式模式下打开表单,请在页面工具栏中点按 > 样式.
-
在侧栏中,在 表单对象,选择字段并点按编辑按钮 .
-
选择要自定义的字段的状态,并指定该状态的样式。
自定义表单所有字段的布局 customize-layout-of-all-the-fields-of-a-form
借助AEM Forms,您现在可以创建主题并将其应用于表单。 主题编辑器允许您在一个位置指定表单组件的样式。 创建主题时,可在组件级别指定样式。 有关主题的更多信息,请参阅 AEM Forms主题.
使用主题编辑器创建主题以自定义表单中所有字段的布局。 创建主题后,请执行以下步骤以将其应用于表单:
- 在编辑模式下打开您的表单。
- 在编辑模式下,选择一个组件,然后点按 > 自适应表单容器,然后点按 .
- 在侧栏中自适应表单主题下,选择使用主题编辑器创建的主题。
创建自定义字段布局 create-a-custom-field-layout
-
打开CRXDE lite。 默认URL为
https://[Server]:[Port]/crx/de
. -
将字段布局从/libs/fd/af/layouts/field节点(例如defaultFieldLayout)复制到/apps节点(例如/apps/af-field-layout)。
-
重命名复制的节点和defaultFieldLayout.jsp文件。 例如,errorOnRight.jsp。
-
更改复制节点的qtip和jcr:description属性的值。 例如,将属性的值更改为Error On Right
-
要添加新样式和行为,请在/etc节点中创建客户端库。
例如,在/etc/af-field-layout-clientlib位置,创建节点client-library。 添加值af.field.errorOnRight的categories属性,以及使用以下代码的style.less文件:
code language-css .widgetErrorWrapper { height: 38px; margin: 5px; .guideFieldWidget{ width: 60%; float: left; } .guideFieldError{ overflow:hidden; width:40%; } }
-
要增强外观和行为,请包括在布局文件(errorOnRight.jsp)中创建的客户端库。
-
打开字段的编辑对话框,选择 样式 选项卡。 在 配置字段布局 下拉框中,选择新创建的布局,然后单击 确定.
ErrorOnRight.zip包包含用于在字段右侧显示错误消息的代码。