# 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**](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/pages/uSlKppaYP3g8GPpWStKE#id-2.-target-object-api-name) *or* a [**Record Variable**](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/pages/TQE8Wz5q8lxGZKdGEHSI#id-3.-creating-a-variable-resource).

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

<figure><img src="/files/2hDtSlj5Cs8IYuQ1lLy4" alt=""><figcaption><p>Location of the Fields Panel</p></figcaption></figure>

***

## 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 Object API Name (for Record Pages and general object access)**

1. **Click the Settings icon** (top-left of the Component Builder).
2. **Set the Target Object API Name** 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.
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.

### **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](/dynamic-components/component-builder/on-load-interaction.md)" interaction with a "Get Records" action to fetch and store a specific record in your Record Variable. (See the "[On Load Interaction](/dynamic-components/component-builder/on-load-interaction.md)" 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**](/dynamic-components/core-concepts/target-page-object.md), 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.).

{% hint style="warning" %}

#### 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**](/dynamic-components/component-builder/interactions/variable-operations/create-record.md), or [**Deleting Records**](/dynamic-components/component-builder/interactions/variable-operations/delete-record.md) based on the data displayed or entered in these fields. These interactions are most often triggered by clicking an **Avonni Button** component.
{% endhint %}

### **Key Interactions for Record Operations**

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

#### [**Update Record**](/dynamic-components/component-builder/interactions/variable-operations/update-record.md)

* **Use Case:** Use this when you have loaded data into a *specific Record Variable* (using an "[On Load](/dynamic-components/component-builder/on-load-interaction.md)" > "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**](/dynamic-components/component-builder/interactions/variable-operations/create-record.md)

* **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**](/dynamic-components/component-builder/interactions/variable-operations/upsert-record.md)

* **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**](/dynamic-components/component-builder/interactions/variable-operations/delete-record.md)

* **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&#x20;*****before*****&#x20;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.

<figure><img src="/files/fIgAtdQsgmpbNtu38qrk" alt=""><figcaption></figcaption></figure>

***

## Example

**Displaying and Editing Account Name**

1. **Set Target Object:** In your Dynamic Component's settings, set the [**Target Page Name**](/dynamic-components/core-concepts/target-page-object.md) 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 Object API Name set. You can drag and drop those fields to let the users view, edit, and create records.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/fields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.