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 die OOTB-Asset-Typen auf derselben Seite anzuzeigen. Um eine benutzerdefinierte Vorlage zu erstellen, befolgen Sie die folgenden Anweisungen

  1. Erstellen Sie ein 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. hinzufügen Sie eine Eigenschaft "title"und legen Sie als Wert "custom template"fest. Dieser Name wird in der Dropdown-Liste der Komponente "Search & Lister"angezeigt.
  4. Erstellen Sie unter diesem Ordner "template.html". Diese Datei enthält den Code zum Formatieren und Anzeigen der verschiedenen Asset-Typen.

appsfolder

Im folgenden Code werden die verschiedenen Asset-Typen mithilfe der Such- und Lister-Komponente Liste. Für jeden Asset-Typ erstellen wir separate HTML-Elemente, wie vom Tag "data-type = "videos" dargestellt. Für den Asset-Typ "Videos"verwenden wir das <video>-Element, um das Video inline abzuspielen. Für den Asset-Typ "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$%7Bpath%7D?lang=de" target="_blank">
           <img src ="/content/dam/worddocuments/worddocument.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png?lang=de"/>
          </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=de" 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=de"></a><p>

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

Zeile 11 - Bitte ändern Sie die Bild src, um auf ein Bild Ihrer Wahl in DAM zu zeigen.

Um das adaptive Forms in dieser Vorlage Liste, erstellen Sie ein neues div und legen Sie das data-type-Attribut auf "guide"fest. Sie können den div kopieren und einfügen, dessen data-type="printForm" lautet, und den Datentyp des neu kopierten div auf "guide" setzen

Konfigurieren der Komponente "Search & Lister"

Sobald wir die benutzerdefinierte Vorlage definiert haben, müssen wir diese benutzerdefinierte Vorlage mit der Komponente "Search and Lister"verknüpfen. Stellen Sie den Browser auf diese URL .

Wechseln Sie in den Designmodus und konfigurieren Sie das Absatzsystem, um die Komponente "Search & Lister"in die Gruppe der zulässigen Komponenten aufzunehmen. Die Komponente "Search & Lister"ist Teil der Dokument Services-Gruppe.

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

Öffnen Sie die Konfigurationseigenschaften der Komponente "Search and Lister". Vergewissern Sie sich, dass die Registerkarte "Asset-Ordner"ausgewählt ist. Wählen Sie die Ordner aus, aus denen die Assets in der Such- und Lister-Komponente Liste werden sollen. 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, in der die Assets in der Such- und Listenkomponente angezeigt werden sollen.

Wählen Sie "benutzerdefinierte Vorlage"aus der Dropdown-Liste aus.

searandlister

Konfigurieren Sie die Asset-Typen, die im Portal Liste werden sollen. So konfigurieren Sie die Registerkarten der Asset-Liste und konfigurieren die Asset-Typen. In diesem Beispiel haben wir die folgenden Assettypen konfiguriert

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

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

Assettypen

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

HINWEIS

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

Assettypen
Bitte laden Sie dieses Paket mit Package Manager herunter und installieren Sie es. Dies enthält Beispiel-MP4- und Word-Dokumente und XDP-Dateien, die als Asset-Typen zur Liste mit der Such- und Listster-Komponente verwendet werden.

Auf dieser Seite