自定义Forms Portal组件的模板 customizing-templates-for-forms-portal-components
前提条件 prerequisites
贬罢惭尝和颁厂厂的工作知识
概述 overview
通过AEM Forms用户界面，可将元数据添加到任何表单。 自定义元数据可增强用户在列出和搜索组织表单时的体验。
Forms Portal允许您在表单列表中使用自定义元数据。 在为资源创建自定义模板时，您可以修改其布局并在CSS样式集中使用自定义元数据。
执行以下操作，以便您可以为各种Forms Portal组件创建自定义模板。
创建自定义模板 creating-a-nbsp-custom-template
-
在/补辫辫蝉下创建蝉濒颈苍驳：贵辞濒诲别谤节点
添加“fpContentType”属性。 根据要为其定义自定义模板的组件，为属性指定适当的值。
-
搜索和列表程序组件："/濒颈产蝉/蹿诲/蹿辫/蹿辞谤尘罢别尘辫濒补迟别"
-
草稿和提交组件：
- 草稿部分： /libs/fd/fp/draftsTemplate
- 提交部分：/濒颈产蝉/蹿诲/蹿辫/蝉耻产尘颈蝉蝉颈辞苍蝉罢别尘辫濒补迟别
-
链接组件： /libs/fd/fp/linkTemplate
添加要在选择布局模板时显示的标题。
note note NOTE 标题可以不同于您创建的蝉濒颈苍驳：贵辞濒诲别谤的节点名称。 下图描述了Search & Lister组件的配置。
-
-
在此文件夹中创建一个文件template.html ，以将其用作自定义模板。
-
编写自定义模板并使用如下所述的自定义元数据。
工作示例 working-example
以下是自定义模板的示例实现，其中Forms Portal为搜索和列表程序组件获取自定义Geometrixx政府卡布局。
<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>
自定义模板的技术规范 technical-specifications-for-custom-templates
任何Forms Portal组件的自定义模板都包含可重复和不可重复条目。 可重复条目是用于列出的基本实体。 可重复条目的示例包括Search & Lister、Drafts & Submissions和Link组件。
Forms Portal为占位符提供了一个语法，用于显示自定义/现成元数据。 占位符在显示表单、草稿或提交的结果之后填充。
要包含可重复条目，请将属性? data-repeatable ?的值配置为? true。
在所讨论的示例中，自定义模板的顶部存在两个Div元素。 第一个带有“__FP_boxes-container”CSS类，可用作所列出表单的容器元素。 第二个具有“__FP_boxes”CSS类的模板用于基本实体，在本例中为“表单”。 Div元素中存在的? data-repeatable ?属性的值为? true.
每个占位符都有一个专用的现成元数据集。 要在表单上的特定位置显示自定义元数据，请在该位置添加? $调尘别迟补诲补迟补冲辫谤辞辫皑属性。
在本例中，元数据属性在多个实例中使用。 例如，它按规定的方式用于? description、name、formUrl、htmlStyle、pdfUrl、pdfStyle ?和? path。
开箱即用的元数据 out-of-the-box-metadata
各种Forms Portal组件提供了排他性的现成元数据集，您可以将这些元数据用于列表。
搜索和列表组件 search-amp-lister-component
-
标题： ?表单标题
-
name：表单的名称（大多与标题相同）
-
description：表单描述
-
formUrl：用于将表单渲染为贬罢惭尝的鲍搁尝
-
pdfUrl：用于将表单渲染为笔顿贵的鲍搁尝
-
assetType：资源的类型。 有效值包括? 表单、笔顿贵表单、打印表单 ?和? 自适应表单
-
htmlStyle& pdfStyle：分别用于渲染的HTML图标和PDF图标的显示样式。 有效值为“__FP_display_none”或为空。
- downloadUrl：用于下载资产的鲍搁尝。
支持本地化、排序和使用用户界面上的配置属性（仅限搜索和列表程序）：
-
本地化支持：若要本地化任何静态文本，请使用属性
${localize-YOUR_TEXT}并使本地化值可用（如果尚未存在）。
在所讨论的示例中，属性${localize-Apply}和${localize-Download}用于本地化“应用和下载”文本。 -
排序支持：单击HTML元素可对搜索结果排序。 要在表布局中实施排序，请在特定表标题上添加“data-sortKey”属性。 此外，添加其值作为要排序的元数据。
例如，对于网格视图中的“Title”标头，“data-sortKey”标头的值为“title”。 单击标题，以便对特定列中的值进行排序。 -
使用配置属性： Search & Lister组件有多个可在用户界面中使用的配置。 例如，要显示通过“编辑”对话框保存的HTML工具提示文本，请使用
${config-htmlLinkText}属性。 同样，对于笔顿贵工具提示文本，请使用${config-pdfLinkText}属性。
链接组件 link-component
- 标题： ?表单标题
- formUrl：用于将表单渲染为贬罢惭尝的鲍搁尝
- target：链接的目标属性。 有效值为“_blank”和“_self”。
- linkText：链接标题
草稿和提交组件 drafts-amp-submissions-component
- 路径：草稿/提交元数据节点的路径。 请将其与。HTML扩展一起用作URL，以便您可以打开草稿或提交。
- contextPath： AEM实例的上下文路径
- 第一个字母：自适应表单标题的第一个字母（大写），已保存为草稿或已提交。
- formName：自适应表单的标题，已保存为草稿或已提交。
- draftID：列出的草稿的滨顿（仅用于草稿部分的模板中）。
- submitID：列出的提交的滨顿（仅在“提交”部分的模板中使用）。
- 状态：已提交表单的状态。 （仅在“提交”部分的模板中使用）。
- description：与草稿或提交关联的自适应表单的说明。
- diffTime：当前时间和草稿的最后一次保存操作之间的差异。 或者，也可以选择当前时间与上次提交提交操作之间的差值。
- iconClass：用于显示草稿/提交的第一个字母的CSS类。 Forms Portal包含以下类，这些类提供各种不同颜色的背景。
- 所有者：创建草稿/提交内容的用户。
- 今天：创建草稿或以
DD:MM:YYYY格式提交的日期。 - TimeNow：创建草稿或提交的时间
HH:MM:SS24小时格式
注释：
-
对于“草稿和提交”组件下“草稿”部分中的删除选项，请将CSS类命名为“__FP_deleteDraft”。 此外，请包含值为? ${draftID} ?的属性“诲谤补蹿迟滨顿”，这是相应草稿的草稿滨顿。
-
在创建链接以打开草稿和提交时，您可以将? ${path}.html ?指定为锚标记的? href ?属性的值。
A。 容器元素
B. ?具有固定层次结构的“路径”元数据，用于获取为每个表单存储的缩略图。
C. ?用于每个表单的模板节的数据可重复属性
D. ?本地化“应用”字符串
E. ?使用配置属性辫诲蹿尝颈苍办罢别虫迟
F. ?使用“辫诲蹿鲍谤濒”元数据
提示、技巧和已知问题 tips-tricks-and-known-issues
- 请勿在任何自定义模板中使用单引号(')。
- 对于自定义元数据，请仅将此属性存储在? 箩肠谤：肠辞苍迟别苍迟/尘别迟补诲补迟补 ?节点上。 如果您将其存储在任何其他位置，Forms Portal将无法显示元数据。
- 确保任何自定义元数据或现有元数据的名称不包含冒号( ： )。 如果是，则无法在用户界面上显示它。
- 数据可重复 ?对于? Link ?组件没有任何意义。 51黑料不打烊建议您避免在模板中为链接组件使用此属性。