Pour les besoins de cet article, nous allons créer un modèle personnalisé pour 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 :
Le code suivant répertorie les différents types de ressources à l’aide du composant de recherche et de liste. 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 "vidéos", nous utilisons la variable <video> pour lire la vidéo intégrée. Pour le type de ressource "documents de mots", 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>
Ligne 11 - Modifiez l’image src pour qu’elle pointe vers une image de votre choix dans la gestion des ressources numériques.
Pour répertorier le Forms adaptatif dans ce modèle, créez une balise div et définissez son attribut data-type 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 nouvellement copiée sur "guide".
Une fois le modèle personnalisé défini, nous devons l’associer au composant "Search and Lister". Pointez votre navigateur à cette URL .
Passez en mode 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 répertorier les ressources dans le composant de recherche et de liste. Pour les besoins du présent article, j’ai sélectionné
Appuyez sur l’onglet "Affichage". Vous choisirez ici le modèle dont vous souhaitez afficher les ressources dans le composant Recherche et énumérateur.
Sélectionnez "modèle personnalisé" dans la liste déroulante, comme illustré ci-dessous.
Configurez les types de ressources que vous souhaitez répertorier dans le portail. Pour configurer les types de l’onglet de la ressource sur la "Liste des ressources" et les types de ressources, procédez comme suit : Dans cet exemple, nous avons configuré les types de ressources suivants :
La capture d’écran suivante montre les types de ressources configurés pour être répertoriés
Maintenant que vous avez configuré votre composant Search and Lister Portal, il est temps de voir la liste en action. Pointez votre navigateur à cette URL . Les résultats doivent ressembler à l’image illustrée ci-dessous.
Si votre portail répertorie les types de ressources personnalisés sur un serveur de publication, veillez à accorder l’autorisation "lecture" à l’utilisateur "fd-service" sur le noeud . /apps/fd/fp/extensions/querybuilder
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.