Lister les types de ressources personnalisés dans AEM Forms

Créer un modèle personnalisé

Pour les besoins de cet article, nous allons créer un modèle personnalisé permettant d’afficher les types de ressources personnalisés et les types de ressources prêts à l’emploi sur la même page. Pour créer un modèle personnalisé, suivez les instructions suivantes :

1. Créez un dossier sling: sous /apps. Nommez-le « myportalcomponent ».
2. Ajoutez une propriété « fpContentType ». Définissez sa valeur sur « /libs/fd/ fp/formTemplate ».
3. Ajoutez une propriété « title » et définissez sa valeur sur « custom template ». Il s’agit du nom qui s’affichera dans la liste déroulante du composant Search and Lister.
4. Créez un fichier « template.html » sous ce dossier. Ce fichier contiendra le code à mettre en forme et affichera les différents types de ressources.

Le code suivant répertorie les différents types de ressources à l’aide du composant Search and Lister. Nous créons des éléments HTML distincts pour chaque type de ressource, comme illustré par la balise data-type = "videos". Pour le type de ressource « videos », nous utilisons l’élément <video> pour lire la vidéo intégrée. Pour le type de ressource « worddocuments », nous utilisons un marquage HTML différent.

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

Configurer le composant Search and Lister

Une fois le modèle personnalisé défini, nous devons l’associer au composant « Search and Lister ». Pointez votre navigateur sur cette URL.

Passez en mode de conception et configurez le système de paragraphes pour inclure le composant Search and Lister dans le groupe de composants autorisés. Le composant Search and Lister fait partie du groupe Document Services.

Passez en mode d’édition et ajoutez le composant Search and Lister à ParSys.

Ouvrez les propriétés de configuration du composant « Search and Lister ». Assurez-vous que l’onglet « Dossiers de ressources » est sélectionné. Sélectionnez les dossiers à partir desquels vous souhaitez lister les ressources dans le composant Search and Lister. Pour les besoins de cet article, j’ai sélectionné :

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

Appuyez sur l’onglet « Affichage ». Choisissez ici le modèle dont vous souhaitez afficher les ressources dans le composant Search and Lister.

Sélectionnez « custom template » dans la liste déroulante, comme illustré ci-dessous.

Configurez les types de ressources que vous souhaitez lister dans le portail. Pour configurer les types de ressources, accédez à l’onglet « Liste des ressources » et configurez les types de ressources. Dans cet exemple, nous avons configuré les types de ressources suivants :

1. Fichiers MP4
2. Documents Word
3. Document (type de ressource prêt à l’emploi)
4. Modèle de formulaire (type de ressource prêt à l’emploi)

La copie d’écran suivante montre les types de ressources configurés pour être listés.

Maintenant que vous avez configuré votre composant de portail Search and Lister, il est temps de voir la liste en action. Pointez votre navigateur sur cette URL. Les résultats doivent ressembler à l’image affichée ci-dessous.

Téléchargez et installez ce package à l’aide du gestionnaire de packages. Il contient des exemples de documents MP4 et Word et de fichiers XDP utilisés comme types de ressources à répertorier à l’aide du composant Search and Lister.