> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/getting-started/quickstart-guide.md).

# Quickstart Guide

Your reps open an Account and scroll past four related lists to answer one question: how is this customer's pipeline doing? In the next 15 minutes you will fix that with a **Deal Board**: three live numbers, a pipeline they can drag, and a button to start a new deal. No Apex, no LWC, no deployment.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FaK6noqTfu2KRdbI1pyhS%2Fquickstart-hero.png?alt=media" alt="The Lakeshore Cold Chain account page with a Deal Board: three metrics reading $351,000 open pipeline, 5 open deals and $212,000 won, a New Deal button, and a Kanban of the account&#x27;s deals across five stages with a total on each column"><figcaption><p>What you will have at the end: the Deal Board on a real Account page, showing only this account's deals.</p></figcaption></figure>

{% hint style="success" %}

#### **What you will learn**

* How the Component Builder is laid out, and how to drop components on the canvas
* How to connect a component to Salesforce data, filtered to the record the page is showing
* How to make one component refresh others, so the numbers follow what the user does
* How to add a button that opens a Salesforce action, and how to put your component on a Lightning page
  {% endhint %}

{% hint style="info" %}

#### **Before you start**

The **Avonni Experience Components** package is installed (it includes Dynamic Components and the **Avonni Experiences** app), you have a license, and the Avonni Experiences Admin permission set is assigned. If not, the [Installation & Licenses Management](/dynamic-components/getting-started/installation-and-licenses-management.md) page takes about five minutes. You also need a few Opportunities on an Account to see anything move.
{% endhint %}

***

## Build the Deal Board

{% stepper %}
{% step %}

#### Open Avonni Experiences

1. Open the App Launcher, search for **Avonni**, and open **Avonni Experiences**.
2. On the **Home** tab, find the **Dynamic Components** card and click **Get Started**.

You land on the **Dynamic Components** tab, on **All Components**: the list of every component in your org. You can also get there directly from the **Dynamic Components** tab at the top.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbaF1MyshCc9oMG3mNnjp%2Fquickstart-app-home.png?alt=media" alt="The Avonni Experiences home page: Get Started with Avonni Experience Components, and three cards for Dynamic Components, App Builder Components and Experience Site Components, the first with a Get Started button"><figcaption><p>The Avonni Experiences home page. <strong>Get Started</strong> on the Dynamic Components card opens your component list.</p></figcaption></figure>
{% endstep %}

{% step %}

#### Start a blank component

1. Click **New Component** in the top-right of the list.
2. In the dialog, click **Create Blank Component**. The templates underneath are ready-made starting points for later; for this guide, start from scratch.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F2kIktkPbDmJ7MhcX2rAb%2Fquickstart-new-component.png?alt=media" alt="The New Component dialog, with Standard Templates and Custom Templates tabs and a Create Blank Component option above the template list"><figcaption><p>The New Component dialog. Nothing is saved yet: you name the component on its first save, in step 3.</p></figcaption></figure>

The Component Builder opens on an empty canvas. It has three zones you will use in every step:

* **Elements** on the left: every component you can add, grouped by family. Drag one onto the canvas.
* **The canvas** in the middle: what the user will see, as you build it.
* **The properties panel** on the right: the settings of whatever you have selected, in three tabs, **Properties**, **Interactions** and **Style**.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FhMnzQU53YDY41F7X6Ffa%2Fquickstart-builder-anatomy.png?alt=media" alt="The Component Builder: the Elements panel listing Data Display components on the left, a Deal Board card with a New Deal button selected on the canvas, and the Edit Card properties panel on the right"><figcaption><p>The Component Builder after step 3: Elements on the left, the canvas in the middle, the selected Card's properties on the right.</p></figcaption></figure>
{% endstep %}

{% step %}

#### Add a Card and a New Deal button, then save

The [Card](/dynamic-components/components/card.md) is the frame around everything else.

1. Drag a **Card** onto the canvas. Set **Title** to `Deal Board` and **Icon Name** to `standard:opportunity`.
2. Drag a [Button](/dynamic-components/components/button.md) into the Card's header, on the right. Set **Label** to `New Deal`, **Variant** to **Brand** and **Icon Name** to `utility:add`.
3. Open the Button's **Interactions** tab, click **Add Click** and choose **Navigate**:
   * **Page Reference Type**: Object Page
   * **Object Api Name**: Opportunity
   * **Action Name**: New
   * **Prefilled Values**: add **Account ID**, set to the component's **Record Id**

