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

建立自訂範本

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

  1. 建立吊索:資料夾。 將其命名為" myportalcomponent "
  2. 新增"fpContentType"屬性。 將其值設定為"/libs/fd/fp/formTemplate"。
  3. 新增「title」屬性,並將其值設為「自訂範本」。 這是您在Search and Lister元件下拉式清單中看到的名稱
  4. 在此資料夾下建立「template.html」。 此檔案會保留程式碼以設定樣式並顯示各種資產類型。

appsfolder

下列程式碼會列出使用搜尋和lister元件的各種資產類型。 我們會針對每種資產類型建立個別的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$%7Bpath%7D?lang=zh-Hant" target="_blank">
           <img src ="/content/dam/worddocuments/worddocument.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png?lang=zh-Hant"/>
          </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$%7Bpath%7D?lang=zh-Hant" 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?lang=zh-Hant"></a><p>

     </div>
  <div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "printForm">
       <a href="/assetdetails.html$%7Bpath%7D?lang=zh-Hant" 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?lang=zh-Hant"></a><p>
     </div>
   </div>
</div>
注意

第11行——請將影像src變更為指向您在DAM中選擇的影像。

若要在此範本中列出最適化Forms,請建立新div,並將其資料類型屬性設為"guide"。 您可以複製並貼上div的data-type="printForm,並將新複製的div的data-type設為"guide"

配置搜索和Lister元件

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

切換到「設計」模式,並將段落系統配置為在允許的元件組中包含Search And Lister元件。 Search and Lister元件是Document Services組的一部分。

切換至編輯模式,並將Search and Lister元件新增至ParSys。

開啟「搜索和Lister」元件的配置屬性。 請確定已選取「資產資料夾」標籤。 選擇要從中列出搜索和線索元件中資產的資料夾。 為本文之目的,我已選取

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

assetfolder

Tab to the "Display" tab. 在此,您將選擇要在搜尋和清單元件中顯示資產的範本。

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

搜索器

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

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

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

assettypes

現在您已設定好搜尋和Lister入口元件,是時候讓Lister開始運作了。 將瀏覽器指向此url 。 結果應該類似於下圖。

注意

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

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

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now