Visar anpassade tillgångstyper i AEM Forms listing-custom-asset-types-in-aem-forms

Skapa anpassad mall creating-custom-template

I den här artikeln skapar vi en anpassad mall som visar de anpassade resurstyperna och OOTB-resurstyperna på samma sida. Följ nedanstående instruktioner för att skapa en anpassad mall

I följande kod visas de olika typerna av resurser som använder söknings- och listkomponenten. Vi skapar separata html-element för varje typ av resurs, vilket visas med taggen data-type = "videos". För resurstypen "videor" använder vi elementet <video> för att spela upp den infogade videon. För resurstypen "worddocuments" använder vi olika html-markeringar.

<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>

Konfigurera sök- och listkomponenten configure-search-and-lister-component

När vi har definierat den anpassade mallen måste vi nu koppla den anpassade mallen till komponenten Sök och visa. Peka webbläsaren mot den här URL:en.

Växla till designläge och konfigurera styckesystemet så att det inkluderar Search and Lister-komponenten i den tillåtna komponentgruppen. Komponenten Sök och Lister ingår i Document Services-gruppen.

Växla till redigeringsläget och lägg till komponenten Sök och Lister i ParSys.

Öppna konfigurationsegenskaperna för komponenten Sök och visa. Kontrollera att fliken "Resursmappar" är markerad. Välj de mappar från vilka du vill visa resurserna i sök- och listkomponenten. I den här artikeln har jag valt

Fliken till fliken "Visa". Här väljer du den mall som du vill visa resurserna i sök- och listkomponenten.

Välj "anpassad mall" i listrutan enligt nedan.

Konfigurera de typer av resurser som du vill visa i portalen. Om du vill konfigurera resurstypernas flik till"Resurslista" och konfigurera resurstyperna. I det här exemplet har vi konfigurerat följande typer av resurser

I följande skärmbild visas resurstyperna som är konfigurerade för listning

Nu när du har konfigurerat söknings- och listportalkomponenten är det dags att se hur listan fungerar. Peka webbläsaren mot den här URL:en. Resultatet ska se ut ungefär som bilden nedan.

Hämta och installera det här paketet med pakethanteraren. Detta innehåller exempel på mp4- och orddokument samt xdp-filer som används som resurstyper för att lista med hjälp av sök- och listkomponenten