Quickstart Guide

Overview

You're about to build a live, reactive Salesforce dashboard component in 15 minutes — no Apex, no LWC, no test classes, no deployment pipeline. Just drag, configure, ship.

By the end of this tutorial, you'll have a working My Active Opportunities component sitting on an Account record page, with a Data Table, three metrics that recalculate as you click rows, and a button that creates new Opportunities.

Time: ~15 minutes Skill level: No code experience required.

What You'll Learn

• How the Avonni builder works — Component Library, Canvas, and Properties Panel.

• How to connect any component to live Salesforce data using the Avonni Query Data Source.

• The reactive pattern: making one component listen to another. This is the moment most builders say "oh, that's what this tool does."

• How to wire a button to a Salesforce action without code.

• How to deploy your component to a Lightning Page

---

Guided Steps

Prerequisites

Make sure your org has the Avonni Dynamic Components package installed, licenses assigned, and the Avonni Experiences Admin permission set assigned to your user. Setup takes about 5 minutes — see the Installation page for full instructions.

Lightning Web Security must be enabled in your org for the package to install correctly.

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.

Components that aren't deployed don't appear in Lightning App Builder.

If you can't find your component in the next step, this is almost always why.

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

---

What You Just Built

In 15 minutes, you built a Salesforce component that traditionally requires:

• An Apex controller with secure SOQL.

• A Lightning Web Component (HTML, JS, CSS, meta XML).

• Test classes with at least 75% coverage.

• A managed deployment pipeline.

Lines of code you wrote: zero.

Because Avonni Dynamic Components run natively on the Lightning platform, your component:

• Respects field-level security and sharing rules automatically.

• Renders with native SLDS styling.

• Works on Lightning Pages today, and on Flow Screens or Experience Cloud sites with the matching Avonni packages — same builder, same components, same skills.

What Else Can You Build

The reactive pattern you just learned applies across the Avonni component library. A few directions to explore next:

Component	What you can build
Drag-and-drop Kanban	Update Opportunity stages by dragging cards between columns.
Resource Scheduler	Book appointments and reassign resources by drag-and-drop.
Reactive Map	Plot Accounts on a map filtered by a Data Table or a search input.
Threaded Chat	Build a Slack-style discussion on any record using CaseComment or a custom object.
Multi-step Wizard	Collect input across multiple screens, branch on conditions, write back to Salesforce.
Charts and Dashboards	Bar, line, donut — all reactive to filters, selections, and record context.

Stuck or Have Questions?

Most issues with this tutorial trace back to one of three causes:

Problem	Cause	Fix
Component doesn't appear in Lightning App Builder	The component was saved but not deployed.	Open the component in the Avonni Experiences app and click Deploy.
Metrics show no data when rows are selected in the Data Table	The Reactive Filter Value doesn't match the Data Table's actual API Name, or the Data Table key field isn't Id.	Re-check the Data Table's API Name in its Properties Panel and set the Metric filter Value to !{exactApiName}.selectedRowsKeyValue.
Button doesn't open the New Opportunity page	The On Click Interaction was added but the component wasn't saved after, or the action target wasn't selected.	Reopen the Button's Interactions tab, confirm the On Click → Navigate to Object Page → Opportunity → New Record action is set, then save.
Data Table shows no rows	The org has no open Opportunities, or the running user lacks access to the Opportunity object.	Create a test Opportunity, or check the user's profile and permission sets.

Still stuck? Join the Avonni Trailblazer Community — share screenshots of your build, get help from other builders, and see what others have done starting from this same tutorial.