YouTube ChannelSchedule a CallSubscribe for Updates

PDF-Viewer

Übersicht

Die Avonni PDF Viewer-Komponente ermöglicht es Ihnen, PDF-Dokumente direkt innerhalb Ihrer Dynamic Components auf Salesforce Lightning-Seiten einzubetten und anzuzeigen. Dies bietet eine nahtlose Möglichkeit für Benutzer, PDF-Inhalte wie Rechnungen, Verträge, Berichte oder Anleitungen anzusehen, ohne die Datei herunterladen oder eine separate Anwendung öffnen zu müssen.

Hauptmerkmale umfassen:

  • Direktes Einbetten von PDFs: Zeigt PDF-Inhalte direkt auf der Lightning-Seite an.

  • Mehrere Quellenoptionen: Laden Sie PDFs aus Salesforce Files (unter Verwendung der ContentDocumentId), externen URLs oder Base64-codierten Daten.

  • Einfache Konfiguration: Erfordert nur minimale Einrichtung, hauptsächlich die Definition der PDF-Quelle.

Anwendungsfälle

  • Anzeigen von generierten Rechnungs- oder Angebots-PDFs in Opportunity- oder Bestell-Datensätzen.

  • Anzeigen unterschriebener Verträge oder Vereinbarungen auf Account- oder Kontaktseiten.

  • Einbetten von Produktanleitungen oder Datenblättern auf Produkt-Datensatzseiten.

  • Präsentation von als PDF generierten Berichten innerhalb einer Dashboard-Komponente.

  • Anzeigen hochgeladener Anhänge direkt im Kontext einer benutzerdefinierten Komponente.

Hinzufügen des PDF Viewers

Per Drag & Drop: Suchen Sie in der Component Library (linkes Panel) die Komponente "PDF Viewer" und ziehen Sie sie im Component Builder auf Ihre Arbeitsfläche.

Konfiguration

Wählen Sie die PDF Viewer-Komponente auf der Arbeitsfläche aus, um auf ihre Eigenschaften im Properties Panel zuzugreifen.

Grundlegende Eigenschaften

  • API-Name: (Text) Eine eindeutige Kennung für diese Komponenteninstanz (z. B., InvoiceViewer, ContractDisplay).

  • Titel: (Text, optional) Ein Titel, der möglicherweise oberhalb oder als Teil des Viewer-Rahmens angezeigt wird (abhängig vom Styling). Beispiel: "Rechnungs-Vorschau", "Vertragsdokument".

