Last updated
Was this helpful?
The Avonni Dynamic Components Package provide a powerful way to display and interact with Salesforce data directly on your App & Record Pages. To access data fields within your Dynamic Component, you'll use the Fields tab in conjunction with either the Target Object API Name setting or a Record Variable of the appropriate object type
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: Allow users to enter or modify field values.
Trigger Actions: Use record data in interactions (e.g., passing a record ID to a Flow).
The Fields tab provides a convenient way to add data-bound components to your canvas. To populate the Fields tab, you have two options:
Click the Settings icon (top-left of the Component Builder).
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.
Open the Component Library (left panel) and click the Fields tab. You'll now see a list of fields from the selected object.
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.
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.
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.) Alternatively, a parent component could pass a record into this component via an input variable.
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.
When you drag fields, the created component is bound to your Record Variable.
$Component.record VariableWhen 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, on an account record page, $Component.record.Name the account's name would be held.
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.
The Avonni Dynamic Components provide interactions for directly manipulating Salesforce records:
Create from Record Variable: Creates a new Salesforce record based on the data in a Record Variable. You would typically populate the Record Variable's fields using input components, and then trigger this action with a button (e.g., a "Create" or "Save" button).
Update from Record Variable: Updates an existing Salesforce record with the data in a Record Variable. You would typically load the existing record data into the variable (using an "On Load" interaction and a query), allow the user to modify the fields (bound to input components), and then trigger this action.
Upsert from Record Variable: Updates a record or create it if not existing.
Delete from Record Variable: Deletes a Salesforce record. The Record Variable should contain the ID of the record to delete. Use this with caution! It's often best to use a Confirm interaction before a Delete interaction.
Set Target Object: In your Dynamic Component's settings, set the Target Object API Name to Account.
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.
Add a Button: Drag a Button component onto the canvas. Label it "Save".
Add an "On Click" Interaction to the Button:
Select the Button.
Go to the Interactions panel.
Add an "On Click" interaction.
Action Type: Choose Save Record.
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.
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 record
