> 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/projects/dynamic-components/fundamentals/my-active-opportunities.md).
# My Active Opportunities
{% hint style="warning" %}
This tutorial requires installing [**the Avonni Dynamic Components Package**](https://appexchange.salesforce.com/appxListingDetail?listingId=e855ec28-bf2c-47fa-aa38-30b43948ab4f) on your Salesforce org.
{% endhint %}
## Build Your First Avonni Dynamic Component
This tutorial guides you through creating a "My Active Opportunities" component. You'll learn to combine a [Card](/dynamic-components/components/card.md), [Data Table](/dynamic-components/components/data-table.md), and *reactive* [Metrics](broken://spaces/ODPvvv7Cx9Z9RECLn3oV/pages/UfX8lhMqduOyJfZH8OcF) 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 Dynamic Components package from the AppExchange.
* **Licenses:** Assign licenses to users who will build or use the components (usually via the License Management Application).
* **Permissions:** Assign the appropriate permission sets:
* `Avonni Dynamic Components User`: For end-users.
* `Avonni Dynamic Components Admin`: For component builders.
* [See this page](https://open.gitbook.com/~site/site_CtceO/~/revisions/spftJcbW4O7tpo031bwY/getting-started/installation-and-licenses-management) for more details.
### Important requirement
To successfully install the Avonni Dynamic Components Package, please [enable Lightning Web Security](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-enable.html) in your org.
### **Step 1: Create a New Dynamic Component**
1. **Open the Avonni Components App:** From the Salesforce App Launcher (the nine-dot grid), find and open the "Avonni Components" application. *Note: Ensure the Avonni Dynamic Components package is installed in your Salesforce org.*
2. **Create a New Component:** On the "All Components" page (or similar), click the **New** button.
3. **Name Your Component:** Enter a descriptive name for your component (e.g., "MyActiveOpportunities"). You can add an optional description as well.
{% @arcade/embed flowId="O5MiXDuWghYgQ8CQEC8H" url="" %}
### **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.
{% @arcade/embed flowId="lCPyqdtOMHvSUHoQkuLx" url="" %}
### **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.
{% @arcade/embed flowId="KBFka4j9JkCeBNmwGkuO" url="" %}
### **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
{% @arcade/embed flowId="PpwZkvpCUumwIPsupSox" url="" %}
### **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.
{% @arcade/embed flowId="OdU4RL6LI4ZHAAW8EbjQ" url="" %}
### **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.
{% @arcade/embed flowId="t28GPf7aEZCpQ1mTOrWy" url="" %}
### 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
{% @arcade/embed flowId="Awvv15NbTFcaqacdf4yu" url="" %}
### Step 8: Style the metric component
{% @arcade/embed flowId="6YjbZYalDdyJAcW3asmJ" url="" %}
### 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
{% @arcade/embed flowId="ApD2Sr11jVEcRTrWEvUh" url="" %}
---
# 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/projects/dynamic-components/fundamentals/my-active-opportunities.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.