That last line is the small detail users notice: the new Opportunity form opens with the Account already filled in.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FEAv52F86RzEqmQjMkl0i%2Fquickstart-button-navigate.png?alt=media" alt="The Navigate action of the New Deal button: Page Reference Type Object Page, Object Api Name Opportunity, Action Name New, and a prefilled Account ID"><figcaption><p>The <a href="/dynamic-components/component-builder/interactions/navigate.md">Navigate</a> interaction on the button's Click event.</p></figcaption></figure>

4. Click **Save**, top right. Because the component is new, a **New Component** dialog asks for its details:
   * **Label**: `Deal Board`
   * **Name**: `Deal_Board` (letters, numbers and underscores, 30 characters at most)
   * **Target Page Object**: **Account**. This is what gives the component the Id of the Account it sits on, the **Record Id** used in every filter below.
     {% endstep %}

{% step %}

#### Add three live numbers

1. Drag a [Columns](/dynamic-components/components/columns.md) component into the Card. Give it three columns of equal width (size `4` each on large screens).
2. Drag a [Metric](/dynamic-components/components/metric.md) into each column.
3. On the first one, set **API Name** to `OpenPipeline`, **Label** to `Open pipeline`, **Format Style** to **Currency**, then set **Value** to a query:
   * **Object API Name**: Opportunity
   * **Field**: Amount, **Aggregate Function**: Sum
   * **Filters**: **Account ID** equals the component's **Record Id**, and **Closed** equals `false`

Repeat for the other two, changing only what is in this table:

| API Name       | Label         | Field and function | Second filter      |
| -------------- | ------------- | ------------------ | ------------------ |
| `OpenPipeline` | Open pipeline | Amount, Sum        | Closed = false     |
| `OpenDeals`    | Open deals    | Id, Count          | Closed = false     |
| `WonAmount`    | Won           | Amount, Sum        | Stage = Closed Won |

The **Account ID = Record Id** filter is the one to remember. It is how any component on a record page shows that record's data and nothing else.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FY1F7BVaizCSPJ9FCktKz%2Fquickstart-metric-value.png?alt=media" alt="The Edit Metric panel for OpenPipeline: Value summing Opportunity Amount, filtered on Account ID equals the component Record Id and Closed equals false" width="320"><figcaption><p>The first metric: a sum of Amount, filtered on the current Account.</p></figcaption></figure>
{% endstep %}

{% step %}

#### Add the pipeline

1. Drag a [Kanban](/dynamic-components/components/kanban.md) into the Card, under the metrics. Set its **API Name** to `DealKanban` and **Variant** to **Path**.
2. Under **Data Source**, choose **Query** and create a new one, `Account Deals`:
   * **Object API Name**: Opportunity
   * **Filters**: **Account ID** equals **Record Id**, and **Stage** not equals `Closed Lost`
   * **Order By**: Amount, descending. **Maximum Number of Records**: 50

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FgsZXqgkts3pKcj9704ur%2Fquickstart-kanban-query.png?alt=media" alt="The query editor for Account Deals: Opportunity, filtered on Account ID equals the component Record Id and Stage not equal to Closed Lost, ordered by Amount descending, 50 records maximum"><figcaption><p>The <a href="/dynamic-components/component-builder/data-sources/query.md">Query</a> behind the board. Same Record Id filter as the metrics.</p></figcaption></figure>

3. In **Data Mappings**, tell the board how to read an Opportunity:
   * **Key Field**: Id. **Group Field Name**: Stage.
   * **Group Summaries**: Amount, Sum. That is the total at the top of each column.
   * On the card: **Title** = Name, and Amount as a card field.
4. Under **Column Order Direction**, choose **Custom** and list the stages you want to see, in order, from Qualification to Closed Won.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FpQEnQx2H4gXpMCbL1GeA%2Fquickstart-kanban-mapping.png?alt=media" alt="The Edit Kanban panel: Data Source set to Query with the Account Deals records, Key Field Id, Group Field Name Stage, and a Group Summary of Amount with Sum" width="320"><figcaption><p>The data source and the mappings that turn Opportunities into columns and cards.</p></figcaption></figure>
{% endstep %}

