On Load

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.

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: This function retrieves a single Salesforce record based on its ID. It is perfect for fetching the specific record needed for display or editing, especially in modals or when dealing with related data.

• Execute Flow: Runs an autolaunched Salesforce Flow. Use this for anything beyond simple record retrieval: complex calculations, fetching multiple records for aggregation, checking permissions, getting configuration data, etc.

• Biometric: This action requests device-level biometric authentication (like fingerprint or face ID) from the user. It is primarily intended for use in mobile environments (like the Salesforce Mobile App or custom mobile solutions) to verify the user's identity before allowing access to the component's content. You configure the prompts shown to the user and potential fallback methods.

Configuration Steps

1

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.

2

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.

3

Choose Action Type

Select either Get Records , Execute Flow or Biometrics

4

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

Example: Loading Contact Data in an Edit Modal

This use case demonstrates how "On Load" prepares data for a component opened via an interaction.

Scenario

You have a list of Contacts (Component A). Clicking an "Edit" button next to a Contact opens a separate Dynamic Component (Component B) in a modal dialog to edit that specific Contact.

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

Component B (Edit Modal):

1

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.

2

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.

3

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.

4

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

5

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.

6

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.

7

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.

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.