# View All Tutorial Projects

## 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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FVZteGoX1iZ4MnnIbHIdf%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(11).png?alt=media&#x26;token=88c07b09-3b37-4dae-b213-1533138d8c1f">Mastering the Avonni Dynamic Components Package (11).png</a></td><td><a href="building-basics-components/my-active-opportunities">my-active-opportunities</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FrKmPGHUIW7jxJAxRuUB9%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(12).png?alt=media&#x26;token=7de6499f-4768-4ca7-b829-f1ccc814b152">Mastering the Avonni Dynamic Components Package (12).png</a></td><td><a href="building-basics-components/enhanced-related-list">enhanced-related-list</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2Fz4LNi1ZpBzr3aC7fd2bH%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(16).png?alt=media&#x26;token=b9f4cf52-415b-4cfa-9e49-b06d396dca16">Mastering the Avonni Dynamic Components Package (16).png</a></td><td><a href="building-basics-components/how-to-use-avatars-as-quick-links-to-related-records">how-to-use-avatars-as-quick-links-to-related-records</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2Fg2VU7cpsVc4NNJKcfxC0%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(14).png?alt=media&#x26;token=dc3ccff5-105c-429d-8959-59b53fbed80c">Mastering the Avonni Dynamic Components Package (14).png</a></td><td><a href="working-with-data/related-contacts-card">related-contacts-card</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FQ9PQAg0qMDHrzsCK1CLk%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(13).png?alt=media&#x26;token=e5d8e4ec-35b9-49e1-9f2d-aafa00c1c288">Mastering the Avonni Dynamic Components Package (13).png</a></td><td><a href="working-with-data/user-activity-report">user-activity-report</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FJOwPkuOrgnbrBhVg2bzW%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(17).png?alt=media&#x26;token=b5fda9ea-f5c4-4ed5-a019-14b3b0a7ed1e">Mastering the Avonni Dynamic Components Package (17).png</a></td><td><a href="working-with-data/build-a-quick-lead-entry-form">build-a-quick-lead-entry-form</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2F26X65AvTJPZ5F0GCSwBX%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(18).png?alt=media&#x26;token=b173b46a-fbb4-4387-b103-1381a35c4991">Mastering the Avonni Dynamic Components Package (18).png</a></td><td><a href="working-with-data/how-to-build-a-record-edit-form-for-modals-and-panels">how-to-build-a-record-edit-form-for-modals-and-panels</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FZ8ZjaxkqW0FzPMJdZbCo%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(10).png?alt=media&#x26;token=884f3af5-9caa-4b9d-abae-e887762f4597">Mastering the Avonni Dynamic Components Package (10).png</a></td><td><a href="advanced-layout-and-interactions/vertical-tabs-with-reactive-data-table">vertical-tabs-with-reactive-data-table</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FxRFD6nVdFpV1YLeRrLY7%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(9).png?alt=media&#x26;token=a0d1ff38-a9f0-4e4c-9f7d-e41bb6b1a079">Mastering the Avonni Dynamic Components Package (9).png</a></td><td><a href="advanced-layout-and-interactions/dynamic-tradeshow-campaign-performance-dashboard">dynamic-tradeshow-campaign-performance-dashboard</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2F0u9OhmLQta1kH5xbjs6T%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(8).png?alt=media&#x26;token=125da952-3adf-4548-b103-2b48e1191ac6">Mastering the Avonni Dynamic Components Package (8).png</a></td><td><a href="advanced-layout-and-interactions/dynamic-opportunity-viewer">dynamic-opportunity-viewer</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="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FT6VyrJJDO7WUj4omNBOe%2FMastering%20the%20Avonni%20Dynamic%20Components%20Package%20(15).png?alt=media&#x26;token=ce7c374d-bff8-45ab-9b9e-08d7ac5d4519">Mastering the Avonni Dynamic Components Package (15).png</a></td><td><a href="advanced-layout-and-interactions/build-a-custom-record-header-and-highlights-panel">build-a-custom-record-header-and-highlights-panel</a></td></tr></tbody></table>