在AEM Forms中列出自定义资源类型 listing-custom-asset-types-in-aem-forms

Last update: Wed Mar 26 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager 6.4
Experience Manager 6.5

主题：
自适应表单

创建对象：

有经验的
开发人员

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

出于本文的目的，我们将创建一个自定义模板，以便在同一页面上显示自定义资源类型和OOTB资源类型。要创建自定义模板，请按照以下说明操作

在/apps下创建一个sling：文件夹。将其命名为“ myportalcomponent ”
添加“fpContentType”属性。将其值设置为“/libs/fd/ fp/formTemplate”。
添加“title”属性并将其值设置为“custom template”。这是您将在搜索和列表程序组件的下拉列表中看到的名称
在此文件夹下创建一个“template.html”。此文件将包含用于样式设置和显示各种资源类型的代码。

appsfolder

以下代码列出了使用搜索和列表程序组件的各种类型的资源。我们为每种类型的资产创建单独的html元素，如data-type = "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>

NOTE

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

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