PDF-Quelle

  • Quelle: (Text - Wesentlich) Diese wichtige Eigenschaft gibt die Herkunft des PDF-Dokuments an. Sie müssen die Quelle in einem der folgenden Formate angeben:

    • ContentDocumentId: Geben Sie die 15- oder 18-stellige Salesforce-ID einer Datei (ContentDocument-Datensatz) an, die in Ihrer Salesforce-Organisation gespeichert ist. Dies ist die häufigste und empfohlene Methode zum sicheren Anzeigen interner Dokumente. In der Regel binden Sie diese Eigenschaft an eine Variable oder Ressource, die die ID enthält (z. B. {!FileIdVariable}, $Component.record.LatestInvoiceId__c).

    • Verwenden Sie dies, um eine Website zu navigieren, indem Sie eine feste URL angeben oder dynamisch ein Feld referenzieren, das eine URL enthält. Geben Sie eine direkte, öffentlich zugängliche HTTPS-URL an, die auf eine online gehostete PDF-Datei zeigt (z. B. https://example.com/document.pdf). Stellen Sie sicher, dass die URL korrekt ist und Ihre Benutzer Zugriff darauf haben, wobei mögliche Netzwerkeinschränkungen oder CORS-Probleme zu berücksichtigen sind.

    • Base64: Geben Sie eine Base64-codierte Zeichenfolge an, die den gesamte Inhalt der PDF-Datei repräsentiert. Diese Methode ist im Allgemeinen nur für kleine PDFs geeignet, die möglicherweise dynamisch generiert oder von einem anderen System übergeben werden. Große Base64-Zeichenfolgen können die Leistung stark beeinträchtigen und die Größenbeschränkungen für Komponentenkonfigurationen erreichen.

Sichtbarkeit der Komponente festlegen

Steuert, ob die PDF Viewer-Komponente auf der Seite angezeigt wird. Binden Sie dies an eine Boolean-Variable oder Formel für dynamische Sichtbarkeit.

Beispiele

Anzeigen einer Salesforce-Datei (mithilfe der ContentDocumentId)

Szenario: Zeigen Sie das neueste Rechnungs-PDF (eine in Salesforce gespeicherte Datei) an, das mit der aktuellen Opportunity-Datensatzseite verknüpft ist.

Vorgehensweise: Wir verwenden einen autolaunchten Flow, der "On Load" ausgelöst wird, um die korrekte ContentDocumentId zu finden und an den PDF Viewer zu übergeben.

Voraussetzungen:

1

Erstellen Sie einen autolaunchten Flow

  • Erstellen Sie in Salesforce Setup einen einfachen autolaunchten Flow.

  • Eingabevariable: Erstellen Sie eine Text-Eingabevariable namens recordId (als 'Available for Input' markieren). Diese erhält die Opportunity-ID.

  • Get Records-Element: Verwenden Sie "Get Records" auf dem ContentDocumentLink Objekt.

    • Filtern nach: LinkedEntityId gleich {!recordId}.

    • (Empfohlen) Fügen Sie weitere Filter hinzu, um die spezifischen Datei zu finden (z. B. filtern nach ContentDocument.Title beginnend mit 'Invoice', ContentDocument.FileType gleich 'PDF').

    • Sortieren nach ContentDocument.CreatedDate Absteigend.

    • Wählen Sie "Nur der erste Datensatz".

  • Ausgabevariable: Erstellen Sie eine Text-Ausgabevariable namens outputContentDocumentId (als 'Available for Output' markieren).

  • Zuordnung: Wenn ein ContentDocumentLink Datensatz vom "Get Records"-Element gefunden wird, weisen Sie dessen ContentDocumentId Feld Ihrer {!outputContentDocumentId} Variable zu.

  • Aktivieren Sie den Flow.

2

Erstellen Sie eine Variable in Dynamic Component

Erstellen Sie im Resources-Panel Ihrer Dynamic Component eine Textvariable Ressource mit dem Namen invoiceFileId.

3

Zielobjektname festlegen

Stellen Sie sicher, dass der Target Object Name auf Opportunity Ihrer Dynamic Component (in den Einstellungen) gesetzt ist.

Konfigurationsschritte:

1

Fügen Sie die Interaktion "On Load" hinzu

Wählen Sie Ihre Dynamic Component aus und fügen Sie eine Aktion zur Beim Laden Interaktion hinzu.

2

Konfigurieren Sie die Aktion "Execute Flow"

  • Aktionstyp: Flow ausführen.

  • Flow-API-Name: Wählen Sie den oben erstellten autolaunchten Flow aus.

  • Eingabevariablen:

    • Mappen Sie die recordId Eingabevariable des Flows auf den Wert @recordId (dies übergibt die aktuelle Opportunity-ID an den Flow).

  • Ausgabevariablen:

    • Mappen Sie die outputContentDocumentId Die Ausgabevariable auf Ihre Dynamic Component's {!invoiceFileId} Variable zu.

3

PDF Viewer hinzufügen

Fügen Sie die PDF Viewer-Komponente Ihrer Arbeitsfläche in der Avonni Dynamic Components App hinzu.

4

Quelle konfigurieren

  • Wählen Sie den PDF Viewer aus.

  • Im Quelle Eigenschaftsfeld klicken Sie auf das Ressourcensymbol und wählen Sie Mapped ({ }).

  • Wählen Sie Ihre Variable-Ressource {!invoiceFileId}.

5

Titel festlegen (optional)

Setzen Sie die Titel Eigenschaft, möglicherweise dynamisch unter Verwendung des Opportunity-Namens (z. B. $Component.record.Name & " - Invoice").

Ergebnis:

Wenn die Opportunity-Seite geladen wird:

  1. Die "On Load"-Interaktion löst den Flow aus und übergibt die aktuelle Opportunity-ID.

  2. Der Flow findet die zuletzt zugehörige Rechnungs-PDF- ContentDocumentId.

  3. Der Flow gibt diese ID an die invoiceFileId Variable in Ihrer Dynamic Component zurück.

  4. Der PDF Viewer, der Quelle an invoiceFileIdgebunden ist, erhält die ID und zeigt das korrekte PDF an bevor die Komponente rendert vollständig.

Anzeigen eines PDFs von einer externen URL

Szenario: Betten Sie ein öffentlich verfügbares Produktdatenblatt-PDF ein.

  1. PDF Viewer hinzufügen: Fügen Sie die Komponente Ihrer Arbeitsfläche hinzu.

  2. Quelle konfigurieren:

    • Wählen Sie den PDF Viewer aus.

    • Im Quelle Im Eigenschaftsfeld geben Sie direkt die vollständige HTTPS-URL der PDF-Datei ein (z. B. https://www.example-company.com/datasheets/product-xyz.pdf). Sie können dies auch an eine Textvariable oder Konstante binden, die die URL enthält.

  3. Titel festlegen (optional): Setzen Sie die Titel Eigenschaft (z. B. "Produkt XYZ Datenblatt").

Wesentliche Überlegungen

  • Berechtigungen (Salesforce Files): Wenn Sie ContentDocumentIdverwenden, stellen Sie sicher, dass Benutzer, die die Seite ansehen, die erforderlichen Salesforce-Berechtigungen haben, um auf diesen bestimmten File-Datensatz zuzugreifen.

  • URL-Zugänglichkeit: Wenn Sie eine URLverwenden, prüfen Sie, ob die URL korrekt, öffentlich zugänglich (oder innerhalb des Netzwerks des Benutzers erreichbar) ist, und berücksichtigen Sie mögliche Einschränkungen durch Cross-Origin Resource Sharing (CORS), die das Einbetten verhindern könnten. Verwenden Sie HTTPS.

  • ⚠️ Einstellung zur Handhabung von Salesforce-Dateien: Navigieren Sie in Salesforce Setup zu "File Upload and Download Security". Stellen Sie sicher, dass das Verhalten für PDF- Dateien auf "Im Browser ausführen"eingestellt ist. Wenn es auf "Download" konfiguriert ist, kann diese Komponente das PDF möglicherweise nicht inline anzeigen und stattdessen einen Dateidownload auslösen.

  • Base64 Leistung/Grenzen: Vermeiden Sie die Verwendung von Base64 für große PDFs aufgrund von Leistungseinbußen und möglichen Größeneinschränkungen. ContentDocumentId oder URL werden im Allgemeinen bevorzugt.

  • Browser-Kompatibilität: Die PDF-Darstellung hängt von den Fähigkeiten des Browsers oder integrierten PDF-Viewern ab. Stellen Sie die Kompatibilität mit den Standardbrowsern Ihrer Benutzer sicher

URL-Anzeigebeschränkungen & Workaround

Wenn Sie eine direkte URL als PDF-Quelle verwenden, beachten Sie, dass Salesforce-Sicherheitseinstellungen oder Browser-Richtlinien manchmal verhindern können, dass das PDF innerhalb des PDF Viewers korrekt angezeigt wird. In solchen Fällen können Benutzer einen leeren Rahmen oder eine Fehlermeldung sehen.

Workaround: Einbetten mit Google Docs Viewer

Um diese Einschränkungen zu umgehen, können Sie den Google Docs Viewer-Dienst nutzen, mit dem PDF-Dateien innerhalb eines iframes angezeigt werden können, selbst wenn das direkte Einbetten der Originaldatei blockiert ist.

Anleitung zur Verwendung:

Setzen Sie die Source-Eigenschaft des PDF Viewers auf einen Google Docs Viewer-Link, der wie folgt strukturiert ist (kann mit einer Formel-Textvariable erfolgen)

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

Beispiel:

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

⚠️ Wichtig

Um diesen Workaround zuzulassen, stellen Sie sicher, dass https://docs.google.com zu Ihrer Liste der Vertrauenswürdigen URLs im Salesforce Setup hinzugefügt wird und dass docs.google.com für die Verwendung in iframes innerhalb der Sicherheitsrichtlinien Ihrer Organisation autorisiert ist.

Zusammenfassung

Die Avonni PDF Viewer-Komponente bietet eine unkomplizierte Möglichkeit, PDF-Dokumente aus verschiedenen Quellen direkt innerhalb Ihrer benutzerdefinierten Lightning Page-Oberflächen anzuzeigen und verbessert dadurch den Zugriff der Benutzer auf kontextbezogene Informationen.

Zuletzt aktualisiert

War das hilfreich?