Fields

The Avonni Dynamic Components Package provides a powerful way to display and interact with Salesforce data directly on your App & Record Pages. To access data fields within your Dynamic Component, use the Fields tab with either the Target Object API Name setting or a Record Variable of the appropriate object type.

Overview

The Fields tab lets you easily add Salesforce fields to your components, creating data-bound elements without writing code. You can:

• Display Record Data: Show field values from a specific Salesforce record.

• Enable Data Input/Editing: Users can enter or modify field values.

• Trigger Actions: Use record data in interactions (e.g., passing a record ID to a Flow).

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 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" 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 Object API Name, Avonni Dynamic Components automatically make 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 like 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 from Record Variable:

  • 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 from Record Variable:

  • Use Case: Use this to create a new Salesforce record using data users have 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 from Record Variable:

  • 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 from Record Variable:

  • 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 Target Object: In your Dynamic Component's settings, set the Target Page Name 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 from Record Variable 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.