Quickstart Guide

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 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.

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 the Object Page for a new Opportunity 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 to Avonni Query Data Source, and create a query to retrieve Opportunity 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 to 4 and Horizontal Align to x-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.

1. Select a Metric component.

2. Set Data Source to Avonni Query Data Source. Create a query:

   • Object: Opportunity

   • Fields: Only select Amount.

   • Aggregate Function: SUM

3. Add a reactive filter to the query:

   • Field: AccountId

   • Operator: in

   • Value: !DataTableApiName.selectedRowsKeyValue (replace DataTableApiName with your Data Table's API Name).

4. Set the Metric's Label (e.g., "Total Amount") and adjust formatting.

5. 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.

1. Activate the Component

   • Make sure your Avonni Dynamic Component is activated. Only activated components can be added to pages.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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 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!