Afficher plusieurs documents PDF dans un carrousel

Dernière mise à jour : 2024-01-29
  • Créé pour :
  • Experienced
    Developer

Un cas d’utilisation courant consiste à afficher plusieurs documents PDF à l’utilisateur ou l’utilisatrice avant de soumettre le formulaire.

Pour réaliser ce cas d’utilisation, nous avons utilisé l’API intégré Adobe PDF.

Vous pouvez voir une démonstration de cet exemple ici.

Les étapes suivantes ont été suivies pour effectuer l’intégration :

Créer un composant personnalisé pour afficher plusieurs documents PDF

Un composant personnalisé (carousel de PDF) a été créé pour parcourir les documents PDF.

Bibliothèque cliente

Une bibliothèque cliente a été créée pour afficher les PDF à l’aide de l’API d’intégration d’Adobe PDF. Les PDF à afficher sont spécifiés dans les composants de carrousel de PDF.

Créer un formulaire adaptatif

Créez un formulaire adaptatif basé sur certains onglets (cet exemple comporte 3 onglets).
Ajoutez des composants de formulaire adaptatif dans les deux premiers onglets.
Ajoutez le composant de carrousel de PDF dans le troisième onglet.
Configurez le composant de carrousel de PDF comme illustré dans la copie d’écran ci-dessous.
pdf-carousel

Clé de l’API d’intégration de PDF : il s’agit de la clé que vous pouvez utiliser pour incorporer les PDF. Cette clé ne fonctionne qu’avec localhost. Vous pouvez créer votre propre clé et l’associer à un autre domaine.

Spécifier des documents PDF : vous pouvez y spécifier les documents PDF que vous souhaitez afficher dans le carrousel.

Déployer l’exemple sur votre serveur

Pour le tester sur votre serveur local, procédez comme suit :

  1. Importez la bibliothèque cliente dans votre instance AEM locale à l’aide du gestionnaire de packages.
  2. Importez le composant de carrousel de PDF dans votre instance AEM locale à l’aide du gestionnaire de packages.
  3. Importez le formulaire adaptatif dans votre instance AEM locale à l’aide du gestionnaire de packages.
  4. Importez les exemples de PDF à afficher dans votre instance AEM locale à l’aide du lien de chargement du fichier de ressources.
  5. Prévisualiser le formulaire adaptatif
  6. Accédez à l’onglet Documents à réviser. Vous devriez voir trois documents PDF dans le composant du carrousel.

Sur cette page