Quickstart Guide

Overview

In this tutorial, you'll create a working "My Active Opportunities" component with a data table, metrics, and a button to create new records—all without writing code.

What you'll build: A Card displaying active opportunities in a data table, with three metrics that update based on your row selection, plus a "New Opportunity" button.

Time: ~15 minutes

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.

---

Guided Steps

Before You Begin: Installation and Setup

Make sure you've completed these steps before creating components:

Install: Install the Avonni Experiences Components package from the AppExchange.

Licenses: Assign licenses to users who will build or use the components through Setup > Installed Packages.

Permissions: Assign the appropriate permission sets:

• Avonni Dynamic Components User: For end-users who need to use Dynamic Components.

• Avonni Experience Cloud Components User: For end-users who need to use App Builder and Experience Site Components.

• Avonni Experiences Admin: For component builders.

See the Installation Page for more details

Important requirement

To successfully install the Avonni Dynamic Components Package, please enable Lightning Web Security in your org.

1

Create a New Component

1. Open the Avonni Experiences app from the Salesforce App Launcher.

2. On the All Components page, click New.

3. Enter a name (e.g., MyActiveOpportunities) and an optional description.

4. Click Save

2

Add a Card

The Card component serves as the container for everything else.

1. From the Component Library, drag a Card onto the canvas.

2. Select the Card and open the Properties Panel.

3. Set Title to My Active Opportunities.

4. (Optional) Add an icon using the Icon Name property, or adjust colors in the Style tab.

3

Add a "New Opportunity" Button

1. Drag a Button component into the Card's header area.

2. In the Properties Panel, configure:

   • Label: New Opportunity

   • Variant: Choose a style (e.g., Brand, Neutral)

   • (Optional) Add an icon

3. Click Add Interaction and select On Click.

4. Set the action to Navigate to Object Page and choose Opportunity → New Record.

4

Add a Data Table

1. Drag a Data Table into the Card, below the header.

2. In the Properties Panel, set Data Source to Avonni Query Data Source.

3. Configure the query:

   • Object: Opportunity

   • Filter: StageName not in Closed Won, Closed Lost

4. Under Columns, select the fields to display (e.g., Name, StageName, Amount).

5

Add a Columns layout for metrics

1. Drag a Columns component into the Card, above the Data Table.

2. Click the + button three times to create three columns.

3. In the Properties Panel, set each column:

   • Size: 4

   • Horizontal Align: Center

This creates three equal-width columns to hold your metrics.

6

Add Metric components

• From the Component Library, drag a Metric into the first column.

• Use Copy/Paste to duplicate it into the second and third columns quickly

7

Configure reactive metrics

Each metric will show a sum based on the rows selected in the Data Table.

To configure the first metric:

1. Select the Metric and set Data Source to Query Data Source.

2. Configure the query:

   • Object: Opportunity

   • Fields: Amount only

   • Aggregate Function: SUM

3. Add a Reactive Filter:

   • Field: AccountId

   • Operator: in

   • Value: !YourDataTableApiName.selectedRowsKeyValue (Replace YourDataTableApiName with your Data Table's actual API Name)

4. Set the Label to Total Amount.

5. Adjust formatting as needed (currency, decimals, etc.).

Repeat for the other two metrics, changing the Label and aggregate function (e.g., COUNT, AVG).

8

Style the metrics

(Optional) Use the Style tab to customize colors, fonts, and spacing for each Metric component.

9

Activate and add to a page

Your component is built. Now let's make it visible to users.

Activate the component

1. In the Avonni Dynamic Components app, make sure your component is set to Active. (Only active components appear in the Lightning App Builder.)

Add it to a Salesforce page

1. Navigate to the page where you want the component (e.g., an Account record page).

2. Click the Setup gear → Edit Page to open Lightning App Builder.

3. In the left panel, scroll to the Custom section.

4. Drag the AX - Dynamic Components onto the page layout.

5. In the right panel, select your specific component from the dropdown.

6. Click Save, then Activate (if prompted).

---

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 Projects

Next Steps:

• Explore the full component library to see what's possible

• Join our Trailblazer Community to see what others are building

Stuck or Have Questions?

If you ran into any issues during this tutorial or want to show off what you built:

Join our Trailblazer Community Group where you can:

• Share screenshots of your component for feedback

• See variations of this tutorial that others have created

• Ask questions about the next steps in your learning journey

• Get inspiration for your next Dynamic Component project

Many builders share their first components in the community—it's a great way to get encouragement and learn from others who are on the same journey!