自定义表单门户组件的模板

前提条件

管理表单元数据

HTML和CSS工作知识

概述

AEM Forms用户界面允许您向任何表单添加元数据。 自定义元数据可在列出和搜索您组织的表单时增强用户体验。

Forms Portal允许您在表单列表中使用自定义元数据。 在为资产创建自定义模板时,您可以修改资产布局,并将自定义元数据与CSS样式集结合使用。

请执行以下步骤,为各种Forms Portal组件创建自定义模板。

创建自定义模板

  1. 在/apps下创建sling:Folder节点

    添加“fpContentType”属性。 根据要为其定义自定义模板的组件,为属性指定相应的值。

    • 搜索和制表人组件:"/libs/fd/fp/formTemplate"

    • 草稿和提交组件:

      • 草稿部分:/libs/fd/fp/draftsTemplate
      • 提交部分:/libs/fd/fp/submissions模板
    • 链接组件:/libs/fd/fp/linkTemplate

    添加您希望在选择布局模板时显示的标题。

    注意

    标题可以与sling:Folder的节点名称不同。

    下图显示了“搜索和制表人”组件的配置。
    创建sling:Folder

  2. 在此文件夹中创建一个文件template.html以用作自定义模板。

  3. 编写自定义模板并使用自定义元数据,如下所述。

工作示例

以下是自定义模板的示例实现,Forms Portal在该模板中为Search & Lister组件获得自定义GeometrixxGov卡布局。

<div class="__FP_boxes-container __FP_single-color">
    <div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
 <div class="__FP_boxes-thumbnail">
     <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
        </div>
        <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
        <p>${description}</p>
        <div class="boxes-icon-cont __FP_boxes-icon-cont">
            <div class="op-dow">
                <a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">${localize-Apply}</a>
                <a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">${localize-Download}</a>
            </div>
        </div>
    </div>
</div>

自定义模板的技术规范

任何Forms Portal组件的自定义模板都包括可重复和不可重复的条目。 可重复条目是列表的基本实体。 可重复条目的示例包括搜索和制表人、草稿和提交以及链接组件。

Forms Portal为占位符提供了显示自定义/OOTB元数据的语法。 在显示表单、草稿或提交结果后,将填充占位符。

要包含可重复条目,请将属性​data-repeatable​的值配置为​true

在讨论的示例中,自定义模板的顶部有两个Div元素。第一个具有“__FP_boxes-容器”CSS类,它用作所列表单的容器元素。 第二个包含“__FP_boxes”CSS类,是基本实体的模板,此处为表单。 Div元素中存在的​data-repeatable​属性的值为​true

每个占位符都有一个专用的OOTB元数据集。 要在表单上的特定位置显示自定义元数据,请在该位置添加​${metadata_prop}属性

在示例中,metadata属性用于多个实例。例如,它用于​descriptionnameformUrlhtmlStylepdfUrlpdfStyle​和​a12/>路径

开箱即用的元数据

各种Forms Portal组件提供了可用于列表的专用OOTB元数据集。

搜索和制表器组件

  • 标题: 表单的标题

  • name:表单的名称(大多与标题相同)

  • description:表单的说明

  • formUrl:用于将表单渲染为HTML的URL

  • pdfUrl:用于将表单渲染为PDF的URL

  • assetType:资产的类型。有效值包括​表单PDF表单打印表单​和​自适应表单

  • htmlStyle& pdfStyle:用于渲染的HTML和PDF图标的显示样式。有效值为“__FP_display_none”或空。

注意

请记住在自定义样式表中使用__FP_display_none类。

  • downloadUrl:用于下载资产的URL。

支持在用户界面上本地化、排序和使用配置属性(仅限搜索和制表人):

  1. 本地化支持:要本地化任何静态文本,请 ${localize-YOUR_TEXT} 使用属性并使本地化值可用(如果尚不存在)。
    在讨论的示例中,属性和 ${localize-Apply}${localize-Download} 于本地化“应用”和“下载”文本。

  2. 支持排序:单击HTML元素对搜索结果排序。要在表布局中实现排序,请在特定表标题上添加“data-sortKey”属性。 此外,将其值添加为要排序的元数据。
    例如,对于网格视图中的“标题”标题,“data-sortKey”标题的值为“title”。 单击标题可对特定列中的值进行排序。

  3. 使用配置属性:“搜索和制表人”组件具有几种可在用户界面上使用的配置。例如,要显示通过编辑对话框保存的HTML工具提示文本,请使用${config-htmlLinkText}属性。 同样,对于PDF工具提示文本,请使 ${config-pdfLinkText} 用属性。

  • 标题: 表单的标题
  • formUrl:用于将表单渲染为HTML的URL
  • 目标:链接的目标属性。有效值为"_blank"和"_self"。
  • linkText:链接题注

草稿和提交组件

  • 路径:草稿/提交元数据节点的路径。将其与.HTML扩展名一起用作URL以打开草稿或提交。
  • contextPath:AEM实例的上下文路径
  • firstLetter:自适应表单标题的首字母(大写),已保存为草稿或已提交。
  • formName:自适应表单的标题,已保存为草稿或已提交。
  • draftID:列出的草稿的ID(仅在“草稿”部分的模板中使用)。
  • submitID:列出的提交的ID(仅在“提交”部分的模板中使用)。
  • 状态:已提交表单的状态。(仅在“提交”部分的模板中使用)。
  • description:与草稿或提交关联的自适应表单的说明。
  • diffTime:当前时间与草稿上次保存操作之间的差异。或者,当前时间与上次提交操作之间的差异。
  • iconClass:用于显示草稿/提交的第一个字母的CSS类。Forms Portal包括以下类,它们提供各种颜色背景。
  • 所有者:创建草稿/提交的用户。
  • 今天:创建草稿或提交的日期,采用DD:MM:YYYY格式。
  • TimeNow:草稿或提交的创建时间,以HH:MM:SS 24小时格式表示

注意:

  1. 对于“草稿和提交”组件下的“草稿”部分中的删除选项,将CSS类命名为“__FP_deleteDraft”。 此外,还应包含值​${draftID}​的属性"draftID",该值是相应草稿的草稿ID。

  2. 在创建指向打开草稿和提交的链接时,可以将​${path}.html​指定为锚点标记的​href​属性的值。

草稿和提交节点

A. 容器元素

B. “路径”元数据具有固定的层次结构,可获取为每个表单存储的缩略图。

C.用 于每个表单的模板部分的数据可重复属性

D. To localize "Apply"字符串

E. 使用配置属性pdfLinkText

F. 使用“pdfUrl”元数据

提示、技巧和已知问题

  1. 请勿在任何自定义模板中使用单引号(')。
  2. 对于自定义元数据,请仅将此属性存储在​jcr:content/metadata​节点上。 如果将其存储在任何其他位置,Forms Portal无法显示元数据。
  3. 请确保任何自定义元数据或现有元数据的名称不包含冒号(😃。 如果确实如此,则无法在用户界面上显示它。
  4. data- repeatable对Link组件没有任何重 ​要性。Adobe建议您避免在链接组件的模板中使用此属性。

相关文章

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