Visualizzare più documenti PDF in un carosello

Un caso d’uso comune prevede la visualizzazione di più documenti PDF alla casella di compilazione del modulo, da esaminare prima dell’invio del modulo.

Per eseguire questo caso d'uso è stata utilizzata l'API di incorporamento Adobe PDF.

Qui è possibile trovare una demo live di questo esempio.

Per completare l’integrazione sono stati eseguiti i seguenti passaggi

Creare un componente personalizzato per visualizzare più documenti PDF

È stato creato un componente personalizzato (pdf-carosello) per scorrere i documenti pdf

Libreria client

È stata creata una libreria client per visualizzare i PDF mediante l’API di incorporamento di Adobe PDF. I PDF da visualizzare sono specificati nei componenti pdf-carosello.

Creare un modulo adattivo

Crea un modulo adattivo basato su alcune schede (in questo esempio sono presenti 3 schede)
Aggiungi alcuni componenti per moduli adattivi nelle prime due schede
Aggiungi il componente Carosello pdf nella terza scheda
Configura il componente pdf-carosello come illustrato nella schermata seguente
carosello-pdf

Incorpora chiave API PDF: è la chiave che puoi utilizzare per incorporare il PDF. Questa chiave funziona solo con localhost. Puoi creare la tua chiave e associarla ad un altro dominio.

Specifica documenti PDF - Qui puoi specificare i documenti PDF da visualizzare nel carosello.

Distribuire l’esempio sul server

Per eseguire il test sul server locale, eseguire la procedura seguente:

  1. Importa la libreria client nell'istanza AEM locale tramite Gestione pacchetti
  2. Importa il componente carosello pdf nell'istanza AEM locale utilizzando Gestione pacchetti
  3. Importa il modulo adattivo nell'istanza AEM locale tramite Gestione pacchetti
  4. Importa i pdf di esempio da visualizzare nell'istanza AEM locale utilizzando il collegamento per il caricamento dei file delle risorse
  5. Anteprima modulo adattivo
  6. Passare alla scheda Documenti da rivedere. Dovresti visualizzare tre documenti PDF nel componente Carosello.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e