Account PDF Viewer

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