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.

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

Practical Example: Loading Contact Data in an Edit Modal

This robust 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.

• Has an "Edit" button for each Contact.

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

• This interaction is configured to:

  • Open Component B.

  • Pass the selected Contact's ID into an input variable defined in Component B (e.g., named inputContactId).

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.

2. Create Record Variable: Create a Record Variable named contactToEdit. Set its Object API Name to Contact.

3. Add "On Load" Interaction to Component B:

   • Select Component B (top level).

   • Add an action to the On Load event.

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

   • Fields: Select all Contact fields needed for editing (e.g., Id, FirstName, LastName, Email, Phone).

5. Add Input Fields: Add Text Input, Phone Input, Email Input components, etc., to the canvas.

6. Bind Input Fields: Bind the Value property of each input field to the corresponding field in the contactToEdit variable (e.g., bind the FirstName Text Input's Value to {!contactToEdit.FirstName}).

7. Add Save Button: Add a Button with an "On Click" interaction using the "Update from Record Variable" action, targeting the {!contactToEdit} variable.

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.