列出AEM Forms中的自訂資產型別 listing-custom-asset-types-in-aem-forms

Last update: Fri Jan 26 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
Adaptive Forms

建立對象：

Experienced
Developer

建立自訂範本 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"