# On Load Interaction

## Overview

The **On Load** interaction is a crucial feature in Avonni Dynamic Components that allows you to perform actions *automatically **right before*** your component becomes visible on the page. During the component's initialization phase, you have one-time opportunities to fetch essential data, run setup logic, and prepare variables, ensuring your component has everything it needs the moment it renders.

{% embed url="<https://youtu.be/kXo1tmQXwQs>" %}

***

## Preparing Your Component

Think of the "On Load" interaction as the setup crew preparing the stage before the main performance. It runs *once* when the component is loaded *before* any visual elements appear.&#x20;

This makes it ideal for:

* **Pre-loading Essential Data:** Fetching specific records needed for immediate display or use.
* **Initializing Variables:** Setting default or calculated values for variables that control component behavior or display.
* **Running Setup Flows:** Executing background logic (via an autolaunched Flow) to determine initial states or perform complex setup.
* **Conditional Display**: Setting variable values to drive visibility.

{% hint style="warning" %}

#### **Key Point**

Because "On Load" runs *before* rendering, you **cannot** reference components on the canvas (using `@ComponentName`) within its actions. It operates purely on data and initialization resources (like input or global variables).
{% endhint %}

***

## When is "On Load" Most Helpful?

While setting the `Target Object API Name` provides access to the current record via `$Component.record` on record pages, the "On Load" interaction is essential in many other scenarios:

* **Fetching Related Records:** Getting data linked to the primary record (e.g., fetching the parent Account when viewing a Contact).
* **Loading Data for Modals/Panels:** *Crucially*, when opening another Dynamic Component in a modal or panel (using "Open Dynamic Component Dialog/Panel"), "On Load" within the *modal/panel component* is used to fetch the specific record's data based on an ID passed into it. (See Example below).
* **Fetching Specific Configuration Records:** Loading data from known records like Custom Metadata or Settings.
* **Running Initial Calculations/Aggregations:** Using "Execute Flow" to calculate KPIs, count related records, or perform complex logic before displaying results.
* **Loading External Configuration:** Using "Execute Flow" to retrieve settings or data from other systems (if your Flow supports this).

***

## Available Actions within "On Load"

You can configure one or more actions to run sequentially within the "On Load" event:

### **Get Records**

**What it does:** Retrieves a single Salesforce record by its ID and stores it in a variable.

**When to use**

* You need to display or work with a specific record's data
* Opening a modal/panel to show details for a particular record
* Fetching a related record (e.g., getting the parent Account for a Contact)
* Loading a record for editing in a form

**Why choose Get Records over Execute Flow**

* You only need one record's data
* No calculations or logic required
* Simpler configuration
* Better performance for straightforward retrieval

### **Execute Flow**

**What it does:** Runs an autolaunched Salesforce Flow that can perform complex operations and return results.

**When to use**

* You need complex logic or calculations before displaying data
* Fetching multiple records or aggregated data
* Performing data transformations or validations
* Querying records with complex filter criteria
* Calling external services or APIs
* Checking permissions or conditional logic
* Getting configuration data from multiple sources

**Why choose Execute Flow over Get Records**

* You need more than just a single record's raw data
* Complex filtering, sorting, or multiple queries required
* Calculations or data transformations needed
* Business logic must run before displaying content
* Multiple data sources need to be combined

### **Biometric**

**What it does:** Requests device-level biometric authentication (fingerprint, face ID, etc.) from the user before allowing access to the component.

**When to use:**

* You need to verify user identity before showing sensitive data
* Adding an extra security layer for confidential information
* Compliance requirements mandate biometric verification
* Building mobile apps with enhanced security (Salesforce Mobile App)
* Protecting high-value or restricted operations

***

## Configuration Steps

The On Load interaction requires configuration to determine what actions execute when your component loads. Below are the settings and options available.

{% stepper %}
{% step %}

#### **Open the Interactions Panel**

While editing your Dynamic Component in the Component Builder, locate and click the **Interactions** icon/button in the **left-side panel**. This opens the main panel where you manage all component interactions.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FCkJNmPQ2CwYQ1BYUANv5%2F2025-09-02_13-58-49.png?alt=media&#x26;token=e38ea097-b33d-4ed9-a491-9065dac9c188" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Add the "On Load" Interaction**

In the Interactions panel, click the "Add On Load Interaction" button. This adds the dedicated "On Load" event section to your configuration, which is ready for you to add actions.
{% endstep %}

{% step %}

