Liste des types de ressources personnalisés en AEM Forms

Création d'un modèle personnalisé

Aux fins de cet article, nous allons créer un modèle personnalisé pour afficher les types de ressource personnalisés et les types de ressource prêtes à l'emploi sur la même page. Pour créer un modèle personnalisé, suivez les instructions ci-dessous.

  1. Créez un sling : sous /apps. Nommez-le "composant myportal".
  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 "modèle personnalisé". Nom affiché dans la liste déroulante du composant Search and Lister
  4. Créez un "template.html" sous ce dossier. Ce fichier contiendra le code à mettre en forme et affichera les différents types de fichier.

appsfolder

Le code suivant liste 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 indiqué par la balise data-type = "videos". Pour le type de fichier "vidéos", nous utilisons l’élément <video> pour lire la vidéo en ligne. Pour le type de fichier "documents Word", nous utilisons un marqueur 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>
REMARQUE

Ligne 11 - Veuillez modifier l'image src pour pointer vers une image de votre choix dans DAM.

Pour liste du Forms adaptatif dans ce modèle, créez une nouvelle balise div et définissez son attribut de type de données sur "guide". Vous pouvez copier et coller la balise div dont data-type="printForm" et définir le type de données de la balise div récemment copiée sur "guide".

Configurer le composant Search And Lister

Une fois que nous avons défini le modèle personnalisé, nous devons maintenant associer ce modèle personnalisé au composant Search and Lister. Pointez votre navigateur sur cette URL .

Passez en mode Création 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 liste les fichiers dans le composant de recherche et de liste. Aux fins du présent article, j'ai choisi

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

assetfolder

Appuyez sur l’onglet "Affichage". Ici, vous choisissez le modèle pour lequel afficher les ressources dans le composant de recherche et de liste.

Sélectionnez "modèle personnalisé" dans la liste déroulante, comme illustré ci-dessous.

searchandlister

Configurez les types de ressources que vous souhaitez liste dans Portal. Pour configurer les types de l’onglet des ressources sur "Liste des ressources" et les types de ressources. Dans cet exemple, nous avons configuré les types de ressources suivants

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

La capture d’écran suivante montre les types de fichier configurés pour la mise en vente

assettypes

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

REMARQUE

Si votre portail répertorie les types de ressource personnalisés sur un serveur de publication, veillez à accorder l’autorisation "lecture" à l’utilisateur "fd-service" au noeud /apps/fd/fp/extensions/querybuilder.


ressourcesVeuillez télécharger et installer ce package à l'aide du gestionnaire de packages. Il contient des exemples de documents mp4, de mots et de fichiers xdp qui seront utilisés comme types de ressource pour la liste à l’aide du composant search and lister.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free