# Overview

## Building Basics Components

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>My Active Opportunities</strong></td><td>Combine a Card, Data Table, and reactive Metrics to create a "My Active Opportunities" view.</td><td><a href="/files/jkmtA6oUWX8dqoYs8MfM">/files/jkmtA6oUWX8dqoYs8MfM</a></td><td><a href="/pages/aAAgjxX84shMfLNw3hrR">/pages/aAAgjxX84shMfLNw3hrR</a></td></tr><tr><td><strong>Enhanced Related List</strong></td><td>Replace standard lists with an Avonni Data Table, adding custom actions, advanced filters, search, and inline editing.</td><td><a href="/files/ICazvab4sYbf3VXOuDGm">/files/ICazvab4sYbf3VXOuDGm</a></td><td><a href="/pages/f5TBoDohDO8Vc1LHG8wd">/pages/f5TBoDohDO8Vc1LHG8wd</a></td></tr><tr><td><strong>How to Use Avatars as Quick Links to Related Records</strong></td><td>Learn how to use the Avonni Avatars link to related records in sidebar.</td><td><a href="/files/fg1eOEHzSkqMbvdhZcyw">/files/fg1eOEHzSkqMbvdhZcyw</a></td><td><a href="/pages/4QfkYfijhKkWfbryi0DM">/pages/4QfkYfijhKkWfbryi0DM</a></td></tr></tbody></table>

## Working with Data&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Related Contacts Card</strong></td><td>This guide uses the Avonni List and Card components, demonstrating how to query and filter Contacts using the current Account's context.</td><td><a href="/files/w84NIJy3zpJsaGcgbxlu">/files/w84NIJy3zpJsaGcgbxlu</a></td><td><a href="/pages/0NOtwthPvM8Tj28OzjDE">/pages/0NOtwthPvM8Tj28OzjDE</a></td></tr><tr><td><strong>User Activity Report</strong></td><td>Learn how to use a Combobox to select a user and dynamically update  Metrics, a Map of account locations, and a Data Table of activities.</td><td><a href="/files/YMexZbl52au37tNBHb4B">/files/YMexZbl52au37tNBHb4B</a></td><td><a href="/pages/9sEBLKlcd755E6HDFStc">/pages/9sEBLKlcd755E6HDFStc</a></td></tr><tr><td><strong>Build a "Quick Lead" Entry Form</strong></td><td>Learn to build a no-code quick lead form widget</td><td><a href="/files/NZmBi7CXo65kc7rTpDR9">/files/NZmBi7CXo65kc7rTpDR9</a></td><td><a href="/pages/RT1RqNNb0M1D9EuPdTvp">/pages/RT1RqNNb0M1D9EuPdTvp</a></td></tr><tr><td><strong>How to Build a Record Edit Form for modals &#x26; panels</strong></td><td>Learn to build a modal form that edits records</td><td><a href="/files/8cuEFh5TZvD9RThHvWHt">/files/8cuEFh5TZvD9RThHvWHt</a></td><td><a href="/pages/v3XhH6aB1MBuCXA0kKhv">/pages/v3XhH6aB1MBuCXA0kKhv</a></td></tr></tbody></table>

## Advanced Layouts & Interactions

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Vertical Tabs with Reactive Data Table</strong></td><td>Display Accounts in vertical tabs alongside a Data Table that automatically updates to show related Opportunities.</td><td><a href="/files/259rM0Hwjumqb5Gp7E3n">/files/259rM0Hwjumqb5Gp7E3n</a></td><td><a href="/pages/x3MbN4RkQwkk5RMjLWkH">/pages/x3MbN4RkQwkk5RMjLWkH</a></td></tr><tr><td><strong>Campaign Performance Dashboard</strong></td><td>Learn to create a reusable component that lets users instantly switch between views of Leads Generated, Opportunities Created...</td><td><a href="/files/m23hwma0Et2RJDYNRG80">/files/m23hwma0Et2RJDYNRG80</a></td><td><a href="/pages/bWAMkBX7hhpTJHOF5vl6">/pages/bWAMkBX7hhpTJHOF5vl6</a></td></tr><tr><td><strong>Dynamic Opportunity Viewer</strong></td><td>This tutorial shows how to use an Input Choice Set and Component Visibility rules to display only the selected view.</td><td><a href="/files/OVN0DmO3xA2SHG85rEtK">/files/OVN0DmO3xA2SHG85rEtK</a></td><td><a href="/pages/Tw5bfEvjLAQtOlKq3wny">/pages/Tw5bfEvjLAQtOlKq3wny</a></td></tr><tr><td><strong>Build a Custom Record Header &#x26; Highlights Panel</strong></td><td>Learn to design a custom no-code record page header</td><td><a href="/files/qqycd0uMxsMER4uucdum">/files/qqycd0uMxsMER4uucdum</a></td><td><a href="/pages/KcIhiv9WJ8OEAw7EYN8l">/pages/KcIhiv9WJ8OEAw7EYN8l</a></td></tr></tbody></table>


---

# 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/projects/dynamic-components/overview.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.