{% step %}

#### Make the numbers follow the board

Dragging a card to another column saves the new Stage on the Opportunity straight away. The metrics do not know that yet: a query runs when the component loads, not every time a record changes. One interaction closes the gap.

1. Select the Kanban and open its **Interactions** tab.
2. Under **Item Drop**, add a [Refresh Query](/dynamic-components/component-builder/interactions/refresh-query.md) and pick **Current Component**, `OpenPipeline`, `OpenDeals` and `WonAmount`.
3. *(Optional)* Under **Item Click**, add Navigate to the Opportunity's record page so clicking a card opens the deal.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FwdzqZMmkwAPd8kDyJl0W%2Fquickstart-kanban-refresh.png?alt=media" alt="The Refresh Query action on the Kanban&#x27;s Item Drop event, refreshing Current Component, OpenPipeline, OpenDeals and WonAmount"><figcaption><p>One drop, four refreshes: the board itself and the three metrics.</p></figcaption></figure>

{% hint style="info" %}
This is the pattern you will reuse most: **an event on one component, a Refresh Query on the others.** Refreshing the Kanban too matters. If a validation rule refuses the move, the re-read puts the card back where the record really is.
{% endhint %}
{% endstep %}

{% step %}

#### Check it on a real Account

The canvas in edit mode has no record behind it, so it shows every account's deals. Preview can borrow a real one.

1. Click **Save**, then **Preview**.
2. Open the **Debug Details** panel (the icon at the far right of the header). Under **Target Object**, pick an Account that has open Opportunities, then click **Save** in the panel.

The board now shows that account's deals and numbers, exactly as a user will see them. Try the drag here before you publish anything.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FtGq2lDWVxmlhhX2LRWbg%2Fquickstart-preview.png?alt=media" alt="The Deal Board in Preview mode, with Lakeshore Cold Chain picked as the Target Object in the Debug Details panel: $351,000 open pipeline, 5 open deals, $212,000 won, and the account&#x27;s deals across five stages"><figcaption><p>Preview with an Account picked under <strong>Target Object</strong>: the builder now shows that account's data.</p></figcaption></figure>
{% endstep %}

{% step %}

#### Activate it and add it to the Account page

1. Back in the builder, click **Activate**. Inactive components don't show up in Lightning App Builder.
2. Open any Account, click the **Setup** gear and choose **Edit Page**.
3. In the **Components** panel, search for `Dynamic`. Under **Custom - Managed**, drag **AX - Dynamic Component** onto the page.
4. In its properties on the right, pick `Deal_Board` from the list.
5. Click **Save**, then **Activation** if the page is not assigned yet.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F3ejSUpDb3QLPqDrruPUn%2Fquickstart-app-builder.png?alt=media" alt="Lightning App Builder on an Account page: the component search filtered on Dynamic, showing AX - Dynamic Component under Custom - Managed, and the Deal Board rendered on the page canvas with live data"><figcaption><p>The Deal Board in Lightning App Builder, already showing the Account's live data.</p></figcaption></figure>

{% hint style="warning" %}
On the standalone Dynamic Components package, the component is called **Avonni Dynamic Component** instead. More on this in [Publishing your Dynamic Components](/dynamic-components/core-concepts/publishing-your-dynamic-components.md).
{% endhint %}
{% endstep %}
{% endstepper %}

***

## Try it

Open an Account with a few open deals and drag one card to **Closed Won**. The column totals move, and the three numbers above update without a page reload: on the account below, closing the $36,000 deal takes Open pipeline from $351,000 to $315,000, Open deals from 5 to 4, and Won from $212,000 to $248,000.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FNzOM5bpgtMTaDkMxhpUM%2Fquickstart-deal-board.png?alt=media" alt="The finished Deal Board: Open pipeline $351,000, Open deals 5, Won $212,000, and a Kanban with Qualification $48,000, Needs Analysis $126,000, Proposal/Price Quote $141,000, Negotiation/Review $36,000 and Closed Won $212,000"><figcaption><p>The finished Deal Board. Each column total is the sum of the cards under it.</p></figcaption></figure>

## What you just used

Four ideas carry almost everything you will build with Dynamic Components, and this board used all four.

