Visualizzare più documenti pdf in un carosello

Un caso d’uso comune consiste nella visualizzazione di più documenti PDF al compilatore da esaminare prima di inviare il modulo.

Per eseguire questo caso d’uso abbiamo utilizzato il API di incorporamento Adobe PDF.

Una demo dal vivo di questo campione può essere sperimentata qui.

Sono stati eseguiti i seguenti passaggi per completare l’integrazione

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 utilizzando 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 (Questo esempio ha 3 schede) Aggiungi alcuni componenti modulo adattivo nelle prime due schede Aggiungi il componente carosello pdf nella terza scheda Configura il componente pdf-carosello come mostrato nella schermata sottostante
pdf-carosello

Incorpora la chiave API di PDF - Questa è la chiave che è possibile utilizzare per incorporare il pdf. Questa chiave funziona solo con localhost. Puoi creare la tua chiave e associarlo ad un altro dominio.

Specificare i documenti PDF - Qui è possibile specificare i documenti pdf che si desidera visualizzare nel carosello.

Distribuire l'esempio sul server

Per eseguire il test sul server locale, segui i passaggi seguenti:

  1. Importare la libreria client nell'istanza AEM locale utilizzo del gestore dei pacchetti
  2. Importare il componente carosello pdf nell'istanza AEM locale utilizzo del gestore dei pacchetti
  3. Importare il modulo adattivo nell'istanza AEM locale utilizzo del gestore dei pacchetti
  4. Importare i pdf di esempio da visualizzare nell'istanza AEM locale utilizzo del collegamento di caricamento del file di risorse
  5. Anteprima modulo adattivo
  6. Passare alla scheda Documenti da esaminare. Dovresti visualizzare tre documenti PDF nel componente carosello .

In questa pagina