#### **Choose Action Type**

Select either `Get Records` , `Execute Flow` or `Biometrics`&#x20;

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Frz2mOUv1a6FGjJs12cnq%2F2025-09-02_13-59-41.png?alt=media&#x26;token=84c03282-642c-4b3d-a046-b4a1e6fb7365" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Configure Action Details**

* **For `Get Records`:**
  * **Record Variable:** Select a *pre-defined Record Variable resource* (of the correct object type) where the fetched data will be stored.
  * **Object API Name:** Choose the object you want to retrieve (e.g., `Contact`).
  * **Record ID:** Specify the ID of the record to fetch. This is often bound to:
    * An *Input Variable* (if this component is opened by another, passing an ID).
    * A URL parameter (`@recordId`).
    * A field from `$Component.record` (e.g., `$Component.record.AccountId`).
  * **Fields:** Select the specific fields you want to retrieve.
* **For `Execute Flow`:**
  * **Flow API Name:** Select your *autolaunched* Flow.
  * **Flow Input Variables (Optional):** Map values (static, URL parameters, resources) to your Flow's inputs.
  * **Output Variables (Optional):** Map your Flow's outputs to *Variable resources* in your Dynamic Component
    {% endstep %}
    {% endstepper %}

***

## Example: Loading Contact Data in an Edit Modal

### What We're Building

We're creating a two-component system that allows users to edit Contact records in a modal dialog:

**Component A - Contact List (Main Page)**

* Displays a list of Contacts in a Data Table
* Each row has an "Edit" button
* Clicking "Edit" opens a modal dialog

**Component B - Edit Modal (Popup Dialog)**

* Opens as a modal overlay when "Edit" is clicked
* Automatically loads the selected Contact's data
* Shows editable fields for the Contact
* Has a "Save" button to update the record

### **Setup**

#### **Component A (Contact List)**

* It contains an Avonni List or Data Table showing contacts.
* Each Contact in the Data Table includes an "**Edit**" button, which you can add as a new column by selecting the button type in the table settings.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FmrDEPBwrs88eeYq1CesT%2F2025-09-02_14-06-04.png?alt=media&#x26;token=2af365de-fdbb-427d-905e-d0f85dabc5ab" alt="" width="563"><figcaption></figcaption></figure>

* The "Edit" button has an "On Click" interaction using **"Open Dynamic Component Dialog"**.

#### **Component B (Edit Modal):**

{% stepper %}
{% step %}
**Create Input Variable**

Create a *Text Variable* named `inputContactId`. Make it **"Available for Input"**. This receives the ID from Component A.

**Why?**\
The `inputContactId` Text Variable receives the ID of the selected Contact from Component A (the Contact list) when Component B (the modal dialog) is opened. Marking it as **Available for Input** allows Component A to pass the Contact ID, which Component B uses to fetch and display the correct Contact record for editing.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FXPcsxd5WeMnhQH7WuPfh%2F2025-09-02_14-07-32.png?alt=media&#x26;token=5a731230-5c06-45ba-b68f-8033ba9e6299" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Create Record Variable**

Create a *Record Variable* named `contactToEdit`. Set its **Object API Name** to `Contact`.

**Why?**\
The `contactToEdit` Record Variable stores the data for the specific Contact record being edited in the modal dialog. It allows the component to fetch, display, and update the Contact’s data (e.g., `FirstName`, `Email`) based on the ID passed from the Contact list. This ensures the modal works with the correct record.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fr7JLjT1k9nPd26RcIYVj%2F2025-09-02_14-12-46.png?alt=media&#x26;token=ec825006-1237-43d3-ace5-d39d74d5f92a" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Add "On Load" Interaction to Component B**

* Select Component B (top level).
* Add an action to the **On Load** event

**Why?**\
The **On Load** interaction runs automatically when Component B (the modal dialog) loads, before it becomes visible. This allows you to fetch the specific Contact record’s data (using the ID passed from Component A) and store it in the `contactToEdit` Record Variable. It ensures the modal is populated with the correct data for editing right when it opens.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FhgBm8KTrmZWQomky2xif%2F2025-09-02_14-14-20%20(1).gif?alt=media&#x26;token=ea4fbe12-3dc9-4649-9db4-f99136b4832b" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Configure "Get Records" Action**

* **Action Type:** `Get Records`.
* **Record Variable:** Select `{!contactToEdit}`.
* **Object API Name:** `Contact`.
* **Record ID:** Bind this to your input variable: `{!inputContactId}`.

