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

<figure><img src="/files/L0syf2A1B7BCdJLDxCY3" alt=""><figcaption></figcaption></figure>

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

### **What You'll Learn** <a href="#what-youll-learn" id="what-youll-learn"></a>

* 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

{% hint style="danger" %}

#### **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**](/dynamic-components/getting-started/installation-and-licenses-management.md) for full instructions.

**Lightning Web Security must be enabled** in your org for the package to install correctly.
{% endhint %}

{% stepper %}
{% step %}

#### **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**

{% @arcade/embed flowId="O5MiXDuWghYgQ8CQEC8H" url="<https://app.arcade.software/share/O5MiXDuWghYgQ8CQEC8H>" %}
{% endstep %}

{% step %}

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

{% @arcade/embed flowId="lCPyqdtOMHvSUHoQkuLx" url="<https://app.arcade.software/share/lCPyqdtOMHvSUHoQkuLx>" %}
{% endstep %}

{% step %}

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

{% @arcade/embed flowId="KBFka4j9JkCeBNmwGkuO" url="<https://app.arcade.software/share/KBFka4j9JkCeBNmwGkuO>" %}
{% endstep %}

{% step %}

#### **Add a Data Table**

1. Drag a [**Data Table**](/dynamic-components/components/data-table.md) 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).

{% @arcade/embed flowId="PpwZkvpCUumwIPsupSox" url="<https://app.arcade.software/share/PpwZkvpCUumwIPsupSox>" %}
{% endstep %}

{% step %}

#### Add a Columns layout for metrics

1. Drag a [**Columns**](/dynamic-components/components/columns.md) 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.

{% @arcade/embed flowId="OdU4RL6LI4ZHAAW8EbjQ" url="<https://app.arcade.software/share/OdU4RL6LI4ZHAAW8EbjQ>" %}
{% endstep %}

{% step %}

#### Add Metric components

* From the Component Library, drag a [**Metric**](/dynamic-components/components/metric.md) into the first column.
* Use **Copy/Paste** to duplicate it into the second and third columns quickly

{% @arcade/embed flowId="t28GPf7aEZCpQ1mTOrWy" url="<https://app.arcade.software/share/t28GPf7aEZCpQ1mTOrWy>" %}
{% endstep %}

{% step %}

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

{% @arcade/embed flowId="Awvv15NbTFcaqacdf4yu" url="<https://app.arcade.software/share/Awvv15NbTFcaqacdf4yu>" %}
{% endstep %}

{% step %}

#### Style the metrics

*(Optional)* Use the Style tab to customize colors, fonts, and spacing for each Metric component.
{% endstep %}

{% step %}

#### Activate and add to a page

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

{% hint style="warning" %}

#### **Components that aren't deployed don't appear in Lightning App Builder.**&#x20;

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

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

{% @arcade/embed flowId="ApD2Sr11jVEcRTrWEvUh" url="<https://app.arcade.software/share/ApD2Sr11jVEcRTrWEvUh>" %}
{% endstep %}
{% endstepper %}

***

## 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](https://trailhead.salesforce.com/trailblazer-community) — share screenshots of your build, get help from other builders, and see what others have done starting from this same tutorial.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/getting-started/quickstart-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.