Quickstart Tutorial
Overview
This tutorial guides you through creating a "My Active Opportunities" component. You'll learn to combine a Card, Data Table, and reactive Metrics to display a filtered list of active Opportunities and key summary information. This demonstrates core Avonni Dynamic Components skills, all without code.

What You'll Learn
Dragging and dropping components.
Connecting to Salesforce data (Opportunities).
Creating reactive components (Metrics that update based on Data Table selections).
Basic component configuration.
This example is designed to be a gentle introduction. While it's not the most complex component you can build, it will demonstrate core concepts you can apply to create more robust solutions.
Guided Steps
Before You Begin: Installation and Setup
Make sure you've completed these steps before creating components:
Install: Install the Avonni Dynamic Components package from the AppExchange.
Licenses: Assign licenses to users who will build or use the components (usually via the License Management Application).
Permissions: Assign the appropriate permission sets:
Avonni Dynamic Components User
: For end-users.Avonni Dynamic Components Admin
: For component builders.See this page for more details.
Important requirement
To successfully install the Avonni Dynamic Components Package, please enable Lightning Web Security in your org.
Step 1: Create a New Dynamic Component
Start by opening the Avonni Components app from the Salesforce App Launcher. Then, on the "All Components
" page, click "New
" to create a new Dynamic Component. Give your component a descriptive name (e.g., "MyActiveOpportunities") and an optional description.
Step 2: Add and Customize the Card Component
Drag a Card component from the Component Library onto the canvas.
Select the Card, and set it
Title
to "My Active Opportunities" in the Properties Panel.Optionally, add an icon using the
Icon Name
property, or adjust the styling using the Style tab,
Step 3: Add and Configure the "New Opportunity" Button
Add a Button component to the Card's header. In the Properties Panel
Set the Button's
Label
to "New Opportunity"Choose a
Variant
, and optionally add an icon.Then, add an "On Click" interaction to the Button. Configure the interaction to
Navigate
to theObject Page
for a newOpportunity
record.
Step 4: Add and Configure the Data Table
Add an Avonni Data Table component inside the Card, below the header.
In the Properties Panel, set the
Data Source
toAvonni Query Data Source
, and create a query to retrieveOpportunity
records.Filter the query to show only active opportunities (e.g.,
StageName not in 'Closed Won, Closed Lost'
).Finally, configure the Data Table's
Columns
to display the desired fields. Select the fields you'd like to see, like the name, the stage, and the amount.
Step 5: Add and Configure the Columns Component
Add a Columns component from the Component Library above the Data Table, inside the Card. This will hold our Metrics.
Click on the plus button three times to create three columns.
Then, in the Properties Panel, set each column
Size
to4
andHorizontal Align
tox-small
for equal widths and spacing.
Step 6: Add Metric Components
We'll add placeholder Metric components to the three columns we created. Find the Metric component From the Component Library and drag one instance into each column within the Columns component.
You can use the copy and paste buttons to speed up the process of building multiple identical components. This will help you build your components more quickly.
Step 7: Configuring the Metric component to display data.
Configure the Metric components to show reactive sums based on the Data Table selection. We'll set up one Metric and repeat for the others.
Select a Metric component.
Set Data Source to
Avonni Query Data Source
. Create a query:Object:
Opportunity
Fields: Only select
Amount
.Aggregate Function:
SUM
Add a reactive filter to the query:
Field:
AccountId
Operator:
in
Value:
!DataTableApiName.selectedRowsKeyValue
(replaceDataTableApiName
with your Data Table's API Name).
Set the Metric's
Label
(e.g., "Total Amount") and adjust formatting.Repeat for the other Metrics, changing the
Label
and aggregate function as needed.
Step 8: Style the metric component
Step 9: Activate and Add Your Dynamic Component to a Page
Congratulations! You've built your first Avonni Dynamic Component. Now, let's activate it and add it to a Salesforce page so users can see it.
Activate the Component
Make sure your Avonni Dynamic Component is activated. Only activated components can be added to pages.
Go to the Target Page
In Salesforce, navigate to the specific App Page or Record Page where you want to display your new component. For example, you might open a specific Account record to the "Accounts" tab.
Open Lightning App Builder
Click the Setup gear icon (usually in the top-right corner of Salesforce).
Select Edit Page. This opens the Lightning App Builder, where you can customize the page layout.
Find Your Component
Look at the left-hand panel in the Lightning App Builder, which lists available components.
Scroll down to the Custom section. Your Avonni Dynamic Component will be listed here.
Drag and Drop
Click and drag your Avonni Dynamic Component from the list onto the desired location on the page layout. You can place it in any of the designated component regions.
Confirm Selection
Once the component is placed, a properties panel will appear on the right side of the App Builder. Select the specific Avonni Dynamic Component you want to display in the available list. This ensures the correct component is loaded, especially if you have multiple Avonni components with similar names.
Save and Activate the Page (Important!):
Click Save in the App Builder.
Take Your Skills to the Next Level!
Congratulations! You've finished the quick start and have a working Avonni Dynamic Components. Now it's time to explore the full range of features.
Check out our guided projects to become a master builder 👇
Avonni ProjectsLast updated
Was this helpful?