Show Menu
主题×

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

前提条件

HTML和CSS的工作知识

概述

通过AEM Forms用户界面,您可以向任何表单添加元数据。 自定义元数据可以在列出和搜索组织表单时增强用户体验。
Forms Portal允许您在表单列表中使用自定义元数据。 在为资产创建自定义模板时,您可以修改其布局并将自定义元数据与CSS样式集结合使用。
请执行以下步骤,为各种Forms Portal组件创建自定义模板。

Creating a custom template

  1. 在/apps下创建sling:Folder节点
    添加“fpContentType”属性。 根据要为其定义自定义模板的组件,为属性指定相应的值。
    • 搜索和制表器组件:"/libs/fd/fp/formTemplate"
    • 草稿和提交组件:
      • 草稿部分:/libs/fd/fp/drafts模板
      • 提交部分:/libs/fd/fp/submissions模板
    • 链接组件:/libs/fd/fp/linkTemplate
    添加要在选择布局模板时显示的标题。
    标题可以与sling:Folder的节点名称不同。
    下图描述了Search & Lister组件的配置。
  2. 在此文件夹中创建一个文件template.html以用作自定义模板。
  3. 编写自定义模板并使用自定义元数据,如下所述。

工作示例

以下是自定义模板的示例实现,在该模板中,Forms Portal为Search & Lister组件获取自定义Geometrixx Gov卡布局。
<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元素。 第一个CSS类具有“__FP_boxes-容器”,它用作所列表单的容器元素。 第二个包含“__FP_boxes”CSS类,是基本实体的模板,本例中为表单。 Div元​ 素中存在的 ​data-repeatable属性的值为​ true
每个占位符都有一个专属的OOTB元数据集。 要在表单上的特定位置显示自定义元数据,请在该 位置添加$属性
在示例中,元数据属性用于多个实例。 例如,它以​ description 、name 、formStyle formUrl formStyleUrl、PdfStyleUrl、 ​PdfStylePdf、PdfStylePdfStyleStyleUrl的指定方式使用。

开箱即用的元数据

各种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”标题的值为“标题”。 单击标题可对特定列中的值进行排序。
  3. 使用配置属性 :Search & Lister组件具有多个可在用户界面上使用的配置。 例如,要显示通过编辑对话框保存的HTML工具提示文本,请使用属 ${config-htmlLinkText} 性。 同样,对于PDF工具提示文本,请使用属性 ${config-pdfLinkText}

草稿和提交组件

  • 路径 :草稿/提交元数据节点的路径。 将其与。HTML扩展名一起用作URL以打开草稿或提交。
  • contextPath :AEM实例的上下文路径
  • firstLetter :自适应表单标题的首字母(大写),保存为草稿或已提交。
  • formName :自适应表单的标题,保存为草稿或已提交。
  • draftID :列出的草稿的ID(仅在“草稿”部分的模板中使用)。
  • submitID :列出的提交的ID(仅在“提交”部分的模板中使用)。
  • status :已提交表单的状态。 (仅在“提交”部分的模板中使用)。
  • description :与草稿或提交关联的自适应表单的说明。
  • diffTime :草稿的当前时间与上次保存操作之间的差异。 或者,当前时间与上次提交操作之间用于提交的时间差。
  • iconClass :用于显示draft/submission的第一个字母的CSS类。 Forms Portal包括以下类,这些类提供各种颜色背景。
  • 所有者 :创建草稿/提交的用户。
  • 今天 :创建草稿或提交日期,格式为DD:MM:YYYY。
  • TimeNow :创建草稿或提交的时间,以HH:MM:SS 24小时格式表示
注意:
  1. 对于“草稿和提交”组件下的“草稿”部分中的删除选项,将CSS类命名为“__FP_deleteDraft”。 此外,还应包含值为 $的属性“draftID” ,该值是相应草稿的草稿ID。
  2. 在创建指向打开的草稿和提交的链接时,您可以将 $.html 指定为锚点标记的 href 属性值。
A . 容器元件
B. 具有固定层次结构的“路径”元数据,以获取为每个表单存储的缩略图。
C. 用于每个表单的模板部分的可重复数据属性
D. 本地化“应用”字符串
E. 使用配置属性pdfLinkText
F. 使用“pdfUrl”元数据

提示、技巧和已知问题

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