**Why?**\
The **Get Records** action retrieves the specific Contact record’s data when Component B (the modal dialog) loads. By setting the Record Variable to `contactToEdit`, the fetched data is stored there for editing. The Object API Name specifies the Contact object, and binding the Record ID to `inputContactId` ensures the action fetches the correct Contact record based on the ID passed from Component A (the Contact list).

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FSdvsQtKlzX8imP2PqrvY%2F2025-09-02_14-15-58%20(1).gif?alt=media&#x26;token=6d0033ec-dca5-491b-9e59-7a771b4c809c" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Add Input Fields**

With the **On Load** interaction configured, add input fields to Component B (the modal dialog) for editing the Contact record. In the Component Builder, go to the **Fields** tab in the component menu, drag the desired fields onto the canvas, and bind them to the `contactToEdit` Record Variable to display and edit the correct Contact data.

**Why?**\
Input fields allow users to view and modify the Contact’s data (e.g., `FirstName`, `Email`) in the modal. Binding fields to the contactToEdit Record Variable ensures they are populated with the specific Contact record’s data fetched during the **On Load** interaction, enabling accurate editing.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FVmc4DWfzipFC50RJNrQW%2F2025-09-02_14-18-44%20(1).gif?alt=media&#x26;token=b4a64a69-f804-4583-acbe-19b28d441de0" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Add Save Button**

Add a Button to Component B (the modal dialog). Configure an **On Click** interaction with the **Update from Record Variable** action, targeting the `{!contactToEdit}` Record Variable.

**Why?**\
The Save Button allows users to save changes made to the Contact’s data in the modal. The **Update from Record Variable** action uses the `contactToEdit` Record Variable to update the Contact record in Salesforce with the edited field values, ensuring changes are persisted.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgrg24GseCoND5WYoBMT7%2F2025-09-02_14-48-31.png?alt=media&#x26;token=036cadb2-42d2-44d2-be30-334cf8021997" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Interaction from Component A

To enable the **Edit** button in the Data Table of Component A (Contact list) to open Component B (modal dialog), follow these steps:

* **Select the Data Table**: In Component A, choose the Data Table in the Component Builder.
* **Go to Interactions Tab**: Navigate to the **Interactions** tab in the component menu.
* **Add Row Action**: Under **Row Actions**, add a new action for the **Edit** button (created earlier).
* **Set Interaction Type**: Choose **Open Dynamic Component Dialog** as the interaction type.
* **Select Component B**: Pick Component B (the modal dialog) as the target component to open.
* **Configure Input Variable**:
  * Select the inputContactId variable (set as Available for Input in Component B).
  * Set the value to **Record: Id** to pass the Contact’s ID from the selected row.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fv6GHt1zmaQsxTGmovvHx%2F2025-09-02_14-49-32.png?alt=media&#x26;token=b305f213-c55c-4d89-bbee-c4043dc3a430" alt=""><figcaption></figcaption></figure>

**Why?**\
This interaction links the **Edit** button in each Data Table row to Component B, passing the selected Contact’s ID to the inputContactId variable. Component B uses this ID in its **On Load** interaction to fetch and display the correct Contact record for editing, ensuring a smooth and accurate editing process.
{% endstep %}
{% endstepper %}

#### **Result**

When the user clicks "Edit" in Component A, Component B opens. *Before* Component B displays, its "On Load" interaction fires, uses the passed-in `inputContactId` to fetch the full Contact record via "Get Records," and populate the `contactToEdit` variable. The input fields (bound to `contactToEdit`) then render are already filled with the correct contact's data and ready for editing.

{% hint style="warning" %}

#### Important Considerations

* **Autolaunched Flows Only:** "Execute Flow" requires autolaunched Flows.
* **Record ID Source:** Ensure you have a valid ID for "Get Records" (often from an input variable or URL parameter).
* **One-Time Execution:** Runs only once before rendering.
* **No Canvas Component References:** Cannot reference components on the canvas (e.g., `@MyComponent`) during "On Load".
* **Performance:** Keep "On Load" actions efficient to avoid delaying component display.
* **Error Handling:** Implement error handling within Flows if used.
  {% endhint %}

***

## **In Summary**

The On Load interaction is your essential tool for preparing data and initializing variables *before* your Dynamic Component renders. Use `Get Records` to fetch specific records (especially related data or data for modals/panels) and `Execute Flow` for more complex setup logic, calculations, or fetching configuration settings.