Auflisten benutzerdefinierter Asset-Typen in AEM Forms

Erstellen einer benutzerdefinierten Vorlage

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.

appsfolder

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 das Element <video>, 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>
HINWEIS

Zeile 11 - Ändern Sie die Bild-src so, dass sie auf ein Bild Ihrer Wahl in DAM verweist.

Um Adaptive Forms in dieser Vorlage aufzulisten, erstellen Sie ein neues div und setzen Sie sein Datentypattribut auf "guide". Sie können das div kopieren und einfügen, dessen data-type="printForm"ist, und den Datentyp des neu kopierten div auf "guide"setzen

Konfigurieren der Such- und Listener-Komponente

Nachdem wir die benutzerdefinierte Vorlage definiert haben, müssen wir diese benutzerdefinierte Vorlage nun mit der Komponente "Search & Lister"verknüpfen. Zeigen Sie Ihren Browser auf diese 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

assetfolder

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.

searchandlister

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

assettypes

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

HINWEIS

Wenn Ihr Portal benutzerdefinierte Asset-Typen auf einem Veröffentlichungsserver auflistet, stellen Sie sicher, dass Sie dem Benutzer "fd-service"die "Leseberechtigung"für den Knoten /apps/fd/fp/extensions/querybuilder erteilen.


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

Auf dieser Seite