Documentatie AEM Tutorials voor AEM Tutorials voor AEM Forms

Aangepaste assettypen aanbieden in AEM Forms listing-custom-asset-types-in-aem-forms

Last update: Fri Jan 26 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
Adaptive Forms

Gemaakt voor:

Experienced
Developer

Aangepaste sjablonen maken creating-custom-template

In het kader van dit artikel maken we een aangepaste sjabloon om de typen aangepaste elementen en de typen OOTB-elementen op dezelfde pagina weer te geven. Volg de onderstaande instructies om een aangepaste sjabloon te maken

Een deelmap maken: onder /apps. Geef het veld de naam " myportalcomponent "
Voeg een eigenschap "fpContentType" toe. Stel de waarde in op "/libs/fd/ fp/formTemplate".
Voeg een eigenschap "title" toe en stel de waarde ervan in op "custom template". Dit is de naam die u zult zien in de vervolgkeuzelijst van de component Search and Lister
Maak een ''template.html'' in deze map. Dit bestand bevat de code voor het opmaken en weergeven van de verschillende elementtypen.

appsfolder

De volgende code geeft een overzicht van de verschillende typen elementen die de zoek- en bibliotheekcomponent gebruiken. Er worden afzonderlijke html-elementen gemaakt voor elk type element, zoals wordt weergegeven door het gegevenstype = "video"-tag. Voor het elementtype "video's" gebruiken we de optie <video> -element om de video inline af te spelen. Voor het elementtype "worddocuments" gebruiken we een andere HTML-markering.

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

NOTE

Regel 11 - Wijzig de afbeeldingsbron zodat deze verwijst naar een afbeelding van uw keuze in DAM.

Als u Adaptief Forms in deze sjabloon wilt weergeven, maakt u een nieuw div-element en stelt u het kenmerk voor het gegevenstype in op "hulplijn". U kunt de div kopiëren en plakken waarvan gegevenstype="printForm en het onlangs gekopieerde div-gegevenstype instellen op "hulplijn"

De component Search en Lister configureren configure-search-and-lister-component

Zodra wij het douanemalplaatje hebben bepaald, moeten wij dit douanemalplaatje met de component "van het Onderzoek en van de Registratie"associëren. Wijs uw browser aan naar deze URL.

Schakel over naar de ontwerpmodus en configureer het alineasysteem om de component Zoeken en registreren op te nemen in de toegestane componentengroep. De component Search en Lister maakt deel uit van de groep Document Services.

Schakel over naar bewerkingsmodus en voeg de component Zoeken en Registreren toe aan de ParSys.

Open de configuratie-eigenschappen van de component "Search and Lister". Controleer of het tabblad "Mappen van middelen" is geselecteerd. Selecteer de mappen waaruit u de elementen in de zoek- en bibliotheekcomponent wilt weergeven. Voor de toepassing van dit artikel heb ik

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

assetmap

Tab naar het tabblad Weergave. Hier kiest u de sjabloon die u wilt weergeven in de zoekopdracht en de bibliotheekcomponent.

Selecteer 'aangepaste sjabloon' in de vervolgkeuzelijst, zoals hieronder wordt weergegeven.

zoekmachine

Vorm de types van activa die u in het portaal wilt een lijst maken. De typen elementen op het tabblad "Lijst met elementen" configureren en de typen elementen configureren. In dit voorbeeld zijn de volgende typen elementen geconfigureerd

MP4-bestanden
Word-documenten
Document(Dit is een OOTB-type element)
Formuliersjabloon (dit is een ander type OOTB-element)

Het volgende het schermschot toont u de activa die voor lijst worden gevormd

assettypen

Nu u uw Onderzoek en de Kleine Component van het Portaal hebt gevormd, is het tijd om de lijst in actie te zien. Wijs uw browser aan naar deze URL. De resultaten moeten ongeveer overeenkomen met de onderstaande afbeelding.

NOTE

Als in uw portal aangepaste elementtypen worden vermeld op een publicatieserver, moet u de gebruiker "read" toestemming geven voor het verzenden van het knooppunt /apps/fd/fp/extensions/querybuilder

assettypen
Download en installeer dit pakket met pakketbeheer. Dit bevat voorbeeld-mp4- en tekstdocumenten en xdp-bestanden die worden gebruikt als elementtypen om te worden weergegeven met de component search en lister

recommendation-more-help

8de24117-1378-413c-a581-01e660b7163e