External Orders Table

Before you start

This use case requires External Objects configured in Salesforce. Review the Prerequisite section before building

Learning focus points

• Querying External Objects in Avonni Dynamic Components
• Building a reactive master-detail layout with two Data Tables

In this guide, you'll build a component that displays an account's external orders — data stored outside Salesforce on Heroku — directly on the Account record page. A second Data Table appears automatically when a rep selects an order row, displaying the related line items for that order.

---

Set up

Prerequisite

Before building in Avonni, you need two External Objects synced to Salesforce via Salesforce Connect.

External data source

• Name = OrderDB
• Type = Salesforce Connect: OData 2.0
• URL = https://orderdb.herokuapp.com/orders.svc

External Objects and fields

• Order (Order__x)

Name	Type
customerID__c	Indirect Lookup(Account)
DisplayUrl	URL(1000)
ExternalId	External Lookup
orderDate__c	Date/Time
orderID__c	Number(18, 0)
shippedDate__c	Date/Time

• OrderDetails (OrderDetail__x)

Name
DisplayUrl	URL(1000)
ExternalId	External Lookup
orderID__c	External Lookup(Order)
orderLine__c	Number(18, 0)
product__c	Text(255)
quantity__c	Number(18, 0)
unitPrice__c	Number(10, 8)

Component Setup

You'll build a single dynamic component with two Data Tables arranged side by side. The first table lists orders for the current account. The second table reacts to the selected row and shows its line items.

1

Add a column component onto the canvas

1. Set 2 fixed-width columns, each column will hold one data table for a clean and organized component

2

Configure the Orders data table

1. Drag a data table into the left column

   1. Name = Datatable_ExtOrders. Use a clear name as it will be used to make the other components reactive.
2. Create a query on the Order__x external object
3. Set the filter to a custom text formula resource : F_QueryOrders

   1. Value : "customerID__r.Id = '" & {!$Component.RecordId} & "' "
   2. This will be read by the component as the criteria after the WHERE of the SOQL query
   3. This is necessary due to technical limitations around external object fields
4. Map fields to columns according to business needs
5. Set the maximum selectable rows to 1
6. Customize the table's header

   1. Title = External Orders
   2. Icon = standard:work_order

3

Configure the related Order Details data table

1. Create a query on the OrderDetail__x external object
2. Set a filter to OrderID = Datatable_ExtOrders > First Selected Row SObject > ExternalId. This will make the component reactive to the selected record in the first data table.
3. Map fields to columns according to business needs
4. Hide the checkbox column
5. Customize the table's header

   1. Title = Order Details
   2. Icon = standard:work_order_item
6. Set a conditional visibility rule so that the table only display when the user selects a record

   1. Datatable_ExtOrders > Selected Rows Key value = is not empty

4

Add an Image component as a placeholder

1. Enable show placeholder
2. Placeholder message : Select an order to view products.
3. Placeholder illustration : Gone fishing
4. Set a conditional visibility rule so that the image only display no order records are selected

   1. Datatable_ExtOrders > Selected Rows Key value = is empty

5

Save and review

• Make sure your component's target page object is Account

---

Test the Component

• Open any Account record that has external orders.
• The Orders table should load automatically and display the account's orders.
• Click any row. The Order Details table on the right should update immediately with that order's line items.
• If no orders appear, verify the customerID__c Indirect Lookup field maps correctly to the Account's Id and that the External Data Source sync is complete.

---

Going further

• Add a Metric component above the Orders table to show the total number of open orders using a Formula resource.
• Wire an Interaction on the Orders table row click to navigate to the order's DisplayUrl if your team needs to access the source system directly.
• Apply Conditional Styling to flag orders where shippedDate__c is null as "Pending".

Dynamic components used in this use case

Data TableImageColumns