# Overview

This documentation section provides a comprehensive guide to building and customizing Avonni Dynamic Components.

## **Configuring Components**

This section covers the essential steps for setting up and customizing Avonni components within your Dynamic Component. You'll learn how to modify component properties, integrate Salesforce data, control visibility, apply styles, and manage different versions.

<table data-view="cards"><thead><tr><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>Properties</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F60TeWWsMsjmT05wNrhoQ%2FDesign%20sans%20titre%20-%202025-03-12T100433.220.png?alt=media&#x26;token=0e87fa85-28a9-4a23-b53a-a00971e329ea">Design sans titre - 2025-03-12T100433.220.png</a></td><td><a href="configuring-components/properties">properties</a></td></tr><tr><td><strong>Fields</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fk1hLo3neXtljKMZgf8CG%2FDesign%20sans%20titre%20-%202025-03-12T100318.175.png?alt=media&#x26;token=d6054a56-8d9a-4db8-9a2b-09ca0b000d55">Design sans titre - 2025-03-12T100318.175.png</a></td><td><a href="configuring-components/fields">fields</a></td></tr><tr><td><strong>Component Visibility</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FCpFft04LAQAnvL3qtnmF%2FDesign%20sans%20titre%20-%202025-03-12T100153.583.png?alt=media&#x26;token=2bb72684-7d49-4375-9fd9-936bfc8f509a">Design sans titre - 2025-03-12T100153.583.png</a></td><td><a href="../getting-started/understanding-the-essentials/component-visibility">component-visibility</a></td></tr><tr><td><strong>Style</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F9TnzPYnRHhbzIQJNWNLx%2FDesign%20sans%20titre%20-%202025-03-12T095724.544.png?alt=media&#x26;token=d90d5db6-315d-4343-b9cb-69b5f2382fc3">Design sans titre - 2025-03-12T095724.544.png</a></td><td><a href="configuring-components/style">style</a></td></tr><tr><td><strong>Target Object Page</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FQGilRC8hkPL7vfYYHroy%2FDesign%20742x577%20(2).png?alt=media&#x26;token=e431e098-f5c0-4b4c-bd7e-ae0125de8390">Design 742x577 (2).png</a></td><td><a href="../getting-started/understanding-the-essentials/target-page-object">target-page-object</a></td></tr><tr><td><strong>Version Management</strong></td><td><a href="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FUePwLgsG2e1LtsmtB159%2FDesign%20sans%20titre%20-%202025-03-12T095919.940.png?alt=media&#x26;token=d1e32b53-4eed-4c0c-a941-4fb13c0bec70">Design sans titre - 2025-03-12T095919.940.png</a></td><td><a href="../getting-started/avonni-components-app/version-management">version-management</a></td></tr></tbody></table>

## **Data and Interactions**

This section explores how to bring your Avonni Dynamic Components to life by connecting them to data and adding interactive behaviors. Mastering these concepts is key to building dynamic and functional user interfaces.

### Data Sources

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td><a href="data-sources/manual">manual</a></td></tr><tr><td><strong>Picklist</strong></td><td><a href="data-sources/picklist">picklist</a></td></tr><tr><td><strong>Query</strong></td><td><a href="data-sources/query">query</a></td></tr><tr><td><strong>Nested Queries</strong></td><td><a href="data-sources/nested-queries">nested-queries</a></td></tr><tr><td><strong>Variables</strong></td><td><a href="resources/variable">variable</a></td></tr></tbody></table>

### Interactions

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Download</strong></td><td><a href="interactions/data-export-and-refresh/download">download</a></td></tr><tr><td><strong>Execute Flow</strong></td><td><a href="interactions/flow-builder-integration/execute-flow">execute-flow</a></td></tr><tr><td><strong>On Load</strong></td><td><a href="on-load-interaction">on-load-interaction</a></td></tr><tr><td><strong>Show Toast</strong></td><td><a href="interactions/navigation-and-notifications/show-toast">show-toast</a></td></tr><tr><td><strong>Navigate</strong></td><td><a href="interactions/navigation-and-notifications/navigate">navigate</a></td></tr><tr><td><strong>Open Alert Modal</strong></td><td><a href="interactions/navigation-and-notifications/open-alert-modal">open-alert-modal</a></td></tr><tr><td><strong>Open Confirm</strong></td><td><a href="interactions/navigation-and-notifications/open-confirm-dialog">open-confirm-dialog</a></td></tr><tr><td><strong>Open Dynamic Component Dialog</strong></td><td><a href="interactions/dynamic-component-control/open-dynamic-component-dialog">open-dynamic-component-dialog</a></td></tr><tr><td><strong>Open Dynamic Component Panel</strong></td><td><a href="interactions/dynamic-component-control/open-dynamic-component-panel">open-dynamic-component-panel</a></td></tr><tr><td><strong>Open Flow Panel</strong></td><td><a href="interactions/flow-builder-integration/open-flow-panel">open-flow-panel</a></td></tr><tr><td><strong>Open Flow Dialog</strong></td><td><a href="interactions/flow-builder-integration/open-flow-dialog">open-flow-dialog</a></td></tr><tr><td><strong>CRUD from Record Variable</strong></td><td><a href="broken-reference">Broken link</a></td></tr></tbody></table>

### Resources

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Constant</strong></td><td><a href="resources/constant">constant</a></td></tr><tr><td><strong>Formula</strong></td><td><a href="resources/formula">formula</a></td></tr><tr><td><strong>Nested Queries</strong></td><td><a href="data-sources/nested-queries">nested-queries</a></td></tr><tr><td><strong>Query</strong></td><td><a href="data-sources/query">query</a></td></tr><tr><td><strong>Variable</strong></td><td><a href="resources/variable">variable</a></td></tr></tbody></table>

## **Advanced Topics**

This section covers advanced features that will boost your productivity and allow you to build even more sophisticated components. You'll learn about undo/redo, copy/paste, keyboard shortcuts, and how to create reusable components by nesting Dynamic Components.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Undo/Redo</strong></td><td><a href="advanced-features/undo-redo">undo-redo</a></td></tr><tr><td><strong>Copy and Paste</strong></td><td><a href="advanced-features/copy-and-paste">copy-and-paste</a></td></tr><tr><td><strong>Keyboard Shortcuts</strong></td><td><a href="advanced-features/keyboard-shortcut">keyboard-shortcut</a></td></tr></tbody></table>