Auflisten benutzerdefinierter Asset-Typen in AEM Forms

Benutzerdefinierte Vorlage erstellen

Für die Zwecke dieses Artikels erstellen wir eine benutzerdefinierte Vorlage, um die benutzerdefinierten Asset-Typen und OOTB-Asset-Typen auf derselben Seite anzuzeigen. Um eine benutzerdefinierte Vorlage zu erstellen, befolgen Sie die folgenden Anweisungen

1. Erstellen eines Sling: Ordner unter /apps. Benennen Sie es "myportalcomponent "
2. Fügen Sie eine fpContentType-Eigenschaft hinzu. Setzen Sie den Wert auf "/libs/fd/fp/formTemplate".
3. Fügen Sie die Eigenschaft "title"hinzu und legen Sie ihren Wert auf "custom template"fest. Dies ist der Name, den Sie in der Dropdown-Liste der Komponente "Search & Lister"sehen
4. Erstellen Sie unter diesem Ordner eine "template.html". Diese Datei enthält den Code zum Formatieren und Anzeigen der verschiedenen Asset-Typen.

Der folgende Code listet die verschiedenen Asset-Typen auf, die die Such- und Lister-Komponente verwenden. Wir erstellen separate HTML-Elemente für jeden Asset-Typ, wie durch das Tag "data-type = "videos" gezeigt. Für den Asset-Typ "Videos"verwenden wir den <video> -Element, um das Video inline wiederzugeben. Für den Asset-Typ von "worddocuments"verwenden wir unterschiedliche HTML-Markierungen.

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

Konfigurieren der Komponente "Search & Lister"

Nachdem wir die benutzerdefinierte Vorlage definiert haben, müssen wir diese benutzerdefinierte Vorlage nun mit der Komponente "Search & Lister"verknüpfen. Point auf den Browser zu dieser URL .

Wechseln Sie in den Designmodus und konfigurieren Sie das Absatzsystem so, dass die Komponente "Search And Lister"in die Gruppe der zulässigen Komponenten aufgenommen wird. Die Komponente "Search & Lister"ist Teil der Gruppe "Document Services".

Wechseln Sie in den Bearbeitungsmodus und fügen Sie die Komponente "Search and Lister"zu ParSys hinzu.

Öffnen Sie die Konfigurationseigenschaften der Komponente "Search and Lister". Stellen Sie sicher, dass die Registerkarte "Asset-Ordner"ausgewählt ist. Wählen Sie die Ordner aus, aus denen Sie die Assets in der Such- und Lister-Komponente auflisten möchten. Für die Zwecke dieses Artikels habe ich

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

Registerkarte zur Registerkarte "Anzeige". Hier wählen Sie die Vorlage aus, die die Assets in der Such- und Lister-Komponente anzeigen soll.

Wählen Sie "benutzerdefinierte Vorlage"aus der Dropdown-Liste aus, wie unten dargestellt.

Konfigurieren Sie die Asset-Typen, die Sie im Portal auflisten möchten. So konfigurieren Sie die Asset-Typen auf der Registerkarte "Asset-Auflistung"und konfigurieren die Asset-Typen. In diesem Beispiel haben wir die folgenden Asset-Typen konfiguriert

1. MP4-Dateien
2. Word-Dokumente
3. Document(Dies ist der OOTB-Asset-Typ.)
4. Formularvorlage(Dies ist der OOTB-Asset-Typ)

Der folgende Screenshot zeigt die Asset-Typen, die für die Auflistung konfiguriert sind

Nachdem Sie die Komponente "Search & Lister Portal"konfiguriert haben, ist es an der Zeit, den Listener in Aktion zu sehen. Point auf den Browser zu dieser URL . Die Ergebnisse sollten ungefähr dem unten gezeigten Bild entsprechen.

Bitte laden Sie dieses Paket mit Package Manager herunter und installieren Sie es. Dies enthält Beispiel-MP4- und Word-Dokumente sowie XDP-Dateien, die als Asset-Typen verwendet werden, um mithilfe der Such- und Lister-Komponente aufzulisten.

Ressourcen für Business.Adobe.com

Multichannel Communication Automated Onboarding Auto Form Fill Targeted Content Content Intelligence Document Generation