Exibir vários documentos em pdf em um carrossel

Um caso de uso comum é exibir vários documentos do PDF para o preenchimento do formulário para revisão antes de enviar o formulário.

Para concluir este caso de uso, utilizamos a API de Incorporação do Adobe PDF.

Uma demonstração ao vivo desta amostra pode ser vista aqui.

As etapas a seguir foram executadas para concluir a integração

Criar um componente personalizado para exibir vários documentos do PDF

Um componente personalizado (pdf-carousel) foi criado para navegar pelos documentos pdf

Biblioteca do cliente

Uma biblioteca do cliente foi criada para exibir os PDFs usando a API incorporada do Adobe PDF. Os PDFs a serem exibidos são especificados nos componentes do carrossel pdf.

Criar formulário adaptável

Crie um formulário adaptável com base em algumas guias (este exemplo tem 3 guias)
Adicione alguns componentes de formulário adaptáveis nas duas primeiras guias
Adicione o componente Carrossel pdf na terceira guia
Configure o componente pdf-carousel conforme mostrado na captura de tela abaixo
pdf-carousel

Incorporar Chave de API do PDF - Esta é a chave que você pode usar para incorporar o pdf. Essa chave só funcionará com localhost. Você pode criar sua própria chave e associá-la a outro domínio.

Especificar documentos do PDF - Aqui você pode especificar os documentos pdf que deseja exibir no carrossel.

Implantar a amostra no servidor

Para testar isso no servidor local, siga as etapas:

  1. Importe a biblioteca do cliente para sua instância do AEM local usando o gerenciador de pacotes
  2. Importe o componente carrossel pdf para a instância do AEM local usando o gerenciador de pacotes
  3. Importe o Formulário Adaptável para sua instância do AEM local usando o gerenciador de pacotes
  4. Importe os pdf de exemplo para exibição na instância do AEM local usando o link de carregamento de arquivo de ativos
  5. Visualizar formulário adaptável
  6. Guia para a guia Documents to Review. Você deve ver três documentos do PDF no componente Carrossel.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e