Last updated
Was this helpful?
This section introduces the core concepts and features you need to get started with building Avonni Dynamic Components.
The Component Builder is your visual design environment. Here's a quick overview:
Canvas (Center): Your main design workspace where you arrange and nest components.
Left Panel (Components & Resources): Access the Component Library (for adding components and binding Fields), manage Resources (Variables, Constants, Formulas, Queries), view the Component Structure, and manage Interactions and Styles.
Properties Panel (Right): Context-sensitive settings appear here when you select a component on the canvas, allowing you to customize its appearance, behavior, and data connections.
Top Bar: Contains essential functions like Undo/Redo, access to Settings (including Target Page Object), Preview, and Save
The Target Page Object setting (found in the Component Builder's Settings) is essential for telling your Dynamic Component which primary Salesforce object it relates to (e.g., Account, Contact, Opportunity). Setting this correctly unlocks key data access features:
Enables the Fields Tab: Fields from the selected object become available in the Component Library's Fields tab, ready to be dragged onto your canvas.
Provides Current Record Data (on Record Pages): When your component is placed on a record page that matches the Target Page Object (e.g., setting 'Account' and placing it on an Account page), the $Component.record variable automatically provides access to the current record's data. You can then display fields like $Component.record.Name or $Component.record.Industry. The record's ID is available via $Component.record.Id.
Simplifies Related Data Display: Knowing the primary object and having access to the current record's ID (via $Component.record.Id) makes it much easier to configure queries or filters to show related records (e.g., Contacts related to the current Account).
Guidance: For optimal performance, it's recommended that you align this setting with the page's object on record pages. This ensures the component displays data relevant to the current record.
Learn more by clicking on the link below 👇
When working with the Avonni Dynamic Components, you can access global variables and map their values to specific component attributes to make your dynamic components even more powerful and adaptable to your needs.
$API: context information.
$Component: Component-specific context, $Component.record which holds the current record's data when the Target Page Object is set on a record page.
$Organization: Details about the current Salesforce org.
$Profile: Details about the current user's profile.
$System: System-related information.
$User: Details about the current user (e.g., $User.Id, $User.FirstName)
Avonni Dynamic Components allow you to create interactive experiences through reactivity. This means components can automatically respond to changes in data or user selections in other components.
The Core Mechanism: Direct Attribute Referencing
Reactivity is achieved by binding properties or data source filters to attributes of other components.
What you do: When configuring a component's property (like Visible or Value) or setting up a dynamic filter in a data source, use the resource selector. Instead of choosing a static value or a variable, select Component Attribute. Then, pick the component and the specific attribute (like firstSelectedRow.Id or value) you want to reference.
What happens: This creates a direct link. Whenever the referenced attribute changes on the source component, the property or filter you configured automatically updates, which, in turn, updates the target component's display or data. This replaces the need for complex formulas often.
To make a Text component display the name of the currently selected Account in a Data Table named Datatable1, you would bind the Text component's Value property to:
!Datatable1.firstSelectedRow.Name
When the user selects a different row in the AccountsTable, the Text component will automatically update to display the new Account's name.
Learn More 👇
Control when components appear using the Visible property in the Properties Panel. You can set it always to show (true) or always hide (false). For dynamic control, bind the Visible property to a Boolean Variable, Formula, or Component Attribute. This allows you to show or hide components based on data or user interactions. Hidden components aren't loaded, which boosts performance.
Learn more by clicking on the link below 👇
Ready to see your dynamic component in action? This simple process will allow you to publish your component and add it to any Lightning App or Record Page, making it visible and interactive for your users.
Save your Dynamic Component.
Activate it (using the Activate button in the Component Builder).
Add to a Page:
Open the Lightning App Builder for the desired App or Record Page.
Find your Dynamic Component under "Custom - Managed" in the component list.
Drag and drop it onto the page.
Configure any page-level properties if needed.
Save and activate the page.
Avonni Dynamic Components: These are used to build reusable UI elements directly on App & Record Pages.
Avonni Components for Flows: These enhance screens within Salesforce Flows.
To learn more about the differences and choose the right tool for your needs 👇
You might be familiar with Avonni's other offering, . It's important to understand that these are separate products designed for different purposes:
