Affichage de plusieurs documents PDF dans un carrousel

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

Pour réaliser ce cas d’utilisation, nous avons utilisé la variable API Adobe PDF Incorporer.

Une démonstration en direct de cet exemple peut être réalisée ici.

Les étapes suivantes ont été effectuées pour terminer l’intégration :

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

Un composant personnalisé (pdf-carousel) 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 incorporée Adobe PDF. Les PDF à afficher sont spécifiés dans les composants pdf-carrousel.

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 pdf dans le troisième onglet Configurez le composant pdf-carrousel comme illustré dans la capture d’écran ci-dessous.
pdf-carousel

Incorporer la clé API du PDF - Il s’agit de la clé que vous pouvez utiliser pour incorporer le pdf. Cette clé ne fonctionne qu’avec localhost. Vous pouvez créer des votre propre clé et l’associer à un autre domaine.

Spécification de 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. Importation de la bibliothèque cliente dans votre instance d’AEM locale utilisation du gestionnaire de packages
  2. Importation du composant de carrousel pdf dans votre instance d’AEM locale utilisation du gestionnaire de packages
  3. Importation du formulaire adaptatif dans votre instance d’AEM locale utilisation du gestionnaire de packages
  4. Importez les exemples de pdf à afficher. dans votre instance d’AEM locale à l’aide du lien de chargement de fichier de ressources
  5. Aperçu du formulaire adaptatif
  6. Accédez à l’onglet Documents à réviser . Vous devriez voir trois documents PDF dans le composant du carrousel.

Sur cette page