YouTube ChannelSchedule a CallSubscribe for Updates

Visionneuse PDF

Aperçu

Le composant Avonni PDF Viewer vous permet d’intégrer et d’afficher des documents PDF directement dans vos composants dynamiques sur les pages Lightning de Salesforce. Il offre un moyen fluide pour les utilisateurs de visualiser du contenu PDF — comme des factures, contrats, rapports ou guides — sans télécharger le fichier ni ouvrir une application séparée.

Les principales fonctionnalités incluent :

  • Intégration directe de PDF : Affiche le contenu PDF directement sur la page Lightning.

  • Options multiples de source : Charge des PDF depuis Salesforce Files (en utilisant ContentDocumentId), des URL externes ou des données encodées en base64.

  • Configuration simple : Nécessite une configuration minimale, principalement la définition de la source PDF.

Paramètre Salesforce requis pour l’affichage inline des PDF

Dans Setup de Salesforce, allez dans «File Upload and Download Security». Trouvez l’entrée pour PDF et définissez son comportement sur « Execute in Browser ». Cela permet au PDF d’être rendu à l’intérieur du composant. S’il est configuré sur « Download », Salesforce forcera le téléchargement du fichier et le visualiseur apparaîtra vide ou déclenchera un téléchargement au lieu d’afficher le document.

Comment vérifier et mettre à jour :

  1. Setup → Quick Find : « File Upload and Download Security »

  2. Ouvrez la liste, localisez « PDF »

  3. Changez le comportement en « Execute in Browser »

  4. Enregistrez

  5. Actualisez votre page Lightning et testez le visualiseur

Cas d’utilisation

  • Afficher des PDF de factures ou de devis générés sur les enregistrements Opportunity ou Order.

  • Afficher des contrats ou accords signés sur les pages Account ou Contact.

  • Intégrer des manuels produits ou fiches techniques sur les pages d’enregistrement Product.

  • Présenter des rapports générés en PDF au sein d’un composant de tableau de bord.

  • Afficher des pièces jointes téléchargées directement dans le contexte d’un composant personnalisé.

Ajout du PDF Viewer

Glisser-déposer : Depuis la Component Library (panneau gauche), trouvez le composant "PDF Viewer" et faites-le glisser sur votre canevas dans le Component Builder.

Configuration

Sélectionnez le composant PDF Viewer sur le canevas pour accéder à ses propriétés dans le panneau Propriétés.

Propriétés de base

  • Nom API : (Texte) Un identifiant unique pour cette instance de composant (par exemple, InvoiceViewer, ContractDisplay).

  • Titre : (Texte, optionnel) Un titre affiché potentiellement au-dessus ou comme partie du cadre du visualiseur (selon le style). Exemple : "Aperçu de la facture", "Document de contrat".

