列出AEM Forms中的自訂資產類型

建立自訂範本

為了本文的目的,我們將建立自訂範本,以在相同頁面上顯示自訂資產類型和OOTB資產類型。 若要建立自訂範本,請遵循下列指示

  1. 建立Sling:/apps底下的資料夾。 將其命名為「 myportalcomponent 」
  2. 新增「fpContentType」屬性。 將其值設為"/libs/fd/ fp/formTemplate"。
  3. 新增「title」屬性,並將其值設為「自訂範本」。 這是您將在Search和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,並將其資料類型屬性設為「指南」。 您可以複製並貼上div,其data-type="printForm",並將新複製div的data-type設為"guide"

配置Search和Lister元件

定義自訂範本後,現在必須將此自訂範本與「搜尋及清單」元件建立關聯。 將瀏覽器指向此url

切換到「設計」模式,並將段落系統配置為在允許的元件組中包含「搜索和清單」元件。 Search和Lister元件是「文檔服務」組的一部分。

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

開啟「Search and Lister」元件的配置屬性。 確定已選取「資產資料夾」標籤。 選取您要從中列出搜尋和清單元件中資產的資料夾。 為了本文,我已選擇

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

assetfolder

頁簽到「顯示」頁簽。 在此,您將選擇要在搜尋和清單元件中顯示資產的範本。

從下拉式清單中選取「自訂範本」,如下所示。

搜索器

設定您要在入口網站中列出的資產類型。 若要在「資產清單」中設定資產的索引標籤類型,並設定資產類型。 在此範例中,我們已設定下列資產類型

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

下列螢幕擷取畫面會顯示已設定以列出的資產類型

assettypes

現在您已配置了Search和Lister Portal元件,現在可以查看該Lister的實際運作。 將瀏覽器指向此url 。 結果應與下圖類似。

注意

如果您的入口網站在發佈伺服器上列出自訂資產類型,請務必為「fd-service」使用者授予節點​**/apps/fd/fp/extensions/querybuilder**​的「讀取」權限


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

本頁內容