Account PDF Viewer

Display and annotate PDFs attached to any record, directly from the record page.

Before you start

This use case has some configuration prerequisites. Make sure you review the Set up section of this page before building!

Learning focus points

• Go in-depth with the PDF viewer dynamic component
• Combining Dynamic components and flows to pass data
• Working with variables in Dynamic components
• Using component visibility rules

---

Objective

Allow users to quickly and seamlessly display an Invoice PDF from an account, without app navigation and with no-code.

---

Solution

This solution uses Avonni Dynamic Components combined with Salesforce automation, all built with no code.

User get a clear view of related Invoices where they can view PDF documents in one click.

How It Works (User Perspective)

• A user opens an account record and navigates to the Invoice list
• They click on an Open PDF button next to the Invoice
• The related PDF is automatically displayed
• If there are multiple PDFs, a picklist offers them to choose from before the selected document is displayed

What we'll create

• 1 Avonni Dynamic Component to allow users to view records and take action
• 1 screen Flow to handle automation
• 1 custom Bill object representing our invoices that will hold the ContentDocuments

---

Set up

Prerequisite: Create the Bill Custom Object

• Create a Bill__c custom object to represent your Invoices, with a lookup to Account.
• Use all other configurations you'd like

Configure the Screen Flow

1

In Flow Builder, create a Screen Flow

• Although it won't have screens, this needs to be a screen flow in order to be launched from a row-level action within the Dynamic component
• For this example, tour flow will be named AV_Get_ContendDocument_for_Bills. This will be referenced further in the Dynamic Component.

2

Create variables

• Create a text input variable : recordId

  • This will store the Bill Id
• Create a text collection output variable : vContentDocumentIds
• Create a text single output variable : vContentDocId
• Create a number variable : vDocCount

3

Retrieve related ContentDocumentLinks

• Use a Get record element to retrieve all the ContentDocumentLinks related to the recordId

4

Count Documents

• Count the retrieved records to allow for specific handling when one or many records are found
• Use an assignment element to count the retrieved records and populate the vDocCount variable with the value

5

Transform the Document collection

• Use a Transform element to map the ContentDocumentLinks into a text collection of Ids

6

Evaluate your number of documents

• Use a decision element to evaluate how many documents your bill has (use the vDocCount variable)

7

If multiple ContentDocumentLinks where found

• Assign all ContentDocumentIds to an output text collection variable vContentDocumentIds

8

If only one ContentDocumentLink was found

• Use a loop to pass the ContentDocumentId into a text vContentDocId output variable

9

Review

---

Create the Dynamic Component

1

Create the Dynamic component

• Create the Dynamic component in the Avonni Experience App, make sure it's Target Page Object is Account to allow for record context

2

Create Variables

• Create 2 text variables matching the flow output variables

  • vContentDocumentIds : collection variable
  • vContentDocumentTxt : single variable

3

Configure the Data Table

• Use a Data Table to display all Bill__c record related to the current account

  • Create a Query on the Bill__c object
  • Create the Open PDF row level action button as a Data Table column

4

Create an interaction to assign variables

• Create an Assignment interaction from the Open PDF row-level button
• Assign the constant null value both vContentDocumentTxt and vContentDocumentIds .

Why this matters

This will ensure all variables are cleared and the displayed data is always up to date.

5

Launch the Flow from an interaction

Create a Flow Dialog Interaction to launch the flow from the row-level button

• Important : Make sure to pass the row record id into the flow recordId input variable
• Important :

  • Make sure to retrieve the flow vContentDocId output variable into a text vContentDocumentTxt variable
  • Make sure you retrieve the flow vContentDocumentIds into a text collection variable vContentDocumentIds

6

Set up an Alert component

Add an Alert to let users know if multiple PDFs were found

• Display the component only if vContentDocumentIds is not empty
• Set up conditional visibility. The component should only display if multiple documents were retrieved by the flow : if vContentDocumentIds is not empty

7

Build a Combobox component

Add a Combobox component to let users choose from a document list if multiple PDFs were found

• Set the Data source to a query

  • Get Content Documents where their Id is IN the vContentDocumentIds collection
• Set up an interaction to assign the selected record Id to the variable vContentDocumentTxt
• Set up conditional visibility. The component should only display if multiple documents were retrieved by the flow : if vContentDocumentIds is not empty

8

Add the PDF viewer component

Add a PDF viewer component

• Set the source to the vContentDocumentTxt variable
• In the Style tab, set the Height to 1200 to enhance PDF readability

9

Save and review

---

Going further

Dynamic components used in this use case

AlertComboboxData TablePDF Viewer