> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/projects/use-cases/external-orders-table.md). # External Orders Table {% hint style="danger" %} #### **Before you start** This use case requires External Objects configured in Salesforce. Review [**the Prerequisite section**](#id-95698e6d-33c3-40d4-87c5-cf048c4f246d) before building {% endhint %} {% hint style="success" %} #### Learning focus points * Querying **External Objects** in Avonni Dynamic Components * Building a **reactive master-detail layout** with two Data Tables {% endhint %} 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. {% @arcade/embed flowId="JhIxgkfNRZKBCVAUuTsQ" url="" %} *** ## 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 = #### 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. {% @arcade/embed flowId="uDxEyaTwTC3V2dy9r60O" url="" %} {% stepper %} {% step %} #### 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 {% endstep %} {% step %} #### 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` {% endstep %} {% step %} #### 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 {% endstep %} {% step %} #### 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 {% endstep %} {% step %} #### Save and review * Make sure your component's target page object is Account {% endstep %} {% endstepper %} *** ## 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**](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions) 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**](https://docs.avonnicomponents.com/dynamic-components/tutorials/style) to flag orders where `shippedDate__c` is null as "Pending". **Dynamic components used in this use case** {% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/By0CvRSNEZiVKHeDjgLv" %} [Data Table](/dynamic-components/components/data-table.md) {% endcontent-ref %} {% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/3Ab0idmjF5E6w1ISwttH" %} [Image](/dynamic-components/components/image.md) {% endcontent-ref %} {% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/rcwTLxwbQmHMB1ag72sA" %} [Columns](/dynamic-components/components/columns.md) {% endcontent-ref %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/projects/use-cases/external-orders-table.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.