自定义自适应表单的错误消息的布局和位置 customize-layout-and-positioning-of-error-messages-of-an-adaptive-form

您可以自定义自适应表单的错误消息的布局和位置。 您可以执行以下自定义设置:

  • 自定义字段标题的位置和布局,而不更改相应的CSS属性
  • 自定义内联错误消息的位置
  • 自定义动态帮助指示器的内容
  • 自定义字段组件(题注、小组件、简短描述、详细描述和帮助指示器组件)的位置,而不更改相应的CSS属性

自定义字段布局 customize-layout-of-fields

您可以自定义单个字段或所有字段的布局,以更改标题和错误消息的位置。

要将自定义布局应用于字段,请执行以下操作:

自定义单个字段的布局 customize-layout-of-a-single-field

  1. 以​ 样式 ​模式打开表单。 若要以样式模式打开表单,请在页面工具栏中选择 画布下拉列表 > 样式

  2. 在侧边栏中的​ 表单对象 ​下,选择字段并选择编辑按钮 edit-button

  3. 选择要自定义的字段的状态,并指定该状态的样式。

    指定字段的内联样式

自定义表单所有字段的布局 customize-layout-of-all-the-fields-of-a-form

通过AEM Forms,您现在可以创建主题并将其应用于表单。 主题编辑器允许您在一个位置指定表单组件的样式。 创建主题时,可在组件级别指定样式。 有关主题的更多信息,请参阅AEM Forms中的主题

使用主题编辑器创建主题以自定义表单中所有字段的布局。 创建主题后,请执行以下步骤以将其应用于表单:

  1. 在编辑模式下打开表单。
  2. 在编辑模式下,选择一个组件,然后选择 字段级 > 自适应表单容器,然后选择 cmppr
  3. 在侧栏的自适应表单主题下,选择您使用主题编辑器创建的主题。

创建自定义字段布局 create-a-custom-field-layout

  1. 打开CRXDE Lite。 默认URL为https://'[服务器]:[端口]'/crx/de。

  2. 将字段布局从/libs/fd/af/layouts/field节点(例如defaultFieldLayout)复制到/apps节点(例如/apps/af-field-layout)。

  3. 重命名复制的节点和defaultFieldLayout.jsp文件。 例如,errorOnRight.jsp。

  4. 更改所复制节点的qtip和jcr:description属性的值。 例如,将属性的值更改为Error On Right

  5. 要添加新样式和行为,请在/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%;
     }
    
    }
    
  6. 要增强外观和行为,请在布局文件(errorOnRight.jsp)中包含创建的客户端库。

  7. 打开字段的“编辑”对话框,然后选择​ 样式 ​选项卡。 在​ 配置字段布局 ​下拉框中,选择新创建的布局,然后单击​ 确定

ErrorOnRight.zip包包含用于在字段右侧显示错误消息的代码。

获取文件

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2