自定义Forms Portal组件的模板 customizing-templates-for-forms-portal-components

先决条件 prerequisites

管理表单元数据

HTML和CSS工作知识

概述 overview

通过AEM Forms用户界面,可将元数据添加到任何表单。 自定义元数据可增强用户在列出和搜索组织表单时的体验。

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

执行以下操作,以便您可以为各种Forms Portal组件创建自定义模板。

创建自定义模板 creating-a-nbsp-custom-template

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

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

    • 搜索和列表程序组件:"/libs/fd/fp/formTemplate"

    • 草稿和提交组件:

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

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

    note note
    NOTE
    标题可以不同于您创建的sling:Folder的节点名称。

    下图描述了Search & Lister组件的配置。
    创建sling:Folder

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

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

工作示例 working-example

以下是自定义模板的示例实现,其中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>

自定义模板的技术规范 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.

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

在本例中,元数据属性在多个实例中使用。 例如,它按规定的方式用于​ descriptionnameformUrlhtmlStylepdfUrlpdfStyle ​和​ path

开箱即用的元数据 out-of-the-box-metadata

各种Forms Portal组件提供了排他性的现成元数据集,您可以将这些元数据用于列表。

搜索和列表组件 search-amp-lister-component

  • 标题: ​表单标题

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

  • description:表单描述

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

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

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

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

NOTE
切记在自定义样式表中使用__FP_display_none类。
  • downloadUrl:用于下载资产的URL。

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

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

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

  3. 使用配置属性: Search & Lister组件有多个可在用户界面中使用的配置。 例如,要显示通过“编辑”对话框保存的HTML工具提示文本,请使用${config-htmlLinkText}属性。 同样,对于PDF工具提示文本,请使用 ${config-pdfLinkText}属性。

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

草稿和提交组件 drafts-amp-submissions-component

  • 路径:草稿/提交元数据节点的路径。 请将其与。HTML扩展名用作URL,以便打开草稿或提交。
  • contextPath: AEM实例的上下文路径
  • 第一个字母:自适应表单标题的第一个字母(大写),已保存为草稿或已提交。
  • 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. ​本地化“应用”字符串

E. ​使用配置属性pdfLinkText

F. ​使用“pdfUrl”元数据

提示、技巧和已知问题 tips-tricks-and-known-issues

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

相关文章

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2