Exibir vários documentos em pdf em um carrossel

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

Para realizar esse caso de uso, utilizamos o API incorporada do Adobe PDF.

Uma demonstração ao vivo dessa 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 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 PDF usando a API incorporada do Adobe PDF. Os PDF 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ável nas duas primeiras guias Adicione o componente Carrossel pdf na terceira guia Configure o componente Carrossel pdf como mostrado na captura de tela abaixo
pdf-carousel

Incorporar chave de API do PDF - Essa é 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á-lo a outro domínio.

Especificar Documentos PDF - Aqui, é possível especificar os documentos pdf que você deseja exibir no carrossel.

Implantar a amostra no servidor

Para testar isso no servidor local, siga as etapas:

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