YouTube ChannelSchedule a CallSubscribe for Updates

PDF-Anzeige

Überblick

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 den Benutzern eine nahtlose Möglichkeit, PDF-Inhalte wie Rechnungen, Verträge, Berichte oder Anleitungen anzusehen, ohne die Datei herunterladen oder eine separate Anwendung öffnen zu müssen.

Hauptfunktionen umfassen:

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

  • Mehrere Quellenoptionen: Lädt PDFs aus Salesforce Files (unter Verwendung der ContentDocumentId), von externen URLs oder aus Base64-kodierten Daten.

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

Für die Inline-Anzeige von PDFs erforderliche Salesforce-Einstellung

Gehen Sie in Salesforce Setup zu „File Upload and Download Security“. Finden Sie den Eintrag für PDF und setzen Sie dessen Verhalten auf „Execute in Browser“. Dadurch wird das PDF innerhalb der Komponente gerendert. Wenn es auf „Download“ gesetzt ist, erzwingt Salesforce das Herunterladen der Datei, und der Viewer bleibt leer oder löst einen Download aus, anstatt das Dokument anzuzeigen.

So prüfen und aktualisieren Sie:

  1. Setup → Schnellsuche: „File Upload and Download Security“

  2. Öffnen Sie die Liste, suchen Sie „PDF“

  3. Ändern Sie das Verhalten auf „Execute in Browser“

  4. Speichern

  5. Aktualisieren Sie Ihre Lightning-Seite und testen Sie den Viewer

Anwendungsfälle

  • Anzeigen generierter Rechnungs- oder Angebots-PDFs auf Opportunity- oder Bestell-Datensätzen.

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

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

  • Darstellung als PDF generierter Berichte innerhalb einer Dashboard-Komponente.

  • Anzeigen hochgeladener Anhänge direkt innerhalb einer benutzerdefinierten Komponenten-Kontextes.

Hinzufügen des PDF Viewers

Drag & Drop: Finden Sie in der Component Library (linkes Panel) die Komponente "PDF Viewer" und ziehen Sie sie im Component Builder auf Ihre Leinwand.

Konfiguration

Wählen Sie die PDF Viewer-Komponente auf der Leinwand aus, um ihre Eigenschaften im Eigenschaftenbereich anzuzeigen.

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: "Rechnungsvorschau", "Vertragsdokument".

PDF-Quelle

  • Quelle: (Text - Wesentlich) Diese kritische 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. Sie binden diese Eigenschaft typischerweise an eine Variable oder Ressource, die die ID enthält (z. B. {!FileIdVariable}, $Component.record.LatestInvoiceId__c).

    • URL: 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 dass Ihre Benutzer darauf zugreifen können, wobei mögliche Netzwerkeinschränkungen oder CORS-Probleme zu berücksichtigen sind.

    • Base64: Geben Sie eine Base64-kodierte Zeichenfolge an, die den gesamten Inhalt der PDF-Datei darstellt. Diese Methode eignet sich im Allgemeinen nur für kleine PDFs , die dynamisch generiert werden oder von einem anderen System übergeben werden. Große Base64-Zeichenfolgen können die Leistung erheblich beeinträchtigen und möglicherweise Größenbeschränkungen der Komponenten-Konfiguration erreichen.

Sichtbarkeit der Komponente festlegen

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

Beispiele

Anzeigen einer Salesforce-Datei (unter Verwendung von ContentDocumentId)

Szenario: Zeigen Sie die neueste Rechnungs-PDF an, die mit der aktuellen Opportunity-Datensatzseite verknüpft ist.

Vorgehen: Verwenden Sie einen autolaunchten Flow, der "On Load" ausgelöst wird, um die ContentDocumentId abzurufen und an den PDF Viewer zu übergeben.

Einrichtungsübersicht

1

Erstellen Sie einen Autolaunched Flow

Da die PDF Viewer-Komponente eine ContentDocumentId benötigt, um eine Salesforce-Datei anzuzeigen, Sie aber typischerweise nur Zugriff auf die Datensatz-ID (z. B. Opportunity-ID) haben, benötigen Sie eine Möglichkeit, die richtige Datei zu finden. Ein Autolaunched Flow ermöglicht Ihnen:

  • Abfragen der Salesforce-Datenbank, um Dateien zu finden, die mit dem aktuellen Datensatz verknüpft sind

  • Anwenden von Filtern, um das spezifische PDF zu finden, das Sie anzeigen möchten (z. B. die neueste Rechnung)

  • Zurückgeben der ContentDocumentId an die Komponente