| Idea             | Here                            | Reuse it for                                          |
| ---------------- | ------------------------------- | ----------------------------------------------------- |
| **Layout**       | Card, Columns                   | Any panel, form or dashboard                          |
| **Data**         | Query filtered on the Record Id | Anything related to the record on the page            |
| **Display**      | Metric, Kanban                  | Data Table, Map, Calendar, Chart, Scheduler, and more |
| **Interactions** | Navigate, Refresh Query         | Opening flows, creating records, showing toasts       |

Because it runs on the Lightning platform, the board respects field-level security and sharing rules, and renders in native SLDS styling.

## If something looks wrong

| What you see                                      | Likely cause                                                        | Fix                                                                                 |
| ------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| The component is not in Lightning App Builder     | It was saved but not activated                                      | Open it from **Avonni Experiences**, **Dynamic Components**, and click **Activate** |
| The builder canvas shows deals from every account | In edit mode the builder has no record, so Record Id is empty       | Use **Preview** and pick an Account under **Debug Details**, as in step 7           |
| The metrics do not change after a drag            | The Item Drop interaction is missing, or does not list the metrics  | Check **Item Drop** on the Kanban lists all three metric API Names                  |
| The board is empty on the page                    | The Account has no open Opportunities, or the user cannot read them | Add a test Opportunity, or check the user's access to Opportunity                   |

Still stuck? The [Troubleshooting & FAQ](/dynamic-components/resources/troubleshooting-and-faq.md) page has more answers.

## Keep going

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4>Tour the Component Builder</h4></td><td>The canvas, the component tree, the property panels, and saving.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FYGuKS5zybFSFQsJ5TBx0%2Fquickstart-cover-builder.png?alt=media">https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FYGuKS5zybFSFQsJ5TBx0%2Fquickstart-cover-builder.png?alt=media</a></td><td><a href="/dynamic-components/core-concepts/component-builder-overview.md">Component Builder Overview</a></td></tr><tr><td><h4>Connect any data</h4></td><td>Queries, filters, sorting and the Record Id, in depth.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbMYX3XqSEkkw6d6xMY9q%2Fquickstart-cover-query.png?alt=media">https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbMYX3XqSEkkw6d6xMY9q%2Fquickstart-cover-query.png?alt=media</a></td><td><a href="/dynamic-components/component-builder/data-sources/query.md">Query</a></td></tr><tr><td><h4>Wire interactions</h4></td><td>Open a flow, create a record, refresh a query, show a toast. No code.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F4gQCg0ohFtFuNUNQ0Zik%2Fquickstart-cover-interactions.png?alt=media">https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F4gQCg0ohFtFuNUNQ0Zik%2Fquickstart-cover-interactions.png?alt=media</a></td><td><a href="/dynamic-components/component-builder/interactions.md">Interactions</a></td></tr><tr><td><h4>Go further with Kanban</h4></td><td>Swimlanes, filters, card actions and several totals per column.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbFBUVdIYW6Bf2IcZEZ58%2Fquickstart-cover-kanban.png?alt=media">https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbFBUVdIYW6Bf2IcZEZ58%2Fquickstart-cover-kanban.png?alt=media</a></td><td><a href="/dynamic-components/components/kanban.md">Kanban</a></td></tr><tr><td><h4>Build it with AI</h4></td><td>Describe the component in a sentence and let your assistant build it.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FkGM105Bwz32Els9Y6i1s%2Fquickstart-cover-ai.png?alt=media">https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FkGM105Bwz32Els9Y6i1s%2Fquickstart-cover-ai.png?alt=media</a></td><td><a href="/dynamic-components/build-with-ai/prompt-library.md">Prompt Library</a></td></tr><tr><td><h4>Follow a full project</h4></td><td>Boards, dispatch timelines and record pages, built step by step.</td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FGaRaxDuCAv0lSAEcL5Up%2Fprojects-boards-and-pipelines.png?alt=media">https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FGaRaxDuCAv0lSAEcL5Up%2Fprojects-boards-and-pipelines.png?alt=media</a></td><td><a href="https://docs.avonnicomponents.com/projects">https://docs.avonnicomponents.com/projects</a></td></tr></tbody></table>

{% embed url="<https://www.youtube.com/watch?v=lFqIY9TWvJM>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.