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.

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.

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.

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).

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.

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.

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.

Choose Action Type

Select either Get Records , Execute Flow or Biometrics

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

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.

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

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.

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.

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.

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).

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.

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.

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.

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.

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.

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.

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.

Last updated 1 hour ago

Was this helpful?