Source du PDF

  • Source : (Texte - Essentiel) Cette propriété critique indique l’origine du document PDF. Vous devez fournir la source dans l’un des formats suivants :

    • ContentDocumentId : Fournissez l’ID Salesforce de 15 ou 18 caractères d’un fichier (enregistrement ContentDocument) stocké dans votre organisation Salesforce. Il s’agit de la méthode la plus courante et recommandée pour afficher en toute sécurité les documents internes. Vous relierez généralement cette propriété à une Variable ou ressource contenant l’ID (par ex., {!FileIdVariable}, $Component.record.LatestInvoiceId__c).

    • URL : Fournissez une URL HTTPS directe et accessible publiquement pointant vers un fichier PDF hébergé en ligne (par ex., https://example.com/document.pdf). Assurez-vous que l’URL est correcte et que vos utilisateurs y ont accès, en tenant compte des éventuelles restrictions réseau ou problèmes CORS.

    • Base64 : Fournissez une chaîne encodée en Base64 représentant le contenu entier du fichier PDF. Cette méthode convient généralement seulement pour des petits PDF qui peuvent être générés dynamiquement ou transmis depuis un autre système. De longues chaînes Base64 peuvent impacter significativement les performances et atteindre les limites de taille de configuration du composant.

Définir la visibilité du composant

Contrôle si le composant PDF Viewer est affiché sur la page. Associez ceci à une Variable booléenne ou à une formule pour une visibilité dynamique.

Exemples

Afficher un fichier Salesforce (en utilisant ContentDocumentId)

Scénario : Afficher le PDF de la dernière facture lié à la page d’enregistrement Opportunity en cours.

Approche : Utilisez un Flow autolaunché déclenché « On Load » pour récupérer le ContentDocumentId et le transmettre au PDF Viewer.

Aperçu de la configuration

1

Créer un Flow autolaunché

Comme le composant PDF Viewer nécessite un ContentDocumentId pour afficher un fichier Salesforce, mais que vous n’avez généralement accès qu’à l’ID de l’enregistrement (par ex., l’ID d’Opportunity), vous devez trouver le fichier approprié. Un Flow autolaunché vous permet de :

  • Interroger la base de données Salesforce pour trouver les fichiers liés à l’enregistrement en cours

  • Appliquer des filtres pour localiser le PDF spécifique que vous souhaitez afficher (par ex., la dernière facture)

  • Retourner le ContentDocumentId au composant

Configuration

  • Accepte l’ID de l’enregistrement en entrée

  • Interroge les fichiers liés via ContentDocumentLink et ContentVersion objets

  • Filtre pour les fichiers PDF contenant « Invoice » dans le titre

  • Retourne le ContentDocumentId de l’enregistrement correspondant le plus récent

2

Dans votre composant dynamique

Maintenant que votre Flow est prêt à récupérer le ContentDocumentId, vous devez configurer votre composant dynamique pour exécuter ce Flow et transmettre le résultat au PDF Viewer. Cela implique de définir l’objet cible, de créer une variable pour stocker l’ID du fichier, de déclencher le Flow au chargement de la page et d’associer cette variable à la propriété Source du PDF Viewer.

Étapes :

  • Définissez le Nom de l’objet cible sur Opportunity dans les paramètres de votre composant dynamique (cela permet l’accès au contexte de l’enregistrement en cours)

  • Créez une Variable texte (par ex., invoiceFileId) pour stocker le ContentDocumentId

  • Ajoutez une action Exécuter un Flow à l’interaction On Load :

    • Sélectionnez votre Flow autolaunché

    • Mappez la variable d’entrée sur @recordId (cela transmet l’ID Opportunity courant au Flow)

    • Mappez la variable de sortie sur {!invoiceFileId} (cela stocke le ContentDocumentId retourné)

  • Configurez la propriété Source du PDF Viewer pour {!invoiceFileId}

Résultat : Lors du chargement de la page, le Flow récupère le ContentDocumentId du dernier PDF de facture et le PDF Viewer l’affiche automatiquement.

Afficher un PDF depuis une URL externe

Scénario : Intégrez une fiche technique produit PDF disponible publiquement.

  1. Ajouter le PDF Viewer : Ajoutez le composant à votre canevas.

  2. Configurer la Source :

    • Sélectionnez le PDF Viewer.

    • Dans la propriété Source propriété, saisissez directement l’URL HTTPS complète du fichier PDF (par ex., https://www.example-company.com/datasheets/product-xyz.pdf). Vous pouvez aussi lier cela à une variable Texte ou à une ressource Constant qui contient l’URL.

  3. Définir le titre (optionnel) : Définissez le Propriété Title (par ex., "Fiche technique Produit XYZ").

Considérations clés

  • Autorisations (Salesforce Files) : Si vous utilisez ContentDocumentId, assurez-vous que les utilisateurs visualisant la page disposent des autorisations Salesforce nécessaires pour accéder à cet enregistrement de fichier spécifique.

  • Accessibilité de l’URL : Si vous utilisez une URL, vérifiez que l’URL est correcte, accessible publiquement (ou accessible au sein du réseau de l’utilisateur), et prenez en compte les éventuelles restrictions Cross-Origin Resource Sharing (CORS) qui pourraient empêcher l’intégration. Utilisez HTTPS.

  • ⚠️ Paramètre de gestion des fichiers Salesforce: Dans Setup de Salesforce, accédez à « File Upload and Download Security ». Assurez-vous que le comportement pour les fichiers PDF est défini sur « Execute in Browser ». S’il est configuré sur « Download », ce composant peut ne pas afficher le PDF en ligne et peut au lieu de cela déclencher un téléchargement du fichier.

  • Performances/limites du Base64 : Évitez d’utiliser Base64 pour de gros PDF en raison des impacts sur les performances et des limites de taille potentielles. ContentDocumentId ou URL sont généralement préférés.

  • Compatibilité des navigateurs : Le rendu des PDF dépend des capacités du navigateur ou des visionneuses PDF intégrées. Assurez-vous de la compatibilité avec les navigateurs standard de vos utilisateurs

Restrictions d’affichage d’URL et solution de contournement

Lorsque vous utilisez une URL directe comme source PDF, sachez que les paramètres de sécurité Salesforce ou les politiques du navigateur peuvent parfois empêcher le PDF de s’afficher correctement dans le PDF Viewer. Dans ce cas, les utilisateurs peuvent rencontrer un cadre vide ou un message d’erreur.

Solution de contournement : intégrer via Google Docs Viewer

Pour contourner ces restrictions, vous pouvez utiliser le service Google Docs Viewer, qui permet d’afficher des fichiers PDF dans un iframe, même si l’intégration directe du fichier d’origine est bloquée.

Comment l’utiliser :

Définissez la propriété Source du PDF Viewer sur un lien Google Docs Viewer structuré comme suit (cela peut être fait en utilisant une variable texte de formule)

https://docs.google.com/gview?embedded=true&url=[votre URL PDF]

Exemple :

https://docs.google.com/gview?embedded=true&url=https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf

⚠️ Important

Pour autoriser cette solution de contournement, assurez-vous que https://docs.google.com est ajouté à votre liste de URL de confiance dans Setup de Salesforce, et que docs.google.com est autorisé pour l’utilisation dans des iframes conformément aux politiques de sécurité de votre organisation.

En résumé

Le composant Avonni PDF Viewer offre un moyen simple d’afficher des documents PDF provenant de diverses sources directement dans vos interfaces de pages Lightning personnalisées, améliorant ainsi l’accès des utilisateurs à l’information contextuelle.

Mis à jour

Ce contenu vous a-t-il été utile ?