YouTube Channel

PDF Viewer

Overview

The Avonni PDF Viewer component allows you to embed and display PDF documents directly within your Dynamic Components on Salesforce Lightning Pages. This provides a seamless way for users to view PDF content, such as invoices, contracts, reports, or guides, without needing to download the file or navigate to a separate application.

Key features include:

  • Direct PDF Embedding: Displays PDF content directly on the Lightning Page.

  • Multiple Source Options: Load PDFs from Salesforce Files (using ContentDocumentId), external URLs, or base64-encoded data.

  • Simple Configuration: Requires minimal setup, primarily involving the definition of the PDF source.

Use Cases

  • Displaying generated invoice or quote PDFs on Opportunity or Order records.

  • Showing signed contracts or agreements on Account or Contact pages.

  • Embedding product manuals or datasheets on Product record pages.

  • Presenting reports generated as PDFs within a dashboard component.

  • Viewing uploaded attachments directly within a custom component context.

Adding the PDF Viewer

Drag and Drop: From the Component Library (left panel), find the "PDF Viewer" component and drag it onto your canvas within the Component Builder.

Configuration

Select the PDF Viewer component on the canvas to access its properties in the Properties Panel.

Basic Properties

  • API Name: (Text) A unique identifier for this component instance (e.g., InvoiceViewer, ContractDisplay).

  • Title: (Text, Optional) A title displayed potentially above or as part of the viewer's frame (depending on styling). Example: "Invoice Preview", "Contract Document".

PDF Source

  • Source: (Text - Essential) This critical property indicates the origin of the PDF document. You must provide the source in one of the following formats:

    • ContentDocumentId: Provide the 15 or 18-character Salesforce ID of a File (ContentDocument record) stored within your Salesforce org. This is the most common and recommended method for securely displaying internal documents. You will typically bind this property to a Variable or resource holding the ID (e.g., {!FileIdVariable}, $Component.record.LatestInvoiceId__c).

    • URL: Provide a direct, publicly accessible HTTPS URL pointing to a PDF file hosted online (e.g., https://example.com/document.pdf). Ensure the URL is correct and that your users have access to it, taking into account potential network restrictions or CORS issues.

    • Base64: Provide a Base64-encoded string representing the entire content of the PDF file. This method is generally only suitable for small PDFs that might be generated dynamically or passed from another system. Large Base64 strings can significantly impact performance and may hit component configuration size limits.

Visibility

  • Visible: (Boolean) Controls whether the PDF Viewer component is displayed on the page. Bind this to a Boolean Variable or Formula for dynamic visibility.

Examples

Displaying a Salesforce File (using ContentDocumentId)

Scenario: Display the latest invoice PDF (a File stored in Salesforce) related to the current Opportunity record page.

Approach: We'll use an autolaunched Flow triggered "On Load" to find the correct ContentDocumentId and pass it to the PDF Viewer.

Prerequisites:

  1. Create an Autolaunched Flow:

    • Build a simple, autolaunched Flow in Salesforce Setup.

    • Input Variable: Create a Text input variable called recordId (mark as 'Available for Input'). This will receive the Opportunity ID.

    • Get Records Element: Use "Get Records" on the ContentDocumentLink object.

      • Filter by: LinkedEntityId equals {!recordId}.

      • (Recommended) Add more filters to find the specific file (e.g., filter by ContentDocument.Title starting with 'Invoice', ContentDocument.FileType equals 'PDF').

      • Sort by ContentDocument.CreatedDate Descending.

      • Select "Only the first record".

    • Output Variable: Create a Text output variable called outputContentDocumentId (mark as 'Available for Output').

    • Assignment: If a ContentDocumentLink record is found by the "Get Records" element, assign its ContentDocumentId field to your {!outputContentDocumentId} variable.

    • Activate the Flow.

  2. Create a Variable in Dynamic Component:

    • In your Dynamic Component's Resources panel, create a Text Variable resource named r.

  3. Set Target Object API Name: Ensure your Dynamic Component's Target Object API Name is set to Opportunity (in Settings).

Configuration Steps:

  1. Add "On Load" Interaction: Select your Dynamic Component (top level) and add an action to the On Load event.

  2. Configure "Execute Flow" Action:

    • Action Type: Execute Flow.

    • Flow API Name: Select the autolaunched Flow you created above.

    • Input Variables:

      • Map the Flow's recordId input variable to the value @recordId (this passes the current Opportunity's ID to the Flow).

    • Output Variables:

      • Map the Flow's outputContentDocumentId output variable to your Dynamic Component's {!invoiceFileId} variable.

  3. Add PDF Viewer: Add the PDF Viewer component to your canvas.

  4. Configure Source:

    • Select the PDF Viewer.

    • In the Source property, click the resource selector icon ({ }).

    • Select your Variable resource {!invoiceFileId}.

  5. Set Title (Optional): Set the Title property, potentially dynamically using the Opportunity Name (e.g., $Component.record.Name & " - Invoice").

Result:

When the Opportunity page loads:

  1. The "On Load" interaction triggers the Flow, passing the current Opportunity ID.

  2. The Flow finds the latest related invoice PDF's ContentDocumentId.

  3. The Flow passes this ID back to the invoiceFileId variable in your Dynamic Component.

  4. The PDF Viewer, whose Source is bound to invoiceFileId, receives the ID and displays the correct PDF before the component fully renders.

Displaying a PDF from an External URL

Scenario: Embed a publicly available product datasheet PDF.

  1. Add PDF Viewer: Add the component to your canvas.

  2. Configure Source:

    • Select the PDF Viewer.

    • In the Source property, directly enter the full HTTPS URL of the PDF file (e.g., https://www.example-company.com/datasheets/product-xyz.pdf). You can also bind this to a Text Variable or Constant resource that holds the URL.

  3. Set Title (Optional): Set the Title property (e.g., "Product XYZ Datasheet").

Key Considerations

  • Permissions (Salesforce Files): If using ContentDocumentId, ensure users viewing the page have the necessary Salesforce permissions to access that specific File record.

  • URL Accessibility: If using a URL, verify the URL is correct, publicly accessible (or accessible within the user's network), and consider potential Cross-Origin Resource Sharing (CORS) restrictions that might prevent embedding. Use HTTPS.

  • ⚠️ Salesforce File Handling Setting: In Salesforce Setup, navigate to "File Upload and Download Security". Ensure the behavior for PDF files is set to "Execute in Browser". If it is configured as "Download", this component may not display the PDF inline and may instead trigger a file download.

  • Base64 Performance/Limits: Avoid using Base64 for large PDFs due to performance impacts and potential size limitations. ContentDocumentId or URL are generally preferred.

  • Browser Compatibility: PDF rendering relies on browser capabilities or built-in PDF viewers. Ensure compatibility with your users' standard browsers

In Summary

The Avonni PDF Viewer component offers a straightforward way to display PDF documents from various sources directly within your custom Lightning Page interfaces, thereby enhancing users' access to contextual information.

Last updated

Was this helpful?