Ctrlk
YouTube ChannelBook A Demo🪄 Build with AIJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Fields

Overview

The Dynamic Components App empowers you to build sophisticated, data-driven Salesforce App and Record Pages without writing a single line of code. By leveraging the Fields tab, you can seamlessly integrate Salesforce data into your components using either a Target Page Object or a Record Variable.

This no-code data binding allows you to:

  • Display Record Data: Show real-time field values from specific Salesforce records directly within your layout.

  • Enable Data Input & Editing: Create interactive interfaces that allow users to enter new information or modify existing field values.

  • Trigger Dynamic Actions: Utilize record data to power complex interactions, such as passing a Record ID to a Salesforce Flow or triggering specific component behaviors

Location of the Fields Panel

How it Works

Accessing Fields

The Fields tab provides a convenient way to add data-bound components to your canvas. To populate the Fields tab, you have two options:

Option 1: Target Page Object (for Record Pages and general object access)

  1. Save the component first. The Settings button only appears once the component has been saved, so on a component you have just started it is not on screen yet. Click Save: the New Component dialog opens, and it carries the same Target Page Object field, so you can set it right there and skip to step 3.

  2. Open Settings (top right of the Component Builder, next to Help) and set Target Page Object to the API name of the Salesforce object you want to work with (e.g., Account, Contact, My_Custom_Object__c). This is typically the object of the record page where you'll place the component. Saving the setting refreshes the Fields tab straight away, with no need to reload the builder.

  3. Open the Component Library (left panel) and click the Fields tab. You'll now see a list of fields from the selected object.

  4. When you drag fields from here, the created component is automatically bound to the special $Component.record variable, pre-populating with the data of the current record.

If the Fields tab is empty

The two empty states mean different things, and the wording tells you which one you are looking at:

  • Select a Record Variable to see available fields. Nothing is selected yet. Pick Target Page Record or one of your Record Variables at the top of the tab.

  • No fields found. Something is selected, but no fields came back for it. On Target Page Record this almost always means Target Page Object is still empty in the component settings. Set it and the list fills in.

Option 2: Record Variable (for specific records or custom logic)

  1. Create a Record Variable: In the Resources panel, create a new Variable resource and set its Data Type to Record. Choose the appropriate Salesforce object for the record type.

  2. Populate the Record Variable: You'll typically use an "On Load" interaction with a "Get Records" action to fetch and store a specific record in your Record Variable. (See the "On Load Interaction" documentation for details..

  3. Open the Component Library (left panel) and click the Fields tab. You should see a list of fields corresponding to the object type of Record Variable.

  4. When you drag fields, the created component is bound to your Record Variable.

The $Component.record Variable

When you set the Target Page Object, Avonni automatically makes a special variable available: $Component.record.

  • On Record Pages: If your Dynamic Component is placed on a record page, $Component.record will contain the data for the current record. For example, $Component.record.Name the account's name would be held on an account record page.

  • Not on Record Pages: If your component is not on a record page (e.g., on an App page), $Component.record might be empty or undefined. In these cases, you'd often use a Query Data Source to fetch data and then work with that data instead of $Component.record.

Saving or Deleting Field Data: Using Interactions

When you drag fields onto your Dynamic Component canvas using the Fields tab, they are typically bound to data (either the $Component.record global variable on a record page or a specific Record Variable resource). This allows users to view and, if configured, edit the data directly within those components (like Text Inputs, Picklists, etc.).

Important Information

Editing a field on the canvas does not automatically save that change to Salesforce. You need to configure separate Interactions to perform actions such as saving updates, Creating New Records, or Deleting Records based on the data displayed or entered in these fields. These interactions are most often triggered by clicking an Avonni Button component.

Key Interactions for Record Operations

Here are the primary interactions you'll use to make your fields actionable

Update Record

  • Use Case: Use this when you have loaded data into a specific Record Variable (using an "On Load" > "Get Records" action, or by binding various input fields to its fields) and you want to save changes from that variable back to the corresponding Salesforce record.

  • How: Add this to a "Save" or "Update" button's "On Click" event, making sure to select the correct Record Variable in the interaction's configuration.

Create Record

  • Use Case: Use this to create a new Salesforce record from data entered into input fields bound to a specific Record Variable (often used in custom forms).

  • How: Add this to a "Create," "Submit," or "Save New" button's "On Click" event, selecting the Record Variable containing the new record's data.

Upsert Record

  • Use Case: Combines create and update logic. It will update an existing record if an ID is present in the Record Variable or create a new one otherwise.

  • How: Configure similarly to Create/Update, linking it to the relevant Record Variable.

Delete Record

  • Use Case: Deletes the Salesforce record whose ID is in the specified Record Variable.

  • How: Add this to a "Delete" button's "On Click" event. Crucially, it's highly recommended to use an "Open Confirm" interaction before this action to ask the user for confirmation, preventing accidental deletions. You must select the Record Variable containing the ID of the record to be deleted.

Example

Displaying and Editing Account Name

  1. Set the Target Page Object: In your Dynamic Component's settings, set the Target Page Object to Account.

  2. Drag Field: Open the Fields tab in the Component Library. Find the Name field (under Account) and drag it onto the canvas. Avonni will likely create a Text Input component.

  3. Add a Button: Drag a Button component onto the canvas. Label it "Save".

  4. Add an "On Click" Interaction to the Button:

    • Select the Button.

    • Go to the Interactions panel.

    • Add an "On Click" interaction.

    • Action Type: Choose Update Record and select the corresponding record variable.

Now, when you place this Dynamic Component on an Account record page:

  • The Text Input will display the current Account's name (because it's bound to $Component.record.Name).

  • The user can edit the name in the Text Input.

  • Clicking the "Save" button will trigger the flow to save the changes.

Key Advantages

  • Rapid Development: Quickly create data-bound components without writing code.

  • Visual Configuration: The drag-and-drop interface and automatic component creation make the process intuitive.

  • Data Consistency: Ensures that your components always display the correct data from the current record.

In Summary

The Field tab displays the object fields and standard objects available based on the Target Page Object set. You can drag and drop those fields to let the users view, edit, and create records.

Last updated

Was this helpful?