HTML和CSS工作知识
通过AEM Forms用户界面,可将元数据添加到任何表单。 在列出和搜索组织的表单时,自定义元数据可以增强用户体验。
Forms Portal允许您在表单列表中使用自定义元数据。 创建资产的自定义模板时,您可以修改其布局,并在CSS样式集中使用自定义元数据。
执行以下步骤,为各种Forms Portal组件创建自定义模板。
在/apps下创建sling:Folder节点
添加“fpContentType”属性。 根据要为其定义自定义模板的组件,为属性指定适当的值。
搜索和列表程序组件:"/libs/fd/fp/formTemplate"
草稿和提交组件:
链接组件: /libs/fd/fp/linkTemplate
添加要在选择布局模板时显示的标题。
标题可以不同于您创建的sling:Folder的节点名称。
下图描述了Search & Lister组件的配置。
在此文件夹中创建一个文件template.html作为自定义模板。
编写自定义模板并使用如下所述的自定义元数据。
以下是自定义模板的示例实现,其中Forms Portal为Search & Lister组件获取了自定义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>
任何Forms Portal组件的自定义模板都包含可重复和不可重复条目。 可重复条目是用于列出的基本实体。 可重复条目的示例包括Search & Lister、Drafts & Submissions和Link组件。
Forms Portal为占位符提供了一个语法以显示自定义/OOTB元数据。 在显示表单、草稿或提交的结果之后,会填充占位符。
要包含可重复条目,请配置属性的值 数据可重复 到 true.
在所讨论的示例中,自定义模板的顶部存在两个Div元素。 第一个带有“__FP_boxes-container”CSS类,可用作所列出表单的容器元素。 第二个是“__FP_boxes”CSS类,它是基本实体的模板,在本例中是表单。 此数据可重复Div元素中存在的属性具有值true.
每个占位符都有一个专用的OOTB元数据集。 要在表单上的特定位置显示自定义元数据,请添加 ${metadata_prop}属性 在那个地方。
在此示例中,元数据属性在多个实例中使用。 例如,它用于描述,name,formUrl,htmlStyle,pdfUrl,pdfStyle、和路径按规定的方式进行。
各种Forms Portal组件提供了一组独有的OOTB元数据,您可以将这些元数据用于列出。
标题: 表单标题
name:表单的名称(大多与标题相同)
描述:表单描述
formUrl:用于将表单渲染为HTML的URL
pdfUrl:用于将表单渲染为PDF的URL
资产类型:资源的类型。 有效值包括 表单,PDF表单, 打印表单、和 自适应表单
htmlStyle和 pdfStyle:分别用于渲染的HTML图标和PDF图标的显示样式。 有效值为''__FP_display_none”或空白。
切记在自定义样式表中使用__FP_display_none类。
支持本地化、排序和使用用户界面上的配置属性(仅限搜索和列表程序):
本地化支持:要将任何静态文本本地化,请使用属性 ${localize-YOUR_TEXT}
并使本地化的值可用(如果尚不存在)。
在所讨论的示例中,属性 ${localize-Apply}
和 ${localize-Download}
用于本地化“应用”和“下载”文本。
支持排序:单击HTML元素可对搜索结果排序。 要在表格布局中实施排序,请在特定表头上添加“data-sortKey”属性。 此外,将其值添加为要排序的元数据。
例如,对于网格视图中的“Title”标头,“data-sortKey”标头的值为“title”。 单击标题可对特定列中的值进行排序。
使用配置属性:搜索和列表程序组件具有可在用户界面上使用的多个配置。 例如,要显示通过“编辑”对话框保存的HTML工具提示文本,请使用 ${config-htmlLinkText}
属性。 同样,对于PDF工具提示文本,请使用 ${config-pdfLinkText}
属性。
注意:
对于“草稿和提交”组件下“草稿”部分中的删除选项,将CSS类命名为“__FP_deleteDraft”。 此外,还应包含属性“draftID”和值 ${draftID},即相应草稿的草稿ID。
在创建用于打开草稿和提交的链接时,您可以指定 ${path}.html 作为 href 定位标记的属性。
A. 容器元素
B. 具有固定层次结构的“路径”元数据,用于获取为每个表单存储的缩略图。
C. 用于每个表单的模板部分的数据可重复属性
D. 要本地化“应用”字符串
E. 使用配置属性pdfLinkText
F. 使用“pdfUrl”元数据