Display multiple pdf documents in a carousel

A common use case is to display multiple PDF documents to the form filler to review before submitting the form.

To accomplish this use case we have utilized the Adobe PDF Embed API.

A live demo of this sample can be experienced here.

The following steps were performed to complete the integration

Create a custom component to display multiple PDF documents

A custom component (pdf-carousel) was created to cycle through pdf documents

Client library

A client library was created to display the PDFs using the Adobe PDF Embed API. The PDFs to display are specified in the pdf-carousel components.

Create Adaptive Form

Create an adaptive form based with some tabs (This sample has 3 tabs)
Add some adaptive form components in the first two tabs
Add the pdf carousel component in the third tab
Configure the pdf-carousel component as shown in the screenshot below
pdf-carousel

Embed PDF API Key - This is the key that you can use to embed the pdf. This key will only work with localhost. You can create your own key and associate it with other domain.

Specify PDF Documents - Here you can specify the pdf documents that you want to be displayed in the carousel.

Deploy the sample on your server

To test this on your local server, follow the steps:

  1. Import the client library into your local AEM instance using the package manager
  2. Import the pdf carousel component into your local AEM instance using the package manager
  3. Import the Adaptive Forminto your local AEM instance using the package manager
  4. Import the sample pdf’s to display into your local AEM instance using the assets file upload link
  5. Preview Adaptive Form
  6. Tab to the Documents to Review tab. You should see three PDF documents in the carousel component.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e