自定义自适应表单错误消息的布局和位置

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

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

自定义字段的布局

您可以自定义单个字段或所有字段的布局以更改题注和错误消息的位置。 请执行以下步骤将自定义布局应用于字段:

自定义单个字段的布局

请执行以下步骤将自定义布局应用于单个字段:

  1. 在​样式​模式下打开表单。 要在样式模式下打开表单,请在页面工具栏中点按画布下拉框 > 样式

  2. 在提要栏的​表单对象​下,选择字段,然后点按编辑按钮edit-button

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

    指定字段的内联样式

自定义表单中所有字段的布局

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

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

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

创建自定义字段布局

  1. 打开CRXDE lite。 默认URL为https://[Server]:[Port]/crx/de

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

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

  4. 更改复制节点的qtip和jcr:description属性的值。 例如,将属性的值更改为“右时出错”

  5. 要添加新样式和行为,请在/etc节点中创建客户端库。

    例如,在/etc/af-field-layout-clientlib位置创建节点client-library。 添加具有af.field.errorOnRight值和style.less文件的类别属性,其代码如下:

    .widgetErrorWrapper {
    
     height: 38px;
     margin: 5px;
    
     .guideFieldWidget{
     width: 60%;
     float: left; 
     }
    
     .guideFieldError{
     overflow:hidden;
     width:40%; 
     }
    
    }
    
  6. 要增强外观和行为,请在布局文件(errorOnRight.jsp)中包含创建的客户端库。

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

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

获取文件

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