在AEM Forms中列出自定义资产类型

创建自定义模板

为了撰写本文,我们将创建一个自定义模板,以在同一页面上显示自定义资产类型和OOTB资产类型。 要创建自定义模板,请按照以下说明操作

  1. 创建Sling:文件夹。 将其命名为“ myportalcomponent ”
  2. 添加“fpContentType”属性。 将其值设置为“/libs/fd/ fp/formTemplate”。
  3. 添加“title”属性,并将其值设置为“自定义模板”。 这是您将在搜索组件和Lister组件的下拉列表中看到的名称
  4. 在此文件夹下创建“template.html”。 此文件将保存要设置样式的代码,并显示各种资产类型。

appsfolder

以下代码使用搜索和列表组件列出了各种类型的资产。 我们会为每种类型的资产创建单独的html元素,如data-type = "videos"标记所示。 对于“videos”的资产类型,我们使用<video>元素在内联播放视频。 对于“worddocuments”的资产类型,我们会使用不同的html标记。

<div class="__FP_boxes-container __FP_single-color">
   <div  data-repeatable="true">
     <div class = "__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "videos">
   <video width="400" controls>
       <source src="${path}" type="video/mp4">
    </video>
         <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
     </div>
     <div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "worddocuments">
       <a href="/assetdetails.html${path}" target="_blank">
           <img src ="/content/dam/worddocuments/worddocument.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
          </a>
          <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
     </div>
  <div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "xfaForm">
       <a href="/assetdetails.html${path}" target="_blank">
           <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
          </a>
          <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
                <a href="{formUrl}"><img src="/content/dam/html5.png"></a><p>

     </div>
  <div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "printForm">
       <a href="/assetdetails.html${path}" target="_blank">
           <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
          </a>
          <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
                <a href="{pdfUrl}"><img src="/content/dam/pdf.png"></a><p>
     </div>
   </div>
</div>
注意

第11行 — 请更改图像src以指向您在DAM中选择的图像。

要在此模板中列出自适应Forms,请新建一个div,并将其数据类型属性设置为“guide”。 您可以复制并粘贴其data-type="printForm"的div,并将新复制的div的data-type设置为"guide"

配置搜索组件和Lister组件

定义自定义模板后,我们现在必须将此自定义模板与“搜索和制表人”组件相关联。 将浏览器指向此url

切换到设计模式,并配置段落系统,以在允许的组件组中包含搜索和制表器组件。 “搜索”和“制表人”组件是“文档服务”组的一部分。

切换到编辑模式,并将搜索和制表程序组件添加到ParSys中。

打开“搜索和制表人”组件的配置属性。 确保选中“资产文件夹”选项卡。 在搜索和列表组件中,选择要从中列出资产的文件夹。 为本文的目的,我已选择

  • /content/dam/videosAndWordDocuments
  • /content/dam/formsanddocuments/assettypes

assetfolder

选项卡。 在此,您将选择要在搜索组件和列表组件中显示资产的模板。

从下拉菜单中选择“自定义模板”,如下所示。

搜索器

配置要在门户中列出的资产类型。 要在“资产列表”中配置资产的选项卡类型,并配置资产类型,请执行以下操作: 在本例中,我们配置了以下类型的资产

  1. MP4文件
  2. Word文档
  3. 文档(这是OOTB资产类型)
  4. 表单模板(这是OOTB资产类型)

以下屏幕快照显示了为列表配置的资产类型

assettypes

现在,您已配置了搜索和制表人门户组件,接下来该看看制表人的行动了。 将浏览器指向此url 。 结果应类似于下图所示。

注意

如果您的门户在发布服务器上列出了自定义资产类型,请确保为“fd-service”用户授予节点​**/apps/fp/extensions/querybuilder**​的“读取”权限


资产类型请使用包管理器下载并安装此包。 其中包含示例mp4和word文档以及xdp文件,它们将用作资产类型,以使用搜索和列表组件列出

在此页面上