Konfiguration

  • Akzeptiert die Datensatz-ID als Eingabe

  • Fragt verwandte Dateien über ContentDocumentLink und ContentVersion Objekte ab

  • Filtert nach PDF-Dateien mit „Invoice“ im Titel

  • Gibt die ContentDocumentId der neuesten übereinstimmenden Datei zurück

2

In Ihrer Dynamic Component

Nun, da Ihr Flow bereit ist, die ContentDocumentId abzurufen, müssen Sie Ihre Dynamic Component so konfigurieren, dass sie diesen Flow ausführt und das Ergebnis an den PDF Viewer übergibt. Dies beinhaltet das Festlegen des Zielobjekts, das Erstellen einer Variable zum Speichern der Datei-ID, das Auslösen des Flows beim Laden der Seite und das Binden dieser Variable an die Source-Eigenschaft des PDF Viewers.

Schritte:

  • Setzen Sie den Target Object Name auf Opportunity in Ihren Dynamic Component-Einstellungen (dies ermöglicht den Zugriff auf den aktuellen Datensatzkontext)

  • Erstellen Sie eine Textvariable (z. B. invoiceFileId) zum Speichern der ContentDocumentId

  • Fügen Sie eine Execute Flow Aktion zur On Load Interaktion hinzu:

    • Wählen Sie Ihren autolaunchten Flow aus

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

    • Mappen Sie die Ausgabevariable auf {!invoiceFileId} (dies speichert die zurückgegebene ContentDocumentId)

  • Konfigurieren Sie die Source Eigenschaft des PDF Viewers auf {!invoiceFileId}

Ergebnis: Wenn die Seite geladen wird, ruft der Flow die ContentDocumentId der neuesten Rechnungs-PDF ab und der PDF Viewer zeigt sie automatisch an.

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 zu Ihrer Leinwand hinzu.

  2. Quelle konfigurieren:

    • Wählen Sie den PDF Viewer aus.

    • Geben Sie in der Source Eigenschaft 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 eine Konstantenressource binden, die die URL enthält.

  3. Titel festlegen (optional): Setzen Sie den Title Eigenschaft (z. B. "Product XYZ Datasheet").

Wichtige Überlegungen

  • Berechtigungen (Salesforce Files): Wenn Sie ContentDocumentIdverwenden, stellen Sie sicher, dass Benutzer, die die Seite anzeigen, die notwendigen Salesforce-Berechtigungen haben, um auf den jeweiligen 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 zugänglich) ist, und berücksichtigen Sie mögliche Cross-Origin Resource Sharing (CORS)-Einschränkungen, die das Einbetten verhindern könnten. Verwenden Sie HTTPS.

  • ⚠️ Salesforce File Handling-Einstellung: Gehen Sie in Salesforce Setup zu „File Upload and Download Security“. Stellen Sie sicher, dass das Verhalten für PDF Dateien auf „Execute in Browser“gesetzt 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ößenbeschränkungen. ContentDocumentId oder URL werden im Allgemeinen bevorzugt.

  • Browserkompatibilität: Die PDF-Darstellung hängt von den Browserfähigkeiten 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 kann es zu einem leeren Rahmen oder einer Fehlermeldung kommen.

Workaround: Einbetten mit Google Docs Viewer

Um diese Beschränkungen zu umgehen, können Sie den Google Docs Viewer-Dienst nutzen, der es ermöglicht, PDF-Dateien innerhalb eines iframes anzuzeigen, 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 mithilfe einer Formelfeld-Textvariable erfolgen)

Beispiel:

⚠️ Wichtig

Um diesen Workaround zu ermöglichen, stellen Sie sicher, dass https://docs.google.com zu Ihrer Liste der Vertrauten URLs im Salesforce Setup hinzugefügt wurde 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 einfache Möglichkeit, PDF-Dokumente aus verschiedenen Quellen direkt innerhalb Ihrer benutzerdefinierten Lightning-Page-Oberflächen anzuzeigen und somit den Benutzern den Zugriff auf kontextbezogene Informationen zu erleichtern.

Zuletzt aktualisiert

War das hilfreich?