在AEM Forms列出自定義資產類型

建立自定義模板

為此文章的目的,我們將建立一個自定義模板,以在同一頁上顯示自定義資產類型和OOTB資產類型。 要建立自定義模板,請按照以下說明操作

  1. 建立吊帶:資料夾。 將其命名為" myportalcomponent "
  2. 添加"fpContentType"屬性。 將其值設定為「」/libs/fd/fp/formTemplate」。
  3. 添加「title」屬性,並將其值設定為「自定義模板」。 這是您將在「搜索」和「Lister元件」下拉清單中看到的名稱
  4. 在此資料夾下建立"template.html"。 此檔案將保存要樣式化的代碼並顯示各種資產類型。

應用程式資料夾

以下代碼列出了使用搜索和lister元件的各種類型的資產。 我們為每種類型的資產建立單獨的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>
注意

第11行 — 請更改影像src以指向您在DAM中選擇的影像。

要在此模板中列出AdaptiveForms,請建立新div並將其資料類型屬性設定為「guide」。 可以複製並貼上其data-type="printForm的div,並將新複製的div的data-type設定為"guide"

配置搜索和Lister元件

定義自定義模板後,現在必須將此自定義模板與「Search and Lister」元件關聯。 指向瀏覽器 此URL

切換到「設計」模式,並將段落系統配置為在允許的元件組中包括「搜索和李斯特」元件。 Search和Lister元件是Document Services組的一部分。

切換到編輯模式,並將Search和Lister元件添加到ParSys。

開啟「Search and Lister」元件的配置屬性。 確保選中「資產資料夾」頁籤。 選擇要從中列出搜索和線索元件中資產的資料夾。 為本文的目的,我選擇

  • /content/dam/VideosAndWordDocuments
  • /content/dam/formsanddocuments/assettypes

程式集資料夾

頁籤。 在此,您將選擇要在搜索和線索元件中顯示資產的模板。

從下拉清單中選擇「自定義模板」,如下所示。

塞勒斯特

配置要在門戶中列出的資產類型。 配置「資產清單」的資產類型頁籤,並配置資產類型。 在本示例中,我們配置了以下類型的資產

  1. MP4檔案
  2. Word文檔
  3. 文檔(這是OOTB資產類型)
  4. 表單模板(這是OOTB資產類型)

下面的螢幕抓圖顯示了為清單配置的資產類型

程式集類型

現在您已配置了Search和Lister Portal元件,是時候讓Lister開始行動了。 指向瀏覽器 此URL 。 結果應與下面顯示的影像類似。

注意

如果您的門戶正在發佈伺服器上列出自定義資產類型,請確保您向節點授予「fd-service」用戶「讀取」權限 /apps/fd/fp/extensions/querybuilder

程式集類型
請使用包管理器下載並安裝此包。 這包含將用作資產類型的示例mp4和word文檔以及xdp檔案,以使用搜索和lister元件列出

本頁內容