# Documentation Hub ## Get Started - [Welcome](https://docs.avonnicomponents.com/welcome.md) - [Build with AI](https://docs.avonnicomponents.com/build-with-ai.md): Build Avonni components by describing what you want in plain language: one MCP server, one skill set, four Salesforce surfaces. - [Selection Guide](https://docs.avonnicomponents.com/choosing-the-right-components/selection-guide.md): Five component lines, one question: where are you building today? Follow the path to your answer, then install the package that carries it. - [Feature Comparison](https://docs.avonnicomponents.com/choosing-the-right-components/feature-comparison.md): The five component lines side by side: who each one is for, where it runs, and what it can do. - [Installation & Package](https://docs.avonnicomponents.com/choosing-the-right-components/installation-and-package.md): Five component lines, three packages, one install flow. Start with the package that matches where you build today, and add the others whenever you need them. ## App Builder - [Welcome](https://docs.avonnicomponents.com/app-builder-components/welcome.md): Ready made components you drag onto a Lightning page and configure right in the App Builder. Nothing to compose, nothing to code. - [Product Tour](https://docs.avonnicomponents.com/app-builder-components/getting-started/product-tour.md) - [Quickstart Guide](https://docs.avonnicomponents.com/app-builder-components/getting-started/quickstart-guide.md) - [Understanding the Essentials](https://docs.avonnicomponents.com/app-builder-components/getting-started/understanding-the-essentials.md) - [Core Concepts](https://docs.avonnicomponents.com/app-builder-components/getting-started/understanding-the-essentials/core-concepts.md) - [Component Properties Reference](https://docs.avonnicomponents.com/app-builder-components/getting-started/understanding-the-essentials/component-properties-reference.md) - [Common Use Case Patterns](https://docs.avonnicomponents.com/app-builder-components/getting-started/understanding-the-essentials/common-use-case-patterns.md) - [Installation & Licenses Management](https://docs.avonnicomponents.com/app-builder-components/getting-started/installation-and-licenses-management.md) - [Choosing Between App Builder and Dynamic Components](https://docs.avonnicomponents.com/app-builder-components/getting-started/choosing-between-app-builder-and-dynamic-components.md) - [Explore All Components](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/explore-all-components.md) - [AX - Alert](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-alert.md) - [AX - Audio](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-audio.md) - [AX - Barcode](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-barcode.md) - [AX - Calendar](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-calendar.md) - [AX - Data Table](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-data-table.md) - [AX - Dynamic Component](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-dynamic-component.md) - [AX - Gallery](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-gallery.md) - [AX - Image](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-image.md) - [AX - Kanban](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-kanban.md) - [AX - List](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-list.md) - [AX - Map](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-map.md) - [AX - Metric](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-metric.md) - [AX - Pivot Table](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-pivot-table.md) - [AX - Progress Indicator](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-progress-indicator.md) - [AX - Tags](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-tags.md) - [AX - Timeline](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-timeline.md) - [AX - Video](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-video.md) - [Troubleshooting & FAQs](https://docs.avonnicomponents.com/app-builder-components/resources/troubleshooting-and-faqs.md) - [Security](https://docs.avonnicomponents.com/app-builder-components/resources/security.md) - [Report Issues](https://docs.avonnicomponents.com/app-builder-components/resources/report-issues.md) - [Contact Support](https://docs.avonnicomponents.com/app-builder-components/resources/contact-support.md) ## Dynamic Components - [Welcome](https://docs.avonnicomponents.com/dynamic-components/welcome.md): Build custom Salesforce UIs without code: compose a component from your data, your layout and what happens on click, then place it on any App, Record or Home page. - [Product Tour](https://docs.avonnicomponents.com/dynamic-components/getting-started/product-tour.md) - [Quickstart Guide](https://docs.avonnicomponents.com/dynamic-components/getting-started/quickstart-guide.md) - [Installation & Licenses Management](https://docs.avonnicomponents.com/dynamic-components/getting-started/installation-and-licenses-management.md) - [Dynamic vs. Flow Components](https://docs.avonnicomponents.com/dynamic-components/getting-started/dynamic-vs.-flow-components.md) - [Overview](https://docs.avonnicomponents.com/dynamic-components/build-with-ai/overview.md): Connect your AI assistant to the Avonni MCP server and install the Avonni Skills to build and update Dynamic Components from plain-language prompts. - [Setup](https://docs.avonnicomponents.com/dynamic-components/build-with-ai/setup.md): Install the Avonni Skills and connect the Avonni MCP server to your AI assistant. - [Using the AI Assistant](https://docs.avonnicomponents.com/dynamic-components/build-with-ai/using-the-ai-assistant.md): Describe what you want in plain language, and the right skill activates and looks up accurate component knowledge through the MCP server. - [Prompt Library](https://docs.avonnicomponents.com/dynamic-components/build-with-ai/prompt-library.md): Copy-paste prompts for building Dynamic Components with your AI assistant, organized by goal. - [Limitations & FAQ](https://docs.avonnicomponents.com/dynamic-components/build-with-ai/limitations-and-faq.md): What the Avonni MCP server and Skills do not cover, and fixes for common setup problems. - [For AI Agents](https://docs.avonnicomponents.com/dynamic-components/build-with-ai/for-ai-agents.md): Everything on this site is machine-readable: Markdown URLs, a full index, a question-answering endpoint, and the Avonni MCP server. - [Component Builder Overview](https://docs.avonnicomponents.com/dynamic-components/core-concepts/component-builder-overview.md) - [Target Page Object](https://docs.avonnicomponents.com/dynamic-components/core-concepts/target-page-object.md) - [Component Visibility](https://docs.avonnicomponents.com/dynamic-components/core-concepts/component-visibility.md) - [Using Variables and Component Data](https://docs.avonnicomponents.com/dynamic-components/core-concepts/using-variables-and-component-data.md) - [Publishing your Dynamic Components](https://docs.avonnicomponents.com/dynamic-components/core-concepts/publishing-your-dynamic-components.md) - [Experience Sites Integration](https://docs.avonnicomponents.com/dynamic-components/core-concepts/experience-sites-integration.md) - [Overview](https://docs.avonnicomponents.com/dynamic-components/avonni-components-app/overview.md) - [Accessing the App](https://docs.avonnicomponents.com/dynamic-components/avonni-components-app/accessing-the-app.md) - [Creating a new component](https://docs.avonnicomponents.com/dynamic-components/avonni-components-app/creating-a-new-component.md) - [Folders](https://docs.avonnicomponents.com/dynamic-components/avonni-components-app/folders.md) - [Templates](https://docs.avonnicomponents.com/dynamic-components/avonni-components-app/templates.md) - [Version management](https://docs.avonnicomponents.com/dynamic-components/avonni-components-app/version-management.md) - [Overview](https://docs.avonnicomponents.com/dynamic-components/component-builder/overview.md) - [Configuring Components](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components.md) - [Properties](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/properties.md) - [Fields](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/fields.md) - [Style](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/style.md) - [Data Sources](https://docs.avonnicomponents.com/dynamic-components/component-builder/data-sources.md) - [Overview](https://docs.avonnicomponents.com/dynamic-components/component-builder/data-sources/overview.md) - [Manual](https://docs.avonnicomponents.com/dynamic-components/component-builder/data-sources/manual.md) - [Picklist](https://docs.avonnicomponents.com/dynamic-components/component-builder/data-sources/picklist.md) - [Query](https://docs.avonnicomponents.com/dynamic-components/component-builder/data-sources/query.md) - [Nested Queries](https://docs.avonnicomponents.com/dynamic-components/component-builder/data-sources/nested-queries.md) - [Real-Time Data](https://docs.avonnicomponents.com/dynamic-components/component-builder/real-time-data.md) - [Resources](https://docs.avonnicomponents.com/dynamic-components/component-builder/resources.md) - [Overview](https://docs.avonnicomponents.com/dynamic-components/component-builder/resources/overview.md) - [Variable](https://docs.avonnicomponents.com/dynamic-components/component-builder/resources/variable.md) - [Constant](https://docs.avonnicomponents.com/dynamic-components/component-builder/resources/constant.md) - [Formula](https://docs.avonnicomponents.com/dynamic-components/component-builder/resources/formula.md) - [Interactions](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions.md) - [Assignment](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/assignment.md) - [Control Console Tab](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/control-console-tab.md) - [Copy Records](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/copy-records.md) - [Create Record](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/create-record.md) - [Delete Record](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/delete-record.md) - [Delete Selected Records](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/delete-selected-records.md) - [Download](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/download.md) - [Duplicate Record](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/duplicate-record.md) - [Duplicate Selected Records](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/duplicate-selected-records.md) - [Edit Selected Records](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/edit-selected-records.md) - [Execute Flow](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/execute-flow.md) - [Export To](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/export-to.md) - [Get Record](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/get-record.md) - [Invoke Agentforce Agent](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/invoke-agentforce-agent.md) - [Navigate](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/navigate.md) - [Open Agentforce Panel](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-agentforce-panel.md) - [Open Alert Modal](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-alert-modal.md) - [Open Confirm](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-confirm.md) - [Open Dynamic Component Dialog](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-dynamic-component-dialog.md) - [Open Dynamic Component Panel](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-dynamic-component-panel.md) - [Open Flow Dialog](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-flow-dialog.md) - [Open Flow Panel](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-flow-panel.md) - [Open Quick Action](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/open-quick-action.md) - [Refresh All Queries](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/refresh-all-queries.md) - [Refresh Query](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/refresh-query.md) - [Show Toast](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/show-toast.md) - [Update Location](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/update-location.md) - [Update Record](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/update-record.md) - [Update Records Order](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/update-records-order.md) - [Upsert Record](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/upsert-record.md) - [On Load Interaction](https://docs.avonnicomponents.com/dynamic-components/component-builder/on-load-interaction.md) - [Advanced Features](https://docs.avonnicomponents.com/dynamic-components/component-builder/advanced-features.md) - [Copy and Paste](https://docs.avonnicomponents.com/dynamic-components/component-builder/advanced-features/copy-and-paste.md) - [Debug Panel](https://docs.avonnicomponents.com/dynamic-components/component-builder/advanced-features/debug-panel.md) - [Undo / Redo](https://docs.avonnicomponents.com/dynamic-components/component-builder/advanced-features/undo-redo.md) - [Structure Panel](https://docs.avonnicomponents.com/dynamic-components/component-builder/advanced-features/structure-panel.md) - [Explore All Components](https://docs.avonnicomponents.com/dynamic-components/components/explore-all-components.md) - [Accordion](https://docs.avonnicomponents.com/dynamic-components/components/accordion.md) - [Agent Chat](https://docs.avonnicomponents.com/dynamic-components/components/agent-chat.md) - [Alert](https://docs.avonnicomponents.com/dynamic-components/components/alert.md) - [Audio Player](https://docs.avonnicomponents.com/dynamic-components/components/audio-player.md): The Audio Player provides robust audio playback with extensive customization options for sources, playback controls, volume, and visual styling. - [Avatar](https://docs.avonnicomponents.com/dynamic-components/components/avatar.md) - [Avatar Group](https://docs.avonnicomponents.com/dynamic-components/components/avatar-group.md) - [Badge](https://docs.avonnicomponents.com/dynamic-components/components/badge.md): The Badge component lets you add colorful, attention-grabbing labels to your user interface. - [Barcode](https://docs.avonnicomponents.com/dynamic-components/components/barcode.md) - [Barcode Scanner](https://docs.avonnicomponents.com/dynamic-components/components/barcode-scanner.md) - [Blockquote](https://docs.avonnicomponents.com/dynamic-components/components/blockquote.md): Highlight important quotes or text with the Blockquote component. This component allows you to emphasize specific content visually, drawing attention to key information or testimonials. - [Button](https://docs.avonnicomponents.com/dynamic-components/components/button.md): The Avonni Button component provides customizable buttons to initiate actions, navigate pages, or perform specific functions. - [Button Group](https://docs.avonnicomponents.com/dynamic-components/components/button-group.md) - [Button Icon](https://docs.avonnicomponents.com/dynamic-components/components/button-icon.md) - [Button Menu](https://docs.avonnicomponents.com/dynamic-components/components/button-menu.md) - [Button Stateful](https://docs.avonnicomponents.com/dynamic-components/components/button-stateful.md) - [Calendar](https://docs.avonnicomponents.com/dynamic-components/components/calendar.md): The Avonni Calendar provides a customizable interface for displaying and managing resources and events in various formats, including calendars, timelines, and agendas. - [Camera](https://docs.avonnicomponents.com/dynamic-components/components/camera.md) - [Card](https://docs.avonnicomponents.com/dynamic-components/components/card.md) - [Carousel](https://docs.avonnicomponents.com/dynamic-components/components/carousel.md) - [Chart](https://docs.avonnicomponents.com/dynamic-components/components/chart.md) - [Chat](https://docs.avonnicomponents.com/dynamic-components/components/chat.md) - [Checkbox](https://docs.avonnicomponents.com/dynamic-components/components/checkbox.md) - [Checkbox Button](https://docs.avonnicomponents.com/dynamic-components/components/checkbox-button.md) - [Checkbox Group](https://docs.avonnicomponents.com/dynamic-components/components/checkbox-group.md) - [Chip Container](https://docs.avonnicomponents.com/dynamic-components/components/chip-container.md) - [Color Input](https://docs.avonnicomponents.com/dynamic-components/components/color-input.md) - [Columns](https://docs.avonnicomponents.com/dynamic-components/components/columns.md): The Columns component gives you powerful control over the layout and arrangement of your Dynamic Components. - [Combobox](https://docs.avonnicomponents.com/dynamic-components/components/combobox.md) - [Container](https://docs.avonnicomponents.com/dynamic-components/components/container.md): The Container component is a versatile building block for your Dynamic Components. Think of it as a foundation for organizing and styling other components. - [Counter](https://docs.avonnicomponents.com/dynamic-components/components/counter.md) - [Data LWC Container](https://docs.avonnicomponents.com/dynamic-components/components/data-lwc-container.md) - [Data Table](https://docs.avonnicomponents.com/dynamic-components/components/data-table.md) - [Date Picker](https://docs.avonnicomponents.com/dynamic-components/components/date-picker.md) - [Date Range](https://docs.avonnicomponents.com/dynamic-components/components/date-range.md) - [Date Time Picker](https://docs.avonnicomponents.com/dynamic-components/components/date-time-picker.md) - [Document Scanner](https://docs.avonnicomponents.com/dynamic-components/components/document-scanner.md) - [Dual Listbox](https://docs.avonnicomponents.com/dynamic-components/components/dual-listbox.md) - [Dynamic Component](https://docs.avonnicomponents.com/dynamic-components/components/dynamic-component.md): The Avonni Dynamic Component component lets you embed one Dynamic Component within another. - [Field](https://docs.avonnicomponents.com/dynamic-components/components/field.md) - [File Upload](https://docs.avonnicomponents.com/dynamic-components/components/file-upload.md) - [Flow](https://docs.avonnicomponents.com/dynamic-components/components/flow.md) - [Formatted Address](https://docs.avonnicomponents.com/dynamic-components/components/formatted-address.md) - [Formatted Name](https://docs.avonnicomponents.com/dynamic-components/components/formatted-name.md) - [Formatted Value](https://docs.avonnicomponents.com/dynamic-components/components/formatted-value.md) - [Header](https://docs.avonnicomponents.com/dynamic-components/components/header.md) - [Help Text](https://docs.avonnicomponents.com/dynamic-components/components/helptext.md) - [Icon](https://docs.avonnicomponents.com/dynamic-components/components/icon.md) - [Icon Picker](https://docs.avonnicomponents.com/dynamic-components/components/icon-picker.md) - [Illustration](https://docs.avonnicomponents.com/dynamic-components/components/illustration.md) - [Image](https://docs.avonnicomponents.com/dynamic-components/components/image.md) - [Image List](https://docs.avonnicomponents.com/dynamic-components/components/image-list.md) - [Input Date](https://docs.avonnicomponents.com/dynamic-components/components/input-date.md) - [Input Datetime](https://docs.avonnicomponents.com/dynamic-components/components/input-datetime.md) - [Input Email](https://docs.avonnicomponents.com/dynamic-components/components/input-email.md) - [Input File](https://docs.avonnicomponents.com/dynamic-components/components/input-file.md) - [Input Number](https://docs.avonnicomponents.com/dynamic-components/components/input-number.md) - [Input Password](https://docs.avonnicomponents.com/dynamic-components/components/input-password.md) - [Input Pen (Signature)](https://docs.avonnicomponents.com/dynamic-components/components/input-pen-signature.md) - [Input Phone](https://docs.avonnicomponents.com/dynamic-components/components/input-tel.md) - [Input Search](https://docs.avonnicomponents.com/dynamic-components/components/input-search.md) - [Input Text](https://docs.avonnicomponents.com/dynamic-components/components/input-text.md) - [Input Time](https://docs.avonnicomponents.com/dynamic-components/components/input-time.md) - [Input URL](https://docs.avonnicomponents.com/dynamic-components/components/input-url.md) - [Kanban](https://docs.avonnicomponents.com/dynamic-components/components/kanban.md) - [List](https://docs.avonnicomponents.com/dynamic-components/components/list.md) - [Loading Spinner](https://docs.avonnicomponents.com/dynamic-components/components/spinner.md) - [LWC Container](https://docs.avonnicomponents.com/dynamic-components/components/lwc-container.md) - [Map](https://docs.avonnicomponents.com/dynamic-components/components/map.md) - [Enable Map Routing](https://docs.avonnicomponents.com/dynamic-components/components/map/enable-map-routing.md) - [Media Object](https://docs.avonnicomponents.com/dynamic-components/components/media-object.md) - [Metric](https://docs.avonnicomponents.com/dynamic-components/components/metric.md) - [Microphone](https://docs.avonnicomponents.com/dynamic-components/components/microphone.md) - [Navigation Container](https://docs.avonnicomponents.com/dynamic-components/components/navigation-container.md) - [NFC Tag Scanner](https://docs.avonnicomponents.com/dynamic-components/components/nfc-tag-scanner.md) - [PDF Viewer](https://docs.avonnicomponents.com/dynamic-components/components/pdf-viewer.md) - [Pill Container](https://docs.avonnicomponents.com/dynamic-components/components/pill-container.md) - [Pivot Table](https://docs.avonnicomponents.com/dynamic-components/components/pivot-table.md) - [Profile Card](https://docs.avonnicomponents.com/dynamic-components/components/profile-card.md) - [Progress Bar](https://docs.avonnicomponents.com/dynamic-components/components/progress-bar.md) - [Progress Circle](https://docs.avonnicomponents.com/dynamic-components/components/progress-circle.md) - [Progress Indicator](https://docs.avonnicomponents.com/dynamic-components/components/progress-indicator.md) - [Range Slider](https://docs.avonnicomponents.com/dynamic-components/components/range-slider.md) - [Rating](https://docs.avonnicomponents.com/dynamic-components/components/rating.md) - [Record Detail](https://docs.avonnicomponents.com/dynamic-components/components/record-detail.md) - [Record Picker](https://docs.avonnicomponents.com/dynamic-components/components/record-picker.md) - [Relationship Graph](https://docs.avonnicomponents.com/dynamic-components/components/relationship-graph.md) - [Repeater](https://docs.avonnicomponents.com/dynamic-components/components/repeater.md) - [Scoped Notification](https://docs.avonnicomponents.com/dynamic-components/components/scope-notification.md) - [Expandable Section](https://docs.avonnicomponents.com/dynamic-components/components/section.md) - [Segmented Control](https://docs.avonnicomponents.com/dynamic-components/components/segmented-control.md) - [Separator](https://docs.avonnicomponents.com/dynamic-components/components/separator.md) - [Status](https://docs.avonnicomponents.com/dynamic-components/components/status.md) - [Tabbed Container](https://docs.avonnicomponents.com/dynamic-components/components/tabbed-container.md) - [Tabs](https://docs.avonnicomponents.com/dynamic-components/components/tabs.md) - [Text](https://docs.avonnicomponents.com/dynamic-components/components/text.md) - [Text Area](https://docs.avonnicomponents.com/dynamic-components/components/text-area.md) - [Time Range Picker](https://docs.avonnicomponents.com/dynamic-components/components/time-range.md) - [Timeline](https://docs.avonnicomponents.com/dynamic-components/components/timeline.md) - [Timer](https://docs.avonnicomponents.com/dynamic-components/components/timer.md) - [Toggle](https://docs.avonnicomponents.com/dynamic-components/components/toggle.md) - [Tree](https://docs.avonnicomponents.com/dynamic-components/components/tree.md) - [Tree Grid](https://docs.avonnicomponents.com/dynamic-components/components/tree-grid.md) - [Vertical Navigation](https://docs.avonnicomponents.com/dynamic-components/components/vertical-navigation.md) - [Vertical Visual Picker](https://docs.avonnicomponents.com/dynamic-components/components/vertical-visual-picker.md) - [Video Player](https://docs.avonnicomponents.com/dynamic-components/components/video-player.md) - [Visual Picker](https://docs.avonnicomponents.com/dynamic-components/components/visual-picker.md) - [Visual Picker Link](https://docs.avonnicomponents.com/dynamic-components/components/visual-picker-link.md) - [Components](https://docs.avonnicomponents.com/dynamic-components/tutorials/components.md) - [Calendar](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/calendar.md) - [How to Create Events Quickly by Dragging](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/calendar/how-to-create-events-quickly-by-dragging.md) - [How to Add an Edit Action to Calendar Events](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/calendar/how-to-add-an-edit-action-to-calendar-events.md) - [How to Add a New Event Button to the Calendar Header](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/calendar/how-to-add-a-new-event-button-to-the-calendar-header.md) - [How to Customize the Right-Click Menu](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/calendar/how-to-customize-the-right-click-menu.md) - [How to Reschedule Events with Drag and Drop](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/calendar/how-to-reschedule-events-with-drag-and-drop.md) - [Columns](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/columns.md) - [Creating a Responsive 3-Column Layout](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/columns/creating-a-responsive-3-column-layout.md) - [Data Table](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table.md): Step-by-step tutorials to group, style, edit, search and act on records in the Avonni Data Table, each built on a real sales or service example. - [Configuring Data Grouping](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/configuring-data-grouping.md): Group Data Table rows under collapsible headers by stage, owner or account, and order the groups the way your team reads the pipeline. - [Add Subtotals and Totals](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/add-subtotals-and-totals.md): Show the pipeline amount of each stage and a grand total row in a grouped Data Table, so a manager no longer exports the rows to a spreadsheet. - [Use Rich Column Types](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/use-rich-column-types.md): Turn plain Data Table columns into record links, owner avatars, progress bars and star ratings, so a manager reviews deals without opening each one. - [Manage Column Visibility](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/manage-column-visibility.md): Show a Data Table column only to the users who need it, such as a Discount column for sales managers, by binding Hidden to a formula. - [Apply Badge Color-Coding](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/apply-badge-color-coding.md): Color the Stage column as a badge that follows each deal's stage, driven by one formula field, so a manager spots late and closed deals in one pass. - [Add Status Indicators](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/add-status-indicators.md): A small colored dot beside each deal's stage, made from a badge with its text hidden, keeps the status visible in a narrow table on an Account page. - [Apply Conditional Cell Styling](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/apply-conditional-cell-styling.md): Tint table cells with SLDS classes, either the same style on every row or a style picked per row by a formula field, so key values stand out. - [Add Custom Buttons](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/add-custom-buttons.md): Put a Log Call button and an edit icon on every Opportunity row, so sales reps act on a deal right from the pipeline table. - [Define Row Actions](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/define-row-actions.md): Build a row menu on an Account table with Mark as Hot and View Website, so reps qualify and research prospects without opening each record. - [Configure Header Actions](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/configure-header-actions.md): Header buttons above a pipeline table let a sales manager create a deal, or hand every selected deal to a new owner, without leaving the page. - [Open a Record from a Row](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/open-a-record-from-a-row.md): Let users open an Opportunity from the table by its name, by a click on the row, or in a side panel, and choose how long lists load. - [Enable Data Export](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/enable-data-export.md): An Export button on the Data Table downloads the rows users see, or only the ones they ticked, as an Excel or CSV file for their own spreadsheet. - [Enable Inline Editing](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/enable-inline-editing.md): Let users correct amounts, stages and dates straight in the Data Table, then write every change back to Salesforce with a single Save. - [Enable Bulk Editing](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/enable-bulk-editing.md): With a Bulk Edit button, users tick several records in the Data Table and change a field on all of them at once, with no flow to build. - [Set Up Search](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/set-up-search.md): Add a search box to a Data Table so users find a record by typing part of its name, including in fields the table does not show. - [Add User Filters](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/add-user-filters.md): Give users filter menus on a Data Table, with a value preselected on load, so a service manager opens the case list already narrowed to what matters. - [Tips & Tricks](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/tips-and-tricks.md): Short answers to the Data Table questions admins ask support most often, each with a link to the tutorial that covers it in full. - [Header](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/header.md) - [Static Header](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/header/static-header.md) - [Dynamic Header](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/header/dynamic-header.md) - [Kanban](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/kanban.md) - [Saving Changes on Drag-and-Drop](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/kanban/saving-changes-on-drag-and-drop.md) - [List](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/list.md) - [Metric](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/metric.md) - [Record Detail](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/record-detail.md) - [Saving Changes](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/record-detail/saving-changes.md) - [Slider](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/slider.md) - [Single Value Slider: Selecting a Discount Percentage](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/slider/single-value-slider-selecting-a-discount-percentage.md) - [Range Slider: Setting a Price Filter](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/slider/range-slider-setting-a-price-filter.md) - [Interactions](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions.md) - [Navigation](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/navigation.md) - [How to create an interaction to navigate to an object page](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/navigation/how-to-create-an-interaction-to-navigate-to-an-object-page.md) - [How to create an interaction to navigate to a record page](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/navigation/how-to-create-an-interaction-to-navigate-to-a-record-page.md) - [Panel & Visibility](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/panel-and-visibility.md) - [How to Toggle a Reply Panel Using Assignment Interaction](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/panel-and-visibility/how-to-toggle-a-reply-panel-using-assignment-interaction.md) - [Flow Integration](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/flow-integration.md) - [How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/flow-integration/how-to-pass-multiple-selected-records-from-a-dynamic-component-to-a-screen-flow.md) - [Assignment](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/assignment.md) - [Clear Fields on Button Click](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/assignment/clear-fields-on-button-click.md) - [Reactive Components](https://docs.avonnicomponents.com/dynamic-components/tutorials/reactive-components.md) - [Data Relationships](https://docs.avonnicomponents.com/dynamic-components/tutorials/reactive-components/data-relationships.md) - [Master-Detail Relationship with Data Tables](https://docs.avonnicomponents.com/dynamic-components/tutorials/reactive-components/data-relationships/master-detail-relationship-with-data-tables.md) - [Layout and Tabs](https://docs.avonnicomponents.com/dynamic-components/tutorials/reactive-components/layout-and-tabs.md) - [Maps & Geolocation](https://docs.avonnicomponents.com/dynamic-components/tutorials/reactive-components/maps-and-geolocation.md) - [Reactive Map and Data Table](https://docs.avonnicomponents.com/dynamic-components/tutorials/reactive-components/maps-and-geolocation/reactive-map-and-data-table.md) - [Style](https://docs.avonnicomponents.com/dynamic-components/tutorials/style.md) - [How do you add space or a break between sections or fields?](https://docs.avonnicomponents.com/dynamic-components/tutorials/style/how-do-you-add-space-or-a-break-between-sections-or-fields.md) - [Tips and Tricks](https://docs.avonnicomponents.com/dynamic-components/tutorials/tips-and-tricks.md) - [Troubleshooting & FAQ](https://docs.avonnicomponents.com/dynamic-components/resources/troubleshooting-and-faq.md) - [Known Issues](https://docs.avonnicomponents.com/dynamic-components/resources/known-issues.md) - [Security](https://docs.avonnicomponents.com/dynamic-components/resources/security.md) - [Performance Guide](https://docs.avonnicomponents.com/dynamic-components/resources/performance-guide.md) - [Deployment Process](https://docs.avonnicomponents.com/dynamic-components/resources/deployment-process.md) - [Report Bugs](https://docs.avonnicomponents.com/dynamic-components/resources/report-bugs.md) - [Contact Support](https://docs.avonnicomponents.com/dynamic-components/resources/contact-support.md) ## LWC Components - [Introduction](https://docs.avonnicomponents.com/lwc-components/readme.md): Sixty one components you reference as avonni-\* tags in your own Lightning Web Components, fifteen of them driven straight from a SOQL query. - [Product Tour](https://docs.avonnicomponents.com/lwc-components/getting-started/product-tour.md): What the LWC Components library is, who it's for, and how to get it. - [Quickstart Guide](https://docs.avonnicomponents.com/lwc-components/getting-started/quickstart-guide.md): Build a support case board for the Account page in one Lightning Web Component: a query, a mapping, and an avonni-dd-kanban tag. No Apex. - [Installation & Licenses Management](https://docs.avonnicomponents.com/lwc-components/getting-started/installation-and-licenses-management.md): Install the Avonni LWC Components package from AppExchange, assign licenses, and write your first avonni tag. - [The Maintenance Advantage](https://docs.avonnicomponents.com/lwc-components/getting-started/the-maintenance-advantage.md): Why building on packaged components beats from-scratch code, whether a human or an AI writes it. - [Overview](https://docs.avonnicomponents.com/lwc-components/build-with-ai/overview.md): Connect your AI coding assistant to the Avonni MCP server and install the Avonni Skills to build and update avonni-\* components in your LWC code from plain-language prompts. - [Setup](https://docs.avonnicomponents.com/lwc-components/build-with-ai/setup.md): Install the Avonni Skills and connect the Avonni MCP server to your AI coding assistant. - [Using the AI Assistant](https://docs.avonnicomponents.com/lwc-components/build-with-ai/using-the-ai-assistant.md): Describe what you want in plain language, and the avonni-lwc-components skill activates and looks up the real component API through the MCP server. - [Prompt Library](https://docs.avonnicomponents.com/lwc-components/build-with-ai/prompt-library.md): Copy-paste prompts for building with avonni-\* components in your LWC code, organized by goal. - [Limitations & FAQ](https://docs.avonnicomponents.com/lwc-components/build-with-ai/limitations-and-faq.md): What the Avonni MCP server and Skills do not cover, and fixes for common setup problems. - [For AI Agents](https://docs.avonnicomponents.com/lwc-components/build-with-ai/for-ai-agents.md): Everything on this site is machine-readable: Markdown URLs, a full index, a question-answering endpoint, and the Avonni MCP server. - [Overview](https://docs.avonnicomponents.com/lwc-components/core-components/core-components.md) - [Alert Banner](https://docs.avonnicomponents.com/lwc-components/core-components/alert-banner.md) - [Audio Player](https://docs.avonnicomponents.com/lwc-components/core-components/audio-player.md) - [Avatar](https://docs.avonnicomponents.com/lwc-components/core-components/avatar.md) - [Avatar Group](https://docs.avonnicomponents.com/lwc-components/core-components/avatar-group.md) - [Badge](https://docs.avonnicomponents.com/lwc-components/core-components/badge.md) - [Barcode](https://docs.avonnicomponents.com/lwc-components/core-components/barcode.md) - [Blockquote](https://docs.avonnicomponents.com/lwc-components/core-components/blockquote.md) - [Card](https://docs.avonnicomponents.com/lwc-components/core-components/card.md) - [Carousel](https://docs.avonnicomponents.com/lwc-components/core-components/carousel.md) - [Chip Container](https://docs.avonnicomponents.com/lwc-components/core-components/chip-container.md) - [Choice Set](https://docs.avonnicomponents.com/lwc-components/core-components/choice-set.md) - [Color Gradient](https://docs.avonnicomponents.com/lwc-components/core-components/color-gradient.md) - [Color Palette](https://docs.avonnicomponents.com/lwc-components/core-components/color-palette.md) - [Color Picker](https://docs.avonnicomponents.com/lwc-components/core-components/color-picker.md) - [Combobox](https://docs.avonnicomponents.com/lwc-components/core-components/combobox.md) - [Counter](https://docs.avonnicomponents.com/lwc-components/core-components/counter.md) - [Data Table](https://docs.avonnicomponents.com/lwc-components/core-components/datatable.md) - [Date Picker](https://docs.avonnicomponents.com/lwc-components/core-components/date-picker.md) - [Date Range](https://docs.avonnicomponents.com/lwc-components/core-components/date-range.md) - [Date Time Picker](https://docs.avonnicomponents.com/lwc-components/core-components/date-time-picker.md) - [Dual Listbox](https://docs.avonnicomponents.com/lwc-components/core-components/dual-listbox.md) - [Dynamic Menu](https://docs.avonnicomponents.com/lwc-components/core-components/dynamic-menu.md) - [Expandable Section](https://docs.avonnicomponents.com/lwc-components/core-components/expandable-section.md) - [Filter Menu](https://docs.avonnicomponents.com/lwc-components/core-components/filter-menu.md) - [Filter Menu Group](https://docs.avonnicomponents.com/lwc-components/core-components/filter-menu-group.md) - [Header](https://docs.avonnicomponents.com/lwc-components/core-components/header.md) - [Icon Picker](https://docs.avonnicomponents.com/lwc-components/core-components/icon-picker.md) - [Illustration](https://docs.avonnicomponents.com/lwc-components/core-components/illustration.md) - [Layout](https://docs.avonnicomponents.com/lwc-components/core-components/layout.md) - [Layout Item](https://docs.avonnicomponents.com/lwc-components/core-components/layout-item.md) - [Metric](https://docs.avonnicomponents.com/lwc-components/core-components/metric.md) - [Microphone](https://docs.avonnicomponents.com/lwc-components/core-components/microphone.md) - [Pagination](https://docs.avonnicomponents.com/lwc-components/core-components/pagination.md) - [Pill Container](https://docs.avonnicomponents.com/lwc-components/core-components/pill-container.md) - [Progress Bar](https://docs.avonnicomponents.com/lwc-components/core-components/progress-bar.md) - [Progress Circle](https://docs.avonnicomponents.com/lwc-components/core-components/progress-circle.md) - [Progress Indicator](https://docs.avonnicomponents.com/lwc-components/core-components/progress-indicator.md) - [Rating](https://docs.avonnicomponents.com/lwc-components/core-components/rating.md) - [Signature Pad](https://docs.avonnicomponents.com/lwc-components/core-components/signature-pad.md) - [Slider](https://docs.avonnicomponents.com/lwc-components/core-components/slider.md) - [Status](https://docs.avonnicomponents.com/lwc-components/core-components/status.md) - [Timer](https://docs.avonnicomponents.com/lwc-components/core-components/timer.md) - [Vertical Visual Picker](https://docs.avonnicomponents.com/lwc-components/core-components/vertical-visual-picker.md) - [Video Player](https://docs.avonnicomponents.com/lwc-components/core-components/video-player.md) - [Visual Picker](https://docs.avonnicomponents.com/lwc-components/core-components/visual-picker.md) - [Visual Picker Link](https://docs.avonnicomponents.com/lwc-components/core-components/visual-picker-link.md) - [Overview](https://docs.avonnicomponents.com/lwc-components/data-driven-components/data-driven-components.md) - [Carousel](https://docs.avonnicomponents.com/lwc-components/data-driven-components/carousel.md) - [Chat](https://docs.avonnicomponents.com/lwc-components/data-driven-components/chat.md) - [Data Table](https://docs.avonnicomponents.com/lwc-components/data-driven-components/datatable.md) - [Data Table Group By](https://docs.avonnicomponents.com/lwc-components/data-driven-components/datatable-group-by.md) - [Image List](https://docs.avonnicomponents.com/lwc-components/data-driven-components/image-list.md) - [Kanban](https://docs.avonnicomponents.com/lwc-components/data-driven-components/kanban.md) - [Leaflet Map](https://docs.avonnicomponents.com/lwc-components/data-driven-components/leaflet-map.md) - [Enable Map Routing](https://docs.avonnicomponents.com/lwc-components/data-driven-components/leaflet-map/enable-map-routing.md) - [List](https://docs.avonnicomponents.com/lwc-components/data-driven-components/list.md) - [Map](https://docs.avonnicomponents.com/lwc-components/data-driven-components/map.md) - [Metric](https://docs.avonnicomponents.com/lwc-components/data-driven-components/metric.md) - [Pivot Table](https://docs.avonnicomponents.com/lwc-components/data-driven-components/pivot-table.md) - [Relationship Graph](https://docs.avonnicomponents.com/lwc-components/data-driven-components/relationship-graph.md) - [Scheduler](https://docs.avonnicomponents.com/lwc-components/data-driven-components/scheduler.md) - [Timeline](https://docs.avonnicomponents.com/lwc-components/data-driven-components/timeline.md) - [Tree](https://docs.avonnicomponents.com/lwc-components/data-driven-components/tree.md) ## Experience Sites - [Welcome](https://docs.avonnicomponents.com/experience-cloud/welcome.md): Over forty components for Experience Cloud sites: branded layouts, data components and interactions, for the people who are not in your org. - [Quick Start Guide](https://docs.avonnicomponents.com/experience-cloud/getting-started/quick-start-guide.md) - [Learning the Basics](https://docs.avonnicomponents.com/experience-cloud/getting-started/learning-the-basics.md) - [License Management](https://docs.avonnicomponents.com/experience-cloud/getting-started/license-management.md) - [Reactive Components](https://docs.avonnicomponents.com/experience-cloud/getting-started/reactive-components.md) - [Overview](https://docs.avonnicomponents.com/experience-cloud/build-with-ai/overview.md): Connect your AI assistant to the Avonni MCP server and install the Avonni Skills to build and update Avonni components on your Experience Site pages from plain-language prompts. - [Setup](https://docs.avonnicomponents.com/experience-cloud/build-with-ai/setup.md): Install the Avonni Skills and connect the Avonni MCP server to your AI assistant. - [Using the AI Assistant](https://docs.avonnicomponents.com/experience-cloud/build-with-ai/using-the-ai-assistant.md): Describe what you want in plain language, and the right skill activates and looks up accurate component knowledge through the MCP server. - [Prompt Library](https://docs.avonnicomponents.com/experience-cloud/build-with-ai/prompt-library.md): Copy-paste prompts for building Experience Site pages with Avonni components, organized by goal. - [Limitations & FAQ](https://docs.avonnicomponents.com/experience-cloud/build-with-ai/limitations-and-faq.md): What the Avonni MCP server and Skills do not cover, and fixes for common setup problems. - [For AI Agents](https://docs.avonnicomponents.com/experience-cloud/build-with-ai/for-ai-agents.md): Everything on this site is machine-readable: Markdown URLs, a full index, a question-answering endpoint, and the Avonni MCP server. - [Appearance](https://docs.avonnicomponents.com/experience-cloud/properties-panel/appearance.md) - [Data Sources](https://docs.avonnicomponents.com/experience-cloud/properties-panel/data-sources.md) - [Manual](https://docs.avonnicomponents.com/experience-cloud/properties-panel/data-sources/manual.md) - [Query](https://docs.avonnicomponents.com/experience-cloud/properties-panel/data-sources/query.md) - [CMS Collection](https://docs.avonnicomponents.com/experience-cloud/properties-panel/data-sources/cms-collection.md) - [Interactions](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions.md) - [Show Toast](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/show-toast.md) - [Navigate](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/navigate.md) - [Open Alert Modal](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/open-alert-modal.md) - [Open Confirm](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/open-confirm.md) - [Open Flow Dialog](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/open-flow-dialog.md) - [Open Flow Panel](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/open-flow-panel.md) - [Download](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/download.md) - [Execute Flow](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/execute-flow.md) - [View All Components](https://docs.avonnicomponents.com/experience-cloud/experience-components/view-all-components.md) - [AX - Accordion](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-accordion.md) - [AX - Accordion Section](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-accordion-section.md) - [AX - Alert](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-alert.md) - [AX - Audio](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-audio.md) - [AX - Avatar](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-avatar.md) - [AX - Avatar Group](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-avatar-group.md) - [AX - Banner](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-banner.md) - [AX - Bar Code](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-bar-code.md) - [AX - Blockquote](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-blockquote.md) - [AX - Button](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button.md) - [AX - Button Dialog](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button-dialog.md) - [AX - Button Group](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button-group.md) - [AX - Button Menu](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button-menu.md) - [AX - Calendar](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-calendar.md) - [AX - Card](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-card.md) - [AX - Chip Container](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-chip-container.md) - [AX - Combobox](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-combobox.md) - [AX - Container](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-container.md) - [AX - Data Table](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-data-table.md) - [AX - Feed](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-feed.md) - [AX - Gallery](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-gallery.md) - [AX - Icon](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-icon.md) - [AX - Illustration](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-illustration.md) - [AX - Image](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-image.md) - [AX - Kanban](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-kanban.md) - [AX - Language Selector](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-language-selector.md) - [AX - Layout](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-layout.md) - [AX - List](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-list.md) - [AX - Map](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-map.md) - [Enable Map Routing](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-map/enable-map-routing.md) - [AX - Media Object](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-media-object.md) - [AX - Metric](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-metric.md) - [AX - Navigation](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-navigation.md) - [AX - Profile Card](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-profile-card.md) - [AX - Progress Bar](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-progress-bar.md) - [AX - Progress Circle](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-progress-circle.md) - [AX - Progress Indicator](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-progress-indicator.md) - [AX - Publisher](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-publisher.md) - [AX - Record Detail](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-record-detail.md) - [AX - Separator](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-separator.md) - [AX - Social Links](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-social-links.md) - [AX - Tabs](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-tabs.md) - [AX - Text Block](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-text-block.md) - [AX - Timeline](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-timeline.md) - [AX - Tree Grid](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-tree-grid.md) - [AX - Video](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-video.md) - [General](https://docs.avonnicomponents.com/experience-cloud/tutorials/general.md) - [Expressions for Aura Sites](https://docs.avonnicomponents.com/experience-cloud/tutorials/general/expressions-for-aura-sites.md) - [Expressions for LWR Sites](https://docs.avonnicomponents.com/experience-cloud/tutorials/general/expressions-for-lwr-sites.md) - [Components](https://docs.avonnicomponents.com/experience-cloud/tutorials/components.md) - [Banner](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/banner.md) - [With Illustration and Buttons](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/banner/with-illustration-and-buttons.md) - [With Content centered](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/banner/with-content-centered.md) - [Card](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/card.md) - [Creating a MapCard Showcase](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/card/creating-a-mapcard-showcase.md) - [Data Table](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/data-table.md) - [Configuring the Data Table to display current related record information](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/data-table/configuring-the-data-table-to-display-current-related-record-information.md) - [Displaying Salesforce CMS Files in a Data Table](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/data-table/displaying-salesforce-cms-files-in-a-data-table.md) - [Image](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/image.md) - [Utilizing Avonni Image Component for Before-and-After Image Comparisons](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/image/utilizing-avonni-image-component-for-before-and-after-image-comparisons.md) - [Layout](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/layout.md) - [Configuring the Layout to be responsive](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/layout/configuring-the-layout-to-be-responsive.md) - [Map](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/map.md) - [Set up the map to show record details information](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/map/set-up-the-map-to-show-record-details-information.md) - [Profile Card](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/profile-card.md) - [Set up the Profile Card to display current user information](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) - [Tabs](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/tabs.md) - [Interactions](https://docs.avonnicomponents.com/experience-cloud/tutorials/interactions.md) - [Configure the Open Flow Dialog to open a flow by clicking a button](https://docs.avonnicomponents.com/experience-cloud/tutorials/interactions/configure-the-open-flow-dialog-to-open-a-flow-by-clicking-a-button.md) - [Reactive Components](https://docs.avonnicomponents.com/experience-cloud/tutorials/reactive-components.md) - [Linking Data Table and Map for Dynamic Locations](https://docs.avonnicomponents.com/experience-cloud/tutorials/reactive-components/linking-data-table-and-map-for-dynamic-locations.md) - [Linked Data Tables](https://docs.avonnicomponents.com/experience-cloud/tutorials/reactive-components/linked-data-tables.md) - [Guide to Implementing](https://docs.avonnicomponents.com/experience-cloud/tutorials/reactive-components/guide-to-implementing.md) - [Use Cases](https://docs.avonnicomponents.com/experience-cloud/tutorials/use-cases.md) - [Building a record detail page header](https://docs.avonnicomponents.com/experience-cloud/tutorials/use-cases/building-a-record-detail-page-header.md) - [Creating a Grid Layout](https://docs.avonnicomponents.com/experience-cloud/tutorials/use-cases/creating-a-grid-layout.md) - [How do I contact support?](https://docs.avonnicomponents.com/experience-cloud/help/how-do-i-contact-support.md) - [How do I report bugs?](https://docs.avonnicomponents.com/experience-cloud/help/how-do-i-report-bugs.md) - [Security](https://docs.avonnicomponents.com/experience-cloud/help/security.md) ## Flow Screen - [Welcome](https://docs.avonnicomponents.com/flow/welcome.md): Screen flows that do more than collect a form: over seventy components made for Screen Flows, wired to your Flow variables. - [Product Tour](https://docs.avonnicomponents.com/flow/getting-started/product-tour.md) - [Quickstart Guide](https://docs.avonnicomponents.com/flow/getting-started/quickstart-guide.md) - [Learn the Basics](https://docs.avonnicomponents.com/flow/getting-started/learn-the-basics.md) - [Installation & Licenses management](https://docs.avonnicomponents.com/flow/getting-started/installation-and-licenses-management.md): Install the Avonni Flow Components package, then give every user the two things they need: a package license and the permission set. - [Flow vs. Dynamic Components](https://docs.avonnicomponents.com/flow/getting-started/flow-vs.-dynamic-components.md) - [Flow Components in Experience Sites](https://docs.avonnicomponents.com/flow/getting-started/using-the-avonni-flow-screen-components-in-experience-cloud.md) - [Overview](https://docs.avonnicomponents.com/flow/build-with-ai/overview.md): Connect your AI assistant to the Avonni MCP server and install the Avonni Skills to build and update Avonni Flow Screen Components from plain-language prompts. - [Setup](https://docs.avonnicomponents.com/flow/build-with-ai/setup.md): Install the Avonni Skills and connect the Avonni MCP server to your AI assistant. - [Using the AI Assistant](https://docs.avonnicomponents.com/flow/build-with-ai/using-the-ai-assistant.md): Describe what you want in plain language, and the right skill activates and looks up accurate component knowledge through the MCP server. - [Prompt Library](https://docs.avonnicomponents.com/flow/build-with-ai/prompt-library.md): Copy-paste prompts for building screen flows with Avonni Flow Screen Components, organized by goal. - [Limitations & FAQ](https://docs.avonnicomponents.com/flow/build-with-ai/limitations-and-faq.md): What the Avonni MCP server and Skills do not cover, and fixes for common setup problems. - [For AI Agents](https://docs.avonnicomponents.com/flow/build-with-ai/for-ai-agents.md): Everything on this site is machine-readable: Markdown URLs, a full index, a question-answering endpoint, and the Avonni MCP server. - [Overview](https://docs.avonnicomponents.com/flow/component-builder/overview.md) - [Properties Panel](https://docs.avonnicomponents.com/flow/component-builder/properties-panel.md) - [Data Sources](https://docs.avonnicomponents.com/flow/component-builder/data-sources.md) - [Understanding Data Sources](https://docs.avonnicomponents.com/flow/component-builder/data-sources/understanding-data-sources.md) - [Manual](https://docs.avonnicomponents.com/flow/component-builder/data-sources/manual.md) - [Variable](https://docs.avonnicomponents.com/flow/component-builder/data-sources/variable.md) - [Query](https://docs.avonnicomponents.com/flow/component-builder/data-sources/query.md) - [Query VS Variable](https://docs.avonnicomponents.com/flow/component-builder/data-sources/query-vs-variable.md) - [Picklist](https://docs.avonnicomponents.com/flow/component-builder/data-sources/picklist.md) - [Interactions Panel](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel.md) - [Control Console Tab](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/control-console-tab.md) - [Copy Records](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/copy-records.md) - [Delete Selected Records](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/delete-selected-records.md) - [Duplicate Selected Records](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/duplicate-selected-records.md) - [Edit Selected Records](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/edit-selected-records.md) - [Download](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/download.md) - [Export To](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/export-to.md) - [Fire Confetti](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/fire-confetti.md) - [Flow Navigation](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/flow-navigation.md) - [Navigate](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/navigate.md): To set a navigation on your Salesforce. - [Show Toast](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/show-toast.md) - [Open Alert Modal](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-alert-modal.md) - [Open Confirm](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-confirm.md) - [Open Flow Dialog](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-flow-dialog.md) - [Open Flow Panel](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-flow-panel.md) - [Flow Interaction Output Variables](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/flow-interaction-output-variables.md) - [Update Records](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/update-records.md) - [Update Records Order](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/update-records-order.md) - [Upsert Record](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/upsert-record.md) - [Refresh Query](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/refresh-query.md) - [Refresh All Queries](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/refresh-all-queries.md) - [Open Quick Action](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-quick-action.md) - [Style Panel](https://docs.avonnicomponents.com/flow/component-builder/style-panel.md) - [Component Templates](https://docs.avonnicomponents.com/flow/component-builder/component-templates.md) - [Layout and Customization](https://docs.avonnicomponents.com/flow/component-builder/layout-and-customization.md) - [Alignment controls](https://docs.avonnicomponents.com/flow/component-builder/layout-and-customization/alignment-controls.md) - [Copy / Paste component settings](https://docs.avonnicomponents.com/flow/component-builder/layout-and-customization/copy-paste-component-settings.md) - [Margin / Padding](https://docs.avonnicomponents.com/flow/component-builder/layout-and-customization/margin-padding.md) - [Pull To Boundary](https://docs.avonnicomponents.com/flow/component-builder/layout-and-customization/pull-to-boundary.md) - [Undo / Redo](https://docs.avonnicomponents.com/flow/component-builder/layout-and-customization/undo-redo.md) - [Explore All Flow Screen Components](https://docs.avonnicomponents.com/flow/flow-components/explore-all-flow-screen-components.md) - [Alert](https://docs.avonnicomponents.com/flow/flow-components/alert.md): The Avonni Alert component is a simple way to display important messages to users. Think of it like a helpful notification that grabs their attention when something needs to be highlighted. - [Animation](https://docs.avonnicomponents.com/flow/flow-components/animation.md): The Animation component displays animated content such as Lottie animations, with configurable animation type, frame rate, and playback behavior. - [Audio Player](https://docs.avonnicomponents.com/flow/flow-components/audio-player.md): The Avonni Audio Player provides robust audio playback with extensive customization options for sources, playback controls, volume, and visual styling. - [Avatar](https://docs.avonnicomponents.com/flow/flow-components/avatar.md): The Avonni Avatar component allows your users to express themselves visually by choosing an image or icon that represents them within your application. - [Avatar Group](https://docs.avonnicomponents.com/flow/flow-components/avatar-group.md): The Avonni Avatar Group component clearly and organizedly represents groups of users within your application, enhancing the user experience and making information easily accessible. - [Barcode](https://docs.avonnicomponents.com/flow/flow-components/barcode.md): The Avonni Barcode component lets you easily create and customize barcodes within your Salesforce - [Barcode Scanner](https://docs.avonnicomponents.com/flow/flow-components/barcode-scanner.md): The Avonni Barcode Scanner enables seamless barcode scanning in Salesforce mobile apps, eliminating manual data entry and improving accuracy - [Biometrics](https://docs.avonnicomponents.com/flow/flow-components/biometrics.md): The Avonni Biometrics component enables seamless and secure device-based biometric authentication within Salesforce mobile Screen Flows. - [Blockquote](https://docs.avonnicomponents.com/flow/flow-components/blockquote.md): The Avonni Blockquote provides a visually distinct way to highlight quotes and excerpts in Salesforce Flow screens, improving readability and emphasis. - [Button](https://docs.avonnicomponents.com/flow/flow-components/button.md): The Avonni Button component provides customizable buttons to initiate actions, navigate pages, or perform specific functions. - [Button Group](https://docs.avonnicomponents.com/flow/flow-components/button-group.md): The Avonni Button Group component provides a cohesive way to group buttons in Salesforce Flow screens, improving usability and visual clarity. - [Button Icon](https://docs.avonnicomponents.com/flow/flow-components/button-icon.md): The Avonni Button Icon component adds customizable icons to buttons in Flow screens, providing visual cues for user actions. - [Button Menu](https://docs.avonnicomponents.com/flow/flow-components/button-menu.md): The Avonni Button Menu component offers a compact way to access multiple related options through a clickable button. - [Calendar](https://docs.avonnicomponents.com/flow/flow-components/calendar.md): The Avonni Calendar provides a customizable interface for displaying and managing resources and events in various formats, including calendars, timelines, and agendas. - [Carousel](https://docs.avonnicomponents.com/flow/flow-components/carousel.md): The Avonni Carousel provides a customizable slideshow experience with navigation controls, autoplay options, and styling for various use cases. - [Chart](https://docs.avonnicomponents.com/flow/flow-components/chart.md): The Avonni Chart component lets you easily create various interactive charts to visualize your data in Salesforce. - [Chip Container](https://docs.avonnicomponents.com/flow/flow-components/chip-container.md): The Avonni Chip Container provides a visual way to organize and display interactive chips (tags or labels). - [Combobox](https://docs.avonnicomponents.com/flow/flow-components/combobox.md): A dropdown for picking one or several options on a flow screen, from a manual list, a collection, a picklist field, or a query, with search and actions. - [Color Picker](https://docs.avonnicomponents.com/flow/flow-components/color-picker.md) - [CSV Parser](https://docs.avonnicomponents.com/flow/flow-components/csv-parser.md): The Avonni CSV Parser simplifies importing data from smaller CSV files into any Salesforce object, with options for handling various formatting. - [Date Picker](https://docs.avonnicomponents.com/flow/flow-components/date-picker.md): The Date Picker offers a calendar interface for selecting dates in Salesforce, often used in scheduling, forms, and reports. - [Data Table](https://docs.avonnicomponents.com/flow/flow-components/data-table.md): The Avonni Data Table is a powerful tool for showing and managing data in a table format within your Salesforce. It's like a supercharged spreadsheet you can customize and interact with in many ways. - [Date Time Picker](https://docs.avonnicomponents.com/flow/flow-components/date-time-picker.md): The Date Time Picker offers a visual interface for selecting dates and times, with options for day, week, and month views, and support for recurring appointments. - [Delay Interaction](https://docs.avonnicomponents.com/flow/flow-components/delay-interaction.md): The Delay Interaction component allows you to pause the UI for a set time, useful for creating smooth transitions, simulating processing, and enhancing user experience. - [Document Scanner](https://docs.avonnicomponents.com/flow/flow-components/document-scanner.md): The Avonni Document Scanner uses your device's camera to extract text from documents, allowing you to use it within Salesforce records and flows easily. - [Dual Listbox](https://docs.avonnicomponents.com/flow/flow-components/dual-listbox.md): The Dual Listbox provides two side-by-side lists, allowing users to select and transfer multiple items between them using interactive controls - [Expandable Section](https://docs.avonnicomponents.com/flow/flow-components/expandable-section.md): The Expandable Section (Accordion) provides a collapsible section with a title that expands to reveal hidden content. - [Formatted Address](https://docs.avonnicomponents.com/flow/flow-components/formatted-address.md): The Avonni Formatted Address component automatically formats addresses, validates input, and displays the location on a map. - [Formatted Name](https://docs.avonnicomponents.com/flow/flow-components/formatted-name.md): The Avonni Formatted Name component displays personal name parts (salutation, first, middle, last, suffix) formatted for consistent presentation, with an optional avatar. - [Formatted Value](https://docs.avonnicomponents.com/flow/flow-components/formatted-value.md): The Avonni Formatted Value component displays a single value with automatic, type-specific formatting for consistently presenting Salesforce data. - [Header](https://docs.avonnicomponents.com/flow/flow-components/header.md): The Avonni Header provides a straightforward way to add titles, subtitles, icons, images, and navigation links to create informative and visually engaging headers - [Hero Banner](https://docs.avonnicomponents.com/flow/flow-components/hero-banner.md): The Hero Banner enables the creation of visually engaging hero banners with customizable images/videos, text, calls to action, and responsive design. - [Icon Picker](https://docs.avonnicomponents.com/flow/flow-components/icon-picker.md): The Icon Picker provides a searchable and filterable interface for selecting icons from the Lightning Design System Library. - [Image](https://docs.avonnicomponents.com/flow/flow-components/image.md): The image component allows you to add an image to your screen flow - [Image List](https://docs.avonnicomponents.com/flow/flow-components/image-list.md) - [Input Choice Set](https://docs.avonnicomponents.com/flow/flow-components/input-choice-set.md): The Avonni Input Choice Set offers highly customizable input options for forms, supporting various input types and visual adjustments. - [Input Choice Set Grid](https://docs.avonnicomponents.com/flow/flow-components/input-choice-set-grid.md): The Avonni Input Choice Set Grid presents choices in an organized grid, simplifying selection in forms and data entry. - [Input Counter](https://docs.avonnicomponents.com/flow/flow-components/input-counter.md): The Input Counter component provides a user-friendly way to enter numbers within a specific range. It's like a mini calculator with an input field and two buttons: one to increase and decrease the val - [Input Date Range](https://docs.avonnicomponents.com/flow/flow-components/input-date-range.md): The Input Date Range component provides an intuitive interface for selecting and displaying a range of dates, often used for filtering, booking, or scheduling - [Input Pen](https://docs.avonnicomponents.com/flow/flow-components/input-pen.md): The Avonni Input Pen provides a digital canvas experience on touchscreens with customizable pen styles, colors, and zoom functionality. - [Input Text](https://docs.avonnicomponents.com/flow/flow-components/input-text.md): The Input Text component captures a single line of user-entered text, with length constraints, pattern validation, required state, and customizable error messaging. - [Input Time Range](https://docs.avonnicomponents.com/flow/flow-components/input-time-range.md): The Time Range Picker lets users select a start and end time on a Flow screen, with configurable formatting and labels. - [Illustration](https://docs.avonnicomponents.com/flow/flow-components/illustration.md): The Avonni Illustration displays graphic illustrations to add visual interest and clarify concepts within user interfaces - [Interaction service](https://docs.avonnicomponents.com/flow/flow-components/interaction-service.md): The Interaction Service manages how specific user actions work, like opening a new flow. This component sets up what happens when a user clicks on a particular button of action - [Kanban](https://docs.avonnicomponents.com/flow/flow-components/kanban.md): The Avonni Kanban provides a visual, drag-and-drop interface for managing Salesforce records through workflow stages. Ideal for project management, sales tracking, and customer service - [List](https://docs.avonnicomponents.com/flow/flow-components/list.md): The Avonni List displays records or custom items in a fully customizable, interactive list. It supports multiple layouts, inline actions, filtering, sorting, drag-to-reorder, and pagination. - [Map](https://docs.avonnicomponents.com/flow/flow-components/map.md): The Avonni Map shows a map of a specific place. It can help you get a sense of location or get directions. - [Enable Map Routing](https://docs.avonnicomponents.com/flow/flow-components/map/enable-map-routing.md) - [Metric](https://docs.avonnicomponents.com/flow/flow-components/metric.md): The Avonni Metric displays numerical values with labels to provide context for key metrics and performance indicators - [Microphone](https://docs.avonnicomponents.com/flow/flow-components/microphone.md): The Avonni Microphone seamlessly captures voice notes, interviews, or other audio recordings and automatically attaches them to relevant Salesforce records - [Navigation](https://docs.avonnicomponents.com/flow/flow-components/navigation.md): The Avonni Navigation provides horizontal and vertical menus to guide users. - [NFC Scanner](https://docs.avonnicomponents.com/flow/flow-components/nfc-scanner.md): The Avonni NFC Tag Scanner is a Salesforce mobile component that enables bidirectional communication with NFC tags within your custom flows. - [Pill Container](https://docs.avonnicomponents.com/flow/flow-components/pill-container.md): The Avonni Pill Container displays a horizontal row of customizable "pills" representing labels or icons, with options for styling and interaction. - [Pivot Table](https://docs.avonnicomponents.com/flow/flow-components/pivot-table.md): The Pivot Table summarizes and cross-tabulates records into grouped rows and columns with totals, subtotals, and optional detail rows, on a Flow screen. - [Progress Bar](https://docs.avonnicomponents.com/flow/flow-components/progress-bar.md): The Avonni Progress Bar visually represents the completion percentage of a task or process. - [Progress Circle](https://docs.avonnicomponents.com/flow/flow-components/progress-circle.md): The Avonni Progress Circle visually represents task or process completion using a filling circular gauge. - [Progress Indicator](https://docs.avonnicomponents.com/flow/flow-components/progress-indicator.md): The Avonni Progress Indicator visually displays a task or process's current and completed steps. - [Progress Popover](https://docs.avonnicomponents.com/flow/flow-components/progress-popover.md): The Avonni Progress Popover displays a series of steps, each with a popover containing progress indicators and contextual information. - [QR Code](https://docs.avonnicomponents.com/flow/flow-components/qr-code.md): The Avonni QR Code displays scannable QR codes within flows, enabling easy access and information sharing. - [Rating](https://docs.avonnicomponents.com/flow/flow-components/rating.md): The Avonni Rating component enables users to provide feedback and rate items using interactive star ratings. - [Record Detail](https://docs.avonnicomponents.com/flow/flow-components/record-detail.md): The Avonni Record Detail provides a clean and customizable way to display multiple fields from a single record. - [Record Grid](https://docs.avonnicomponents.com/flow/flow-components/record-grid.md): The Record Grid displays a collection of records in a transposed grid — each record becomes a column and each configured field becomes a row — on a Flow screen. - [Scoped Notification](https://docs.avonnicomponents.com/flow/flow-components/scoped-notification.md): The Avonni Scoped Notification displays notification messages to users with an optional action - [Separator](https://docs.avonnicomponents.com/flow/flow-components/separator.md): The Avonni Separator provides a horizontal line to separate and structure content visually - [Slider](https://docs.avonnicomponents.com/flow/flow-components/slider.md): The Slider component provides a draggable handle on a track for selecting values within a specified range. - [Tabs](https://docs.avonnicomponents.com/flow/flow-components/tabs.md): The Avonni Tabs Component helps you organize and display information on a single page. It allows you to separate information into different tabs, making it easier for users to find what they want. - [Text Area](https://docs.avonnicomponents.com/flow/flow-components/text-area.md): The Avonni Text Area component offers customizable multi-line text input to capture extensive user input. - [Timeline](https://docs.avonnicomponents.com/flow/flow-components/timeline.md): The Avonni Timeline component transforms lists of events into interactive visual timelines for easier understanding of chronological data. - [Timer](https://docs.avonnicomponents.com/flow/flow-components/timer.md): The Timer component lets users track elapsed time on a Flow screen, with start, pause, stop, and reset controls, and can save the recorded time back to a record. - [Tree](https://docs.avonnicomponents.com/flow/flow-components/tree.md): The Avonni Tree presents hierarchical data in a user-friendly, expandable/collapsible tree for easy navigation. - [Tree Grid](https://docs.avonnicomponents.com/flow/flow-components/tree-grid.md): The Tree Grid displays hierarchical records in an expandable, columnar table on a Flow screen, with configurable columns, row toggles, and selection. - [User Location](https://docs.avonnicomponents.com/flow/flow-components/user-location.md): The Avonni User Location component provides a way to capture and display the user's current geographic location. - [Vertical Visual Picker](https://docs.avonnicomponents.com/flow/flow-components/vertical-visual-picker.md): The Avonni Vertical Picker offers a clear, organized vertical layout for selecting options. - [Visual Picker](https://docs.avonnicomponents.com/flow/flow-components/visual-picker.md): The Avonni Visual Picker transforms the selection process into an interactive and visually appealing user experience - [Visual Picker Link](https://docs.avonnicomponents.com/flow/flow-components/visual-picker-link.md): The Avonni Picker Link component offers an engaging and interactive way to link to external content. - [Video Player](https://docs.avonnicomponents.com/flow/flow-components/video-player.md): The Avonni Video Player provides configurable video playback options for controlling the source, playback behavior, volume, and visual styling. - [Welcome Mat](https://docs.avonnicomponents.com/flow/flow-components/welcome-mat.md): The Avonni Welcome Mat offers a two-pane interface with informational content and actionable tiles for exploring a topic or application. - [Overview](https://docs.avonnicomponents.com/flow/actions/overview.md) - [Data Manipulation and Transformation](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation.md) - [Convert Lead](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/convert-lead.md) - [Create file](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/create-file.md) - [Split Text to Text Collection](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/split-text-to-text-collection.md) - [SObject Collection Math](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/sobject-collection-math.md) - [SObject Collection Join](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/sobject-collection-join.md) - [Get Record from SObject Collection](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/get-record-from-sobject-collection.md) - [SObject Collection to Activity Timeline Items](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/sobject-collection-to-activity-timeline-items.md) - [SObject Collection to Calendar Marked Date Collection](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/sobject-collection-to-calendar-marked-date-collection.md) - [SObject Collection to Scheduler Events](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/sobject-collection-to-scheduler-events.md) - [SObject Collection to Text Collection](https://docs.avonnicomponents.com/flow/actions/data-manipulation-and-transformation/sobject-collection-to-text-collection.md) - [Data Conversion and Formatting](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting.md) - [Text Collection Get Value](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/text-collection-get-value.md) - [Get Value from String Collection](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/get-value-from-string-collection.md) - [Number Collection Get Value](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/number-collection-get-value.md) - [Join Text Collection](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/join-text-collection.md) - [Format Text in SObject Collection](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/format-text-in-sobject-collection.md) - [Format Text Collection](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/format-text-collection.md) - [Text Collection to Combobox Options](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/text-collection-to-combobox-options.md): Turn a Text Collection into options for the Avonni Combobox, each text becoming one option, so a list the flow already holds can fill a dropdown. - [Text Collection to Dual Listbox Options](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/text-collection-to-dual-listbox-options.md) - [Text Collection to Progress Indicator Steps](https://docs.avonnicomponents.com/flow/actions/data-conversion-and-formatting/text-collection-to-progress-indicator-steps.md) - [UI & Navigation](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation.md) - [New Avatar Action Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-avatar-action-collection.md) - [New Button Menu Item Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-button-menu-item-collection.md) - [New Carousel Item Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-carousel-item-collection.md) - [New Combobox Option Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-combobox-option-collection.md): Build a reusable collection of options for the Avonni Combobox in a flow action, with labels, values, secondary text and avatars, before the screen. - [New Dual Listbox Option Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-dual-listbox-option-collection.md) - [New Header Action Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-header-action-collection.md) - [New Header Avatar Action Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-header-avatar-action-collection.md) - [New List Action Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-list-action-collection.md) - [New Navigation Item Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-navigation-item-collection.md) - [New Progress Indicator Step Collection](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-progress-indicator-step-collection.md) - [Videos](https://docs.avonnicomponents.com/flow/tutorials/videos.md) - [Projects](https://docs.avonnicomponents.com/flow/tutorials/projects.md): Projects give you hands-on practice with Avonni Components via step-by-step instructions. You'll gain new skills — and confidence — faster than you thought possible. - [Account Management](https://docs.avonnicomponents.com/flow/tutorials/projects/account-management.md) - [Activity Scorecard](https://docs.avonnicomponents.com/flow/tutorials/projects/activity-scorecard.md) - [Advanced related list](https://docs.avonnicomponents.com/flow/tutorials/projects/advanced-related-list.md) - [Building a Dynamic Map](https://docs.avonnicomponents.com/flow/tutorials/projects/building-a-dynamic-map.md) - [Building a map with instant account insights](https://docs.avonnicomponents.com/flow/tutorials/projects/building-a-map-with-instant-account-insights.md) - [Building a Marketing Campaign Calendar](https://docs.avonnicomponents.com/flow/tutorials/projects/building-a-marketing-campaign-calendar.md) - [Business Quote with vertical progress indicator](https://docs.avonnicomponents.com/flow/tutorials/projects/business-quote-with-vertical-progress-indicator.md) - [Creating Navigational Screen Flows in Router Mode](https://docs.avonnicomponents.com/flow/tutorials/projects/creating-navigational-screen-flows-in-router-mode.md) - [Extra Baggage Selection using Reactive Components](https://docs.avonnicomponents.com/flow/tutorials/projects/extra-baggage-selection-using-reactive-components.md) - [Generating and Displaying Barcodes for Product Codes](https://docs.avonnicomponents.com/flow/tutorials/projects/generating-and-displaying-barcodes-for-product-codes.md) - [Interactive Contact List](https://docs.avonnicomponents.com/flow/tutorials/projects/interactive-contact-list.md) - [Implementing a bulk edit on the Data Table](https://docs.avonnicomponents.com/flow/tutorials/projects/implementing-a-bulk-edit-on-the-data-table.md) - [Interactive Map Filtering](https://docs.avonnicomponents.com/flow/tutorials/projects/interactive-map-filtering.md) - [Left-Side Vertical Navigation](https://docs.avonnicomponents.com/flow/tutorials/projects/left-side-vertical-navigation.md) - [Loan Summary](https://docs.avonnicomponents.com/flow/tutorials/projects/loan-summary.md) - [Product showcase](https://docs.avonnicomponents.com/flow/tutorials/projects/product-showcase.md): Learn the basics of the Avonni Flow Screen Components library with this example. - [Video Playlist Component](https://docs.avonnicomponents.com/flow/tutorials/projects/video-playlist-component.md) - [Create a Clickable Map with Details information](https://docs.avonnicomponents.com/flow/tutorials/projects/create-a-clickable-map-with-details-information.md) - [Today's Accounts to Visit](https://docs.avonnicomponents.com/flow/tutorials/projects/todays-accounts-to-visit.md) - [User Activity Report](https://docs.avonnicomponents.com/flow/tutorials/projects/user-activity-report.md) - [Components](https://docs.avonnicomponents.com/flow/tutorials/components.md) - [Alert](https://docs.avonnicomponents.com/flow/tutorials/components/alert.md) - [Create a custom branding alert](https://docs.avonnicomponents.com/flow/tutorials/components/alert/create-a-custom-branding-alert.md) - [Create an error alert dismissible](https://docs.avonnicomponents.com/flow/tutorials/components/alert/create-an-error-alert-dismissible.md) - [Avatar](https://docs.avonnicomponents.com/flow/tutorials/components/avatar.md) - [Create an avatar with actions](https://docs.avonnicomponents.com/flow/tutorials/components/avatar/create-an-avatar-with-actions.md) - [Create an avatar with details](https://docs.avonnicomponents.com/flow/tutorials/components/avatar/create-an-avatar-with-details.md) - [Avatar Group](https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group.md) - [Display a list of contacts related to an account](https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group/display-a-list-of-contacts-related-to-an-account.md) - [Display a list of sharing users related to the record](https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group/display-a-list-of-sharing-users-related-to-the-record.md) - [Barcode](https://docs.avonnicomponents.com/flow/tutorials/components/barcode.md) - [Biometrics](https://docs.avonnicomponents.com/flow/tutorials/components/biometrics.md) - [101 Tutorial](https://docs.avonnicomponents.com/flow/tutorials/components/biometrics/101-tutorial.md) - [Button](https://docs.avonnicomponents.com/flow/tutorials/components/button.md) - [Customizing Flow Navigation Buttons](https://docs.avonnicomponents.com/flow/tutorials/components/button/customizing-flow-navigation-buttons.md) - [How to Add a "Cancel and Close" Button](https://docs.avonnicomponents.com/flow/tutorials/components/button/how-to-add-a-cancel-and-close-button.md) - [How to Open Flows from Buttons](https://docs.avonnicomponents.com/flow/tutorials/components/button/how-to-open-flows-from-buttons.md) - [Button Groups](https://docs.avonnicomponents.com/flow/tutorials/components/button-groups.md) - [Identifying Clicked Buttons](https://docs.avonnicomponents.com/flow/tutorials/components/button-groups/identifying-clicked-buttons.md) - [Button Menu](https://docs.avonnicomponents.com/flow/tutorials/components/button-menu.md) - [How to change dynamically Avonni Button Menu Icons](https://docs.avonnicomponents.com/flow/tutorials/components/button-menu/how-to-change-dynamically-avonni-button-menu-icons.md) - [Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar.md) - [Calendar 101 Tutorial](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/calendar-101-tutorial.md) - [How to Connect Multiple Data Sources to the Avonni Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-connect-multiple-data-sources-to-the-avonni-calendar.md) - [How to Customize Time Spans](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-customize-time-spans.md) - [How to Customize the Right-Click Menu](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-customize-the-right-click-menu.md) - [How to Add an Edit Action to Events](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-add-an-edit-action-to-events.md) - [How to Add a New Event Button to the Avonni Calendar Header](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-add-a-new-event-button-to-the-avonni-calendar-header.md) - [How to Create Events by Dragging in the Avonni Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-create-events-by-dragging-in-the-avonni-calendar.md) - [How to Reschedule Events with Drag and Drop](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-reschedule-events-with-drag-and-drop.md) - [How to Color-Code Calendar Entries in the Avonni Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-color-code-calendar-entries-in-the-avonni-calendar.md) - [Using a variable Data Source](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/using-a-variable-data-source.md) - [Using a Query Data Source](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/using-a-query-data-source.md) - [Carousel](https://docs.avonnicomponents.com/flow/tutorials/components/carousel.md) - [Build a Related Products Carousel](https://docs.avonnicomponents.com/flow/tutorials/components/carousel/build-a-related-products-carousel.md) - [Combobox](https://docs.avonnicomponents.com/flow/tutorials/components/combobox.md): Step-by-step Combobox tutorials for screen flows: fill the options, link two comboboxes, and use what the user picks in queries, tables and flows. - [Build Combobox Options](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/build-combobox-options.md): Choose how to fill a Combobox without a query: typed options, a converted Text Collection, or an option collection built by an action. - [Search Large Lists in a Combobox](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/search-large-lists-in-a-combobox.md): Let users find one account among thousands by typing a few letters, with a Combobox that queries Salesforce on each search instead of loading every record. - [Add a Create New Action to a Combobox](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/add-a-create-new-action-to-a-combobox.md): Add a New contact action inside a Combobox dropdown that opens a short flow, so agents create a missing contact without leaving the case screen. - [Implement Dependent Picklists in Comboboxes](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/implement-dependent-picklists-in-comboboxes.md): Show only the reason details that fit the case reason an agent picks, and keep the detail field locked until a reason is chosen. - [Filter Data Tables with Multi-Select Comboboxes](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/filter-data-tables-with-multi-select-comboboxes.md): Let agents pick several case priorities in a multi-select Combobox and see a Data Table on the same screen list only the matching open cases. - [Use a Combobox Selection in a Query or Flow](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/use-a-combobox-selection-in-a-query-or-flow.md): Pass what an agent picks in a Combobox to Get Records, another component's query, a flow dialog or a record update, using the right value output. - [Keep Combobox Selections When Users Go Back](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/keep-combobox-selections-when-users-go-back.md): Keep what an agent picked in a Combobox when they click Previous or when a Decision sends them back to the screen, using a variable and the revisit setting. - [CSV Parser](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser.md): Step-by-step tutorials for the Avonni CSV Parser in screen flows, from a first import to pre-mapped columns, row review and tricky files. - [Import a CSV file in a screen flow](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser/101-tutorial.md): Build a screen flow that turns a CSV of trade show booth scans into Leads, with the file checked and mapped on screen before one Create Records saves it. - [Pre-map CSV columns for a recurring import](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser/pre-map-csv-columns.md): Map the headers of a file that comes back every month once, in the flow, so users drop the export and press Next while required fields stay enforced. - [Review rows before saving](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser/review-rows-before-saving.md): Show every row of an uploaded CSV in an editable Avonni Data Table, let the user fix typos, then create the records in one step. - [Import a file stored in Salesforce](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser/import-a-file-stored-in-salesforce.md): Import a CSV already attached to a record with File Value, or keep the uploaded file on the record with Save as Content Document. - [Fix encoding and delimiter issues](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser/fix-encoding-and-delimiter-issues.md): Diagnose a CSV file that imports wrong (garbled accents, one giant column, a title row) and fix it with the CSV Parser's Parser settings. - [Data Table](https://docs.avonnicomponents.com/flow/tutorials/components/data-table.md) - [Adding Filters](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/adding-filters.md) - [How to add Images onthe Data Table](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/how-to-add-images-onthe-data-table.md) - [Creating Row Actions](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/creating-row-actions.md) - [Displaying a Record as a QR Code](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/displaying-a-record-as-a-qr-code.md) - [Displaying Record Name field as a link](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md) - [Learn the Basics](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/learn-the-basics.md) - [Making a field editable](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/making-a-field-editable.md) - [Setting Up Data Export](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/setting-up-data-export.md) - [Tips and Tricks](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks.md) - [Activate infinite scrolling](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/activate-infinite-scrolling.md) - [Creating an action from a button or a link](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/creating-an-action-from-a-button-or-a-link.md) - [Customizing the Badge Color using a formula](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula.md) - [How to Grayscale Header Actions Dynamically in Avonni Data Table](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-grayscale-header-actions-dynamically-in-avonni-data-table.md) - [How to Conditionally Color Cells](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md) - [Enabling auto-refresh on the Data Table when pressing a button](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/enabling-auto-refresh-on-the-data-table-when-pressing-a-button.md) - [Handling formula text field](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/handling-formula-text-field.md) - [How to set column visibity](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-set-column-visibity.md) - [Passing multiple record IDs to another flow](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/passing-multiple-record-ids-to-another-flow.md) - [Data Table Editor](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/data-table-editor.md) - [Date Picker](https://docs.avonnicomponents.com/flow/tutorials/components/date-picker.md) - [Display a date picker with Marked Dates from a Get Records](https://docs.avonnicomponents.com/flow/tutorials/components/date-picker/display-a-date-picker-with-marked-dates-from-a-get-records.md) - [Date Time Picker](https://docs.avonnicomponents.com/flow/tutorials/components/date-time-picker.md) - [How to create Collection Variables for StartDateTime and EndDateTime](https://docs.avonnicomponents.com/flow/tutorials/components/date-time-picker/how-to-create-collection-variables-for-startdatetime-and-enddatetime.md) - [How to Block Out Times](https://docs.avonnicomponents.com/flow/tutorials/components/date-time-picker/how-to-block-out-times.md) - [Delay Interaction](https://docs.avonnicomponents.com/flow/tutorials/components/delay-interaction.md) - [Creating a Confetti Celebration on the Final Screen](https://docs.avonnicomponents.com/flow/tutorials/components/delay-interaction/creating-a-confetti-celebration-on-the-final-screen.md) - [Launch a flow dialog without a screen](https://docs.avonnicomponents.com/flow/tutorials/components/delay-interaction/launch-a-flow-dialog-without-a-screen.md) - [Dual Listbox](https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox.md) - [Display contacts with custom icons](https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox/display-contacts-with-custom-icons.md) - [Accounts list group by industry](https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox/accounts-list-group-by-industry.md) - [Expandable Section](https://docs.avonnicomponents.com/flow/tutorials/components/expandable-section.md) - [Create Dynamic Expandable Sections](https://docs.avonnicomponents.com/flow/tutorials/components/expandable-section/create-dynamic-expandable-sections.md) - [Header](https://docs.avonnicomponents.com/flow/tutorials/components/header.md) - [Building Engaging Card Headers](https://docs.avonnicomponents.com/flow/tutorials/components/header/building-engaging-card-headers.md) - [Crafting a Profile Header](https://docs.avonnicomponents.com/flow/tutorials/components/header/crafting-a-profile-header.md) - [Adding Action Buttons to Headers](https://docs.avonnicomponents.com/flow/tutorials/components/header/adding-action-buttons-to-headers.md) - [Adding a Background Image to Your Header](https://docs.avonnicomponents.com/flow/tutorials/components/header/adding-a-background-image-to-your-header.md) - [Input Pen](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen.md) - [Add the custom Toolbar](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen/add-the-custom-toolbar.md) - [How to Store Input Pen Drawings as Attachments in Salesforce](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen/how-to-store-input-pen-drawings-as-attachments-in-salesforce.md) - [Kanban](https://docs.avonnicomponents.com/flow/tutorials/components/kanban.md) - [Introduction](https://docs.avonnicomponents.com/flow/tutorials/components/kanban/introduction.md) - [List](https://docs.avonnicomponents.com/flow/tutorials/components/list.md) - [Create a grid list with images](https://docs.avonnicomponents.com/flow/tutorials/components/list/create-a-grid-list-with-images.md) - [Create a sortable list](https://docs.avonnicomponents.com/flow/tutorials/components/list/create-a-sortable-list.md) - [How to Reorder Items and Update Records](https://docs.avonnicomponents.com/flow/tutorials/components/list/how-to-reorder-items-and-update-records.md) - [Vertical List with Actions](https://docs.avonnicomponents.com/flow/tutorials/components/list/vertical-list-with-actions.md) - [Navigation](https://docs.avonnicomponents.com/flow/tutorials/components/navigation.md) - [Building a Navigation Menu with Related Records](https://docs.avonnicomponents.com/flow/tutorials/components/navigation/building-a-navigation-menu-with-related-records.md) - [Map](https://docs.avonnicomponents.com/flow/tutorials/components/map.md) - [Customize the Map Marker](https://docs.avonnicomponents.com/flow/tutorials/components/map/customize-the-map-marker.md) - [Metric](https://docs.avonnicomponents.com/flow/tutorials/components/metric.md) - [Introduction](https://docs.avonnicomponents.com/flow/tutorials/components/metric/introduction.md) - [Microphone](https://docs.avonnicomponents.com/flow/tutorials/components/microphone.md) - [Save the Microphone recording file as an attached on a record](https://docs.avonnicomponents.com/flow/tutorials/components/microphone/save-the-microphone-recording-file-as-an-attached-on-a-record.md) - [Progress Indicator](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator.md) - [Creating a Universal Dynamic Progress Step Collection](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator/creating-a-universal-dynamic-progress-step-collection.md) - [How to Change the Appearance of Your Progress Indicator using a variable](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator/how-to-change-the-appearance-of-your-progress-indicator-using-a-variable.md) - [Error Handling](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator/error-handling.md) - [QR Code](https://docs.avonnicomponents.com/flow/tutorials/components/qr-code.md) - [Generate a QR Code from a record field](https://docs.avonnicomponents.com/flow/tutorials/components/qr-code/generate-a-qr-code-from-a-record-field.md) - [Record Detail](https://docs.avonnicomponents.com/flow/tutorials/components/record-detail.md) - [Using the Record Detail with Reactive Screens](https://docs.avonnicomponents.com/flow/tutorials/components/record-detail/using-the-record-detail-with-reactive-screens.md) - [Scoped Notification](https://docs.avonnicomponents.com/flow/tutorials/components/scoped-notification.md) - [Display message based on a value](https://docs.avonnicomponents.com/flow/tutorials/components/scoped-notification/display-message-based-on-a-value.md) - [Tabs](https://docs.avonnicomponents.com/flow/tutorials/components/tabs.md) - [Text Area](https://docs.avonnicomponents.com/flow/tutorials/components/text-area.md) - [TextArea issue with max length when clicking on the next button](https://docs.avonnicomponents.com/flow/tutorials/components/text-area/textarea-issue-with-max-length-when-clicking-on-the-next-button.md) - [Tree](https://docs.avonnicomponents.com/flow/tutorials/components/tree.md) - [Build a Tree View with Dynamic Record Details](https://docs.avonnicomponents.com/flow/tutorials/components/tree/build-a-tree-view-with-dynamic-record-details.md) - [Timeline](https://docs.avonnicomponents.com/flow/tutorials/components/timeline.md) - [Assigning multiple source collection to the Timeline](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/assigning-multiple-source-collection-to-the-timeline.md) - [Customizing Date Format in the Timeline Component using Luxon](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/customizing-date-format-in-the-timeline-component-using-luxon.md) - [Create a horizontal activity timeline](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/create-a-horizontal-activity-timeline.md) - [Display Tasks](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/display-tasks.md) - [Perform actions on selected tasks](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/perform-actions-on-selected-tasks.md) - [Vertical Visual Picker](https://docs.avonnicomponents.com/flow/tutorials/components/vertical-visual-picker.md) - [Adding sub-items](https://docs.avonnicomponents.com/flow/tutorials/components/vertical-visual-picker/adding-sub-items.md) - [Display a list of online contacts](https://docs.avonnicomponents.com/flow/tutorials/components/vertical-visual-picker/display-a-list-of-online-contacts.md) - [Interactions](https://docs.avonnicomponents.com/flow/tutorials/interactions.md) - [Enabling auto-refresh for queries after the Flow Dialog ends](https://docs.avonnicomponents.com/flow/tutorials/interactions/enabling-auto-refresh-for-queries-after-the-flow-dialog-ends.md) - [How to create an interaction to navigate to an object](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-create-an-interaction-to-navigate-to-an-object.md) - [How to create an interaction to a record page](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-create-an-interaction-to-a-record-page.md) - [How to create an interaction to open another flow](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-create-an-interaction-to-open-another-flow.md) - [How to pass an Input Variable from One Flow to Another](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-pass-an-input-variable-from-one-flow-to-another.md) - [Expression Syntax in Interactions](https://docs.avonnicomponents.com/flow/tutorials/interactions/expression-syntax-in-interactions.md) - [How to setup an Open Flow Panel interaction](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-setup-an-open-flow-panel-interaction.md) - [Reactive Query Tutorials](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials.md) - [How to make Data Tables Reactive](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-make-data-tables-reactive.md) - [Build a reactive Data Table Using Dependent Picklists](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/build-a-reactive-data-table-using-dependent-picklists.md) - [Building a Dynamic Metrics Dashboard with the Data Table](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/building-a-dynamic-metrics-dashboard-with-the-data-table.md) - [How to build a reactive 'Quarterly Opportunity Tracker' component](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-build-a-reactive-quarterly-opportunity-tracker-component.md) - [How to Create a Combobox-Filtered Data Table](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-create-a-combobox-filtered-data-table.md) - [Create a Dynamically Linked Account-Contact View](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/create-a-dynamically-linked-account-contact-view.md) - [Troubleshooting](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/troubleshooting.md) - [Tips and Tricks](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks.md) - [Create a link to the record using the href attribute](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/create-a-link-to-the-record-using-the-href-attribute.md) - [Create a variable and use it in a component property](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/create-a-variable-and-use-it-in-a-component-property.md) - [Hide Standard Header and Footer in a flow](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/hide-standard-header-and-footer-in-a-flow.md) - [How to pass your current RecordID in your screen flow](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/how-to-pass-your-current-recordid-in-your-screen-flow.md): How to do it from a Lightning Page or a Quick Action - [Platform Events](https://docs.avonnicomponents.com/flow/tutorials/platform-events.md): Real-Time Communication for Seamless Flows - [Configuration tutorial](https://docs.avonnicomponents.com/flow/tutorials/platform-events/configuration-tutorial.md) - [Performance Guide](https://docs.avonnicomponents.com/flow/help/performance-guide.md): This page offers solutions for improving the speed of the Avonni Components package in Salesforce. - [Support & Troubleshooting](https://docs.avonnicomponents.com/flow/help/support-and-troubleshooting.md) - [Component Lifecycle in Flow](https://docs.avonnicomponents.com/flow/help/component-lifecycle-in-flow.md) - [Permissions & Data Access](https://docs.avonnicomponents.com/flow/help/permissions-and-data-access.md) - [Salesforce Flow Limit](https://docs.avonnicomponents.com/flow/miscellaneous/salesforce-flow-limit.md) - [Security](https://docs.avonnicomponents.com/flow/miscellaneous/security.md) ## Release Notes - [What's New At Avonni](https://docs.avonnicomponents.com/changelog/whats-new-at-avonni.md): Stay up to date with the latest features, improvements, and fixes across all Avonni component suites for Salesforce. - [Archives](https://docs.avonnicomponents.com/changelog/archives.md) - [August 28, 2026](https://docs.avonnicomponents.com/changelog/archives/august-28-2026.md): Stay up to date with the latest features, improvements, and fixes across all Avonni component suites for Salesforce. - [August 12, 2026](https://docs.avonnicomponents.com/changelog/archives/august-12-2026.md) - [July 10, 2026](https://docs.avonnicomponents.com/changelog/archives/july-10-2026.md) - [June 15, 2026](https://docs.avonnicomponents.com/changelog/archives/june-15-2026.md) - [May 22, 2026](https://docs.avonnicomponents.com/changelog/archives/may-22-2026.md): Stay up to date with the latest features, improvements, and fixes across all Avonni component suites for Salesforce. - [May 14, 2026](https://docs.avonnicomponents.com/changelog/archives/may-14-2026.md): Stay up to date with the latest features, improvements, and fixes across all Avonni component suites for Salesforce. - [All Archives](https://docs.avonnicomponents.com/changelog/archives/all-archives.md) - [Copy of What's New At Avonni](https://docs.avonnicomponents.com/changelog/archives/copy-of-whats-new-at-avonni.md): Stay up to date with the latest features, improvements, and fixes across all Avonni component suites for Salesforce. ## Projects - [Welcome](https://docs.avonnicomponents.com/projects/welcome.md) - [Browse all projects](https://docs.avonnicomponents.com/projects/use-cases/overview.md): All 27 projects in one place, by surface and by component. - [Boards and pipelines](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines.md): Kanban boards, dispatch timelines and live walls, where a drag is a real update. - [Listings board](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/listings-board.md): A real estate office follows every listing from listed to sold, one swimlane per agent, with the asking total of each stage in view. - [Opportunity Pipeline Board](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/opportunity-pipeline-board.md): Move a deal by dragging its card, and let a validation rule refuse the moves that are not ready. - [Live Call Board](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/live-call-board.md): Give Sales teams real-time visibility on Leads with Dynamic Components and Flow. - [Field Service Dispatch Board](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/field-service-dispatch-board.md): Put the technician timeline and the map of the day's jobs on one screen, from one query. - [Shipment Tracking Wall](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/shipment-tracking-wall.md): Track every parcel on one board, refreshed by platform events as the carrier reports. - [Live crew board](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/live-crew-board.md): Seven technicians on one day, 7 AM to 6 PM, with reschedule and reassign one click from any job. - [Richer record pages](https://docs.avonnicomponents.com/projects/use-cases/record-pages.md): Panels, timelines, catalogs and threads that live on the record page itself. - [Account Highlight Panel](https://docs.avonnicomponents.com/projects/use-cases/record-pages/account-highlight-panel.md): Add on to the highlight panel using Dynamic Components and charts. - [Account Research Panel](https://docs.avonnicomponents.com/projects/use-cases/record-pages/account-research-panel.md): Compose an Agentforce agent with live account metrics that refresh as it answers. - [Case thread with a pinned workaround](https://docs.avonnicomponents.com/projects/use-cases/record-pages/case-thread-with-a-pinned-workaround.md): A support conversation on the Case record: received and sent bubbles, a pinned workaround at the top, a mention to escalate, a reply box. - [Visual product catalog](https://docs.avonnicomponents.com/projects/use-cases/record-pages/visual-product-catalog.md): The spring catalog on the account record: six products, one photo each, an Add to order button under every tile. - [Account PDF Viewer](https://docs.avonnicomponents.com/projects/use-cases/record-pages/account-pdf-viewer.md): Display and annotate PDFs attached to any record, directly from the record page. - [Account map in one tag](https://docs.avonnicomponents.com/projects/use-cases/record-pages/account-map-in-one-tag.md): The account tree under the highlights panel: subsidiaries, their contacts, their open deals, one click to drill. - [Contact Life Events](https://docs.avonnicomponents.com/projects/use-cases/record-pages/contact-life-events.md): Track your Contact's history with the Timeline component. - [Inside a screen flow](https://docs.avonnicomponents.com/projects/use-cases/inside-a-flow.md): Flow screens that capture a drawing, a signature, a slot or a CSV file. - [Site survey inside a flow](https://docs.avonnicomponents.com/projects/use-cases/inside-a-flow/site-survey-inside-a-flow.md): A technician traces the roof on a live map, in step 2 of a screen flow, and the shape is saved as a file on the work order. - [Customer sign-off inside a flow](https://docs.avonnicomponents.com/projects/use-cases/inside-a-flow/customer-sign-off-inside-a-flow.md): The customer signs the handover on the last screen of a flow, and the signature lands on the work order as a file. - [Book the next appointment](https://docs.avonnicomponents.com/projects/use-cases/inside-a-flow/book-the-next-appointment.md): A dental clinic books the next visit from a screen flow: one week of slots, lunch and taken slots greyed out, one tap to pick. - [Case Import Wizard](https://docs.avonnicomponents.com/projects/use-cases/inside-a-flow/case-import-wizard.md): A guided multi-step wizard that imports Cases from a CSV and matches them with accounts. - [Portals and partner sites](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites.md): Experience site pages for the people who are not in your org. - [Partner order desk](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/partner-order-desk.md): A distributor edits quantities, drops purchase orders and follows delivery on its own orders, from the partner site, with no Salesforce chrome in sight. - [Track my installation](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/track-my-installation.md): A homeowner follows the solar installation step by step on the customer portal, from the signed proposal to the grid connection, without a Salesforce login. - [Fall course catalog](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/fall-course-catalog.md): An outdoor school lists its fall courses on the portal: six photos, dates, price and seats left under each. - [Appointment Self-Booking Portal](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/appointment-self-booking-portal.md): Let customers book themselves on a public page that only ever offers the time you are actually free. - [Portal Case Deflection](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/portal-case-deflection.md): Ask what the question is about, then answer it, so the case is never opened. - [Reporting without a report](https://docs.avonnicomponents.com/projects/use-cases/reporting.md): Pivots, charts and grouped tables computed live from your records. - [Revenue cube without a report](https://docs.avonnicomponents.com/projects/use-cases/reporting/revenue-cube-without-a-report.md): Closed won revenue by region and quarter, totals on both axes, computed live from opportunities. - [Bookings stacked by region](https://docs.avonnicomponents.com/projects/use-cases/reporting/bookings-stacked-by-region.md): Twelve months of closed won bookings, every column stacked by region, drawn live from the opportunities on one tab of the Sales app. - [Expense approvals, grouped by employee](https://docs.avonnicomponents.com/projects/use-cases/reporting/expense-approvals-grouped-by-employee.md): Fourteen expense lines grouped by employee, status badges, three lines checked and an Approve selected button. - [Data from outside Salesforce](https://docs.avonnicomponents.com/projects/use-cases/outside-data.md): External objects and live API calls, shown like any other record. - [External Orders Table](https://docs.avonnicomponents.com/projects/use-cases/outside-data/external-orders-table.md): Display reactive Data Tables of external records that live in another system. - [Contact Local Weather](https://docs.avonnicomponents.com/projects/use-cases/outside-data/contact-local-weather.md): Build a weather panel using Dynamic Components, Flow and standard HTTP actions. - [Overview](https://docs.avonnicomponents.com/projects/dynamic-components/overview.md) - [Fundamentals](https://docs.avonnicomponents.com/projects/dynamic-components/fundamentals.md) - [My Active Opportunities](https://docs.avonnicomponents.com/projects/dynamic-components/fundamentals/my-active-opportunities.md) - [How to Use Avatars as Quick Links to Related Records](https://docs.avonnicomponents.com/projects/dynamic-components/fundamentals/how-to-use-avatars-as-quick-links-to-related-records.md) - [Enhanced Related List](https://docs.avonnicomponents.com/projects/dynamic-components/fundamentals/enhanced-related-list.md) - [Working with Data](https://docs.avonnicomponents.com/projects/dynamic-components/working-with-data.md) - [Related Contacts Card](https://docs.avonnicomponents.com/projects/dynamic-components/working-with-data/related-contacts-card.md) - [Child Relationship Visualization](https://docs.avonnicomponents.com/projects/dynamic-components/working-with-data/child-relationship-visualization.md) - [User Activity Report with Dynamic Components](https://docs.avonnicomponents.com/projects/dynamic-components/working-with-data/user-activity-report.md): The same report as the Flow tutorial, built with Dynamic Components instead of a screen flow. - [Build a "Quick Lead" Entry Form](https://docs.avonnicomponents.com/projects/dynamic-components/working-with-data/build-a-quick-lead-entry-form.md) - [How to Build a Record Edit Form for modals & panels](https://docs.avonnicomponents.com/projects/dynamic-components/working-with-data/how-to-build-a-record-edit-form-for-modals-and-panels.md) - [Layout & Interactions](https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions.md) - [Build a Custom Record Header & Highlights Panel](https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/build-a-custom-record-header-and-highlights-panel.md) - [Building Custom Layouts](https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/building-custom-layouts.md) - [Dynamic Opportunity Viewer](https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/dynamic-opportunity-viewer.md) - [Dynamic Tradeshow Campaign Performance Dashboard](https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/dynamic-tradeshow-campaign-performance-dashboard.md) - [Vertical Tabs with Reactive Data Table](https://docs.avonnicomponents.com/projects/dynamic-components/layout-and-interactions/vertical-tabs-with-reactive-data-table.md) - [Overview](https://docs.avonnicomponents.com/projects/flow-components/overview.md): The Flow Screen Components tutorials live in the Flow documentation. - [Home](https://docs.avonnicomponents.com/projects/experience-cloud-components/home.md) - [Building a MapCard](https://docs.avonnicomponents.com/projects/experience-cloud-components/building-a-mapcard.md) - [Configuring the Avonni Data Table](https://docs.avonnicomponents.com/projects/experience-cloud-components/configuring-the-avonni-data-table.md) - [Create an Export To button on the Data Table](https://docs.avonnicomponents.com/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md) - [Show Current User in Profile Card](https://docs.avonnicomponents.com/projects/experience-cloud-components/show-current-user-in-profile-card.md) - [Responsive Layout](https://docs.avonnicomponents.com/projects/experience-cloud-components/responsive-layout.md) --- # 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 This site has an agentic ask interface you may use to query the documentation dynamically 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/index.md?ask=&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.