Elenco dei tipi di risorse personalizzate in AEM Forms

Creazione di un modello personalizzato

Ai fini di questo articolo, creeremo un modello personalizzato per visualizzare i tipi di risorse personalizzate e i tipi di risorse OOTB sulla stessa pagina. Per creare un modello personalizzato segui le seguenti istruzioni

  1. Crea un sling: sotto /apps. Denomina " myportalcomponent "
  2. Aggiungi una proprietà "fpContentType". Imposta il suo valore su "/libs/fd/ fp/formTemplate".
  3. Aggiungi una proprietà "title" e imposta il suo valore su "modello personalizzato". Nome visualizzato nell’elenco a discesa del componente Ricerca e filtro
  4. Crea un "template.html" sotto questa cartella. Questo file contiene il codice per personalizzare lo stile e visualizzare i vari tipi di risorse.

appsfolder

Il codice seguente elenca i vari tipi di risorse che utilizzano il componente Ricerca e Lister. Creiamo elementi html separati per ogni tipo di risorsa, come mostrato dal tag data-type = "videos" . Per il tipo di risorsa "video" utilizziamo l’elemento <video> per riprodurre il video in linea. Per il tipo di risorsa "documenti di parole" utilizziamo contrassegni HTML diversi.

<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=it" target="_blank">
           <img src ="/content/dam/worddocuments/worddocument.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png?lang=it"/>
          </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=it" 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=it"></a><p>

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

Linea 11 - Cambiare l'immagine src per puntare a un'immagine scelta in DAM.

Per elencare i moduli adattivi in questo modello, crea un nuovo div e imposta il relativo attributo del tipo di dati su "guide". È possibile copiare e incollare il div di cui data-type="printForm e impostare il tipo di dati del div appena copiato su "guide"

Configura componente Ricerca e filtro

Una volta definito il modello personalizzato, dobbiamo ora associare questo modello personalizzato al componente "Ricerca e filtro". Puntare il browser a questo URL .

Passa alla modalità Progettazione e configura il sistema paragrafo in modo da includere il componente Ricerca e tiene traccia nel gruppo di componenti consentiti. Il componente Ricerca e Registrazione fa parte del gruppo Document Services .

Passa alla modalità di modifica e aggiungi il componente Ricerca e filtro a ParSys.

Apri le proprietà di configurazione del componente "Search and Lister". Assicurati che la scheda "Cartelle risorse" sia selezionata. Seleziona le cartelle da cui vuoi elencare le risorse nel componente Ricerca e ascoltatore . Ai fini del presente articolo, ho selezionato

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

assetfolder

Passa alla scheda "Visualizzazione". Qui puoi scegliere il modello per visualizzare le risorse nel componente Ricerca e Ascolto .

Seleziona "modello personalizzato" dal menu a discesa, come mostrato di seguito.

ricercatrice

Configura i tipi di risorse da elencare nel portale. Per configurare i tipi di scheda della risorsa in "Elenco risorse" e i tipi di risorse, effettua le seguenti operazioni: In questo esempio è possibile configurare i seguenti tipi di risorse

  1. File MP4
  2. Documenti Word
  3. Document(Questo è il tipo di risorsa OOTB)
  4. Modello di modulo (tipo di risorsa OOTB)

La schermata seguente mostra i tipi di risorse configurati per l’elenco

assettypes

Ora che hai configurato il componente Search and Lister Portal, è il momento di vedere il listener in azione. Puntare il browser a questo URL . I risultati dovrebbero essere simili all'immagine mostrata di seguito.

NOTA

Se il portale sta elencando tipi di risorse personalizzate su un server di pubblicazione, assicurati di concedere l'autorizzazione "read" all'utente "fd-service" sul nodo /apps/fd/fp/extensions/querybuilder


assettypesScarica e installa questo pacchetto utilizzando il gestore dei pacchetti. Questo contiene documenti mp4 e Word di esempio e file xdp che verranno utilizzati come tipi di risorse da elencare utilizzando il componente di ricerca e ascolto

In questa pagina

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
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now