# Product Tour ## **What Are AX App Builder Components?** **AX App Builder Components** are Lightning components that extend what you can build in Salesforce App Builder without code. They integrate directly into App Builder's component palette, giving you access to advanced UI elements—like data tables, kanban boards, maps, timelines, and more—that aren't available in standard Salesforce. Use them to create interactive pages, custom dashboards, and specialized interfaces on record pages, app pages, and home pages. All configuration happens right in App Builder, so admins can build developer-level functionality without writing code. *** ## Guided Product Tour {% @arcade/embed flowId="Mu0RJACHsYHQdlLv2pq3" url="" %} *** ## Installation Before you can access Avonni App Builder Components in Lightning App Builder, you need to install the package in your Salesforce org. {% hint style="danger" %} #### Important Requirement To successfully install the Avonni Dynamic Components Package, you [**MUST enable Lightning Web Security**](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-enable.html) in your org; otherwise, installation **WILL FAIL**. {% endhint %} Install the Components #### Install from Salesforce AppExchange 1. **Navigate to AppExchange**: Go to [Salesforce AppExchange](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840\&channel=recommended) or click the App Launcher in Salesforce and search for "AppExchange" 2. **Find Avonni Components**: Search for "**40+ App Builder - Avonni**" in the AppExchange marketplace 3. **Install the Package**: Click "Get It Now" and follow the installation prompts 4. **Choose Installation Options**: * Install for Admins Only (recommended for initial setup) * Install for All Users (after testing and configuration) 5. **Complete Installation**: Review and accept the package permissions, then click "Install" #### Learn more about the installation process *** ## Accessing Avonni Components Once the Avonni package is installed in your Salesforce org, all components become immediately available in Lightning App Builder: ### Location in App Builder * Navigate to **Setup > Lightning App Builder** * Edit any Lightning page (App, Home, or Record page) * Find all Avonni components in the **Custom Components** section of the component palette. * Components follow the naming convention: **AX - \[Component Name]** * Example: **AX - Data Table**, **AX - Kanban**, **AX - Gallery** The "AX" prefix stands for "Avonni Experience" and helps you quickly identify Avonni components among other custom components in your org
*** ## Component Categories ### Data Visualization Components [**AX -Data Table**](/app-builder-components/app-builder-components/ax-data-table.md) Transform your record lists into powerful, interactive tables with advanced filtering, inline editing, search, and export capabilities. Perfect for managing opportunities, cases, contacts, or any custom object data. *** [**AX -Kanban**](/app-builder-components/app-builder-components/ax-kanban.md) Visualize your workflows with drag-and-drop boards. Move opportunities through sales stages, manage support cases by status, or track project tasks from conception to completion. *** [**AX -List**](/app-builder-components/app-builder-components/ax-list.md) Display records in elegant card layouts with custom field mappings, filtering, and search. Ideal for browsing products, showcasing team members, or presenting any record collection. *** [**AX -Timeline**](/app-builder-components/app-builder-components/ax-timeline.md) Present chronological data with visual time groupings. Track account activities, case histories, project milestones, or any time-based business process. *** [**AX -Pivot Table**](/app-builder-components/app-builder-components/ax-pivot-table.md) Analyze data with powerful cross-tabulation capabilities. Summarize sales by region and rep, cases by priority and team, or any multi-dimensional data analysis need. *** ### Media & Content Components [**AX -Gallery**](/app-builder-components/app-builder-components/ax-gallery.md) Create stunning image and video carousels with auto-scroll, navigation controls, and customizable layouts. Showcase product images, event photos, or promotional content. *** [**AX -Image**](/app-builder-components/app-builder-components/ax-image.md) Display single images with professional cropping, sizing, and positioning options. Perfect for product shots, team photos, or branded visuals. *** [**AX -Video**](/app-builder-components/app-builder-components/ax-video.md) Embed videos from URLs, Salesforce files, YouTube, or Vimeo with full playback control and responsive sizing. *** [**AX -Audio**](/app-builder-components/app-builder-components/ax-audio.md) Integrate audio content with customizable playback controls for training materials, voicemails, or announcements. *** ### Interactive & Utility Components [**AX -Calendar**](/app-builder-components/app-builder-components/ax-calendar.md) Display events, tasks, and activities in familiar calendar, agenda, or timeline views with advanced filtering and search capabilities. *** [**AX -Map**](/app-builder-components/app-builder-components/ax-map.md) Visualize location-based data with interactive maps that support address fields or coordinates, ideal for account territories or service locations. *** [**AX -Progress Indicator**](/app-builder-components/app-builder-components/ax-progress-indicator.md) Show process stages with visual progress tracking based on picklist values—guide users through sales stages, case statuses, or project phases. *** [**AX -Metric**](/app-builder-components/app-builder-components/ax-metric.md) Display key performance indicators with aggregation functions (SUM, AVG, COUNT) and professional formatting for executive dashboards. *** [**AX -Tags**](/app-builder-components/app-builder-components/ax-tags.md) Present related records as visual tags with color coding, filtering, and optional navigation to detail pages. *** [**AX -Alert**](/app-builder-components/app-builder-components/ax-alert.md) Communicate important messages with contextual styling (error, warning, info) and optional dismissal capabilities. *** [**AX -Barcode**](/app-builder-components/app-builder-components/ax-barcode.md) Generate QR codes and barcodes for record identification, inventory tracking, or quick access links. *** ## Key Features Across All Components ### Dynamic Data References Use the `{{Record.FieldName}}` syntax to create context-aware components that automatically adapt to the current record. When viewing Account A, see data for Account A. When viewing Account B, see data for Account B. ### SOQL-Style Configuration Configure components using familiar SOQL patterns: * **Filters**: `Status = 'Active' AND OwnerId = '{{Record.OwnerId}}'` * **Field Selection**: `Name,Email,Phone,Title` (comma-separated) * **Sorting**: `CreatedDate DESC`, `Name ASC` {% hint style="warning" %} #### Important **Notice the single quotes** around the dynamic reference. This follows SOQL syntax rules, which require that text and ID values be enclosed in single quotes. The filter essentially becomes a SOQL WHERE clause, so it must follow proper SOQL formatting. {% endhint %} ### Advanced Filtering & Search Built-in capabilities include: * User-driven filter panels * Keyword search across specified fields * Pagination for large datasets * Export functionality (where applicable) *** ## Getting Started Journey ### Step 1: Learn the Basics Understand the fundamental concepts of dynamic references (`{{Record.FieldName}}`) and SOQL-style configuration patterns. Learn the Basics ### **Step 2: Join the Community** Connect with other Avonni users in our Trailblazer Community Group to see real-world examples, ask questions, and learn from experienced builders. The community is a great place to get quick answers and discover creative ways others are using components. Join the Trailblazer Community ### Step 3: Try the Quick Start Follow our hands-on Data Table example to experience the complete setup process and core concepts. Quickstart Guide ### Step 4: Explore Components Review the documentation for each component to understand its specific capabilities and configuration options. Explore Components ### Step 5: Plan Your Implementation Consider your use case to select the most appropriate components for each page. Evaluate whether App Builder Components meet your requirements, or if you need the advanced customization capabilities of Dynamic Components. App Builder VS Dynamic Components ### Step 6: Build and Test Begin with basic configurations and then gradually incorporate advanced features such as filtering, search, and custom styling. *** ## Common Implementation Patterns ### Related Record Displays Show records related to the current page: ``` Filter: AccountId = '{{Record.Id}}' // For Account-related records Filter: WhatId = '{{Record.Id}}' // For Activity-related records Filter: OwnerId = '{{Record.OwnerId}}' // For Owner-related records ``` ### Context-Aware Dashboards Create dynamic dashboards that adapt to user roles or record types: ``` Filter: OwnerId = '{{Record.OwnerId}}' AND Status = 'Open' Header Title: '{{Record.Owner.Name}}''s Open Items ``` **Ideal Components**: [Data Table](/app-builder-components/app-builder-components/ax-data-table.md) for detailed lists, [Kanban](/app-builder-components/app-builder-components/ax-kanban.md) for visual workflow management, [List](/app-builder-components/app-builder-components/ax-list.md) for card-based browsing, [Timeline](/app-builder-components/app-builder-components/ax-timeline.md) for chronological activity tracking, and [Metric](/app-builder-components/app-builder-components/ax-metric.md) components for personalized KPIs ### Process-Driven Layouts Use multiple components on the same Lightning page to support complete business processes: * **Kanban** for stage management * **Data Table** for detailed record management * **Metric** components for KPI tracking * **Timeline** for historical context ### Mobile-Responsive Design Configure components for optimal mobile experience: * Use percentage-based widths (`100%`) * Enable card containers for touch-friendly interfaces * Configure appropriate pagination limits * Test header text length on small screens *** ## Integration with Salesforce Features ### Security & Permissions * Components respect field-level security automatically * Users see only the data they have permission to access * Sharing rules are enforced at the record level ### Lightning Page Integration * Works seamlessly with Lightning App Builder * Supports all Lightning page types (App, Home, Record) * Compatible with Lightning communities and portals ### Performance Considerations * Built-in pagination prevents performance issues * Configurable limits optimize load times * Efficient SOQL generation minimizes server impact *** ## **Getting Help** ### **Community Support** Join our [**Trailblazer Community Group**](https://trailhead.salesforce.com/trailblazer-community/groups/0F9KX000000iFxO0AU?tab=discussion\&sort=LAST_MODIFIED_DATE_DESC) to connect with fellow Avonni users. Share your implementations, troubleshoot together, and learn from real-world use cases. Our team participates actively, and you'll benefit from the collective knowledge of the entire community. ### **Documentation & Tutorials** Browse our comprehensive documentation and YouTube tutorials for step-by-step guidance on every component. ### **Direct Support** Need personalized help? Contact our support team at during business hours (Monday-Friday, 8 AM - 6 PM EST). *** ## Next Steps 1. [**Start with the Quick Start Guide**](/app-builder-components/getting-started/quickstart-guide.md) to build your first component 2. [**Review the Learn the Basics page**](/app-builder-components/getting-started/understanding-the-essentials/core-concepts.md) for fundamental concepts 3. [**Explore individual component documentation**](/app-builder-components/app-builder-components/explore-all-components.md) for specific features 4. **Plan your Lightning page strategy** based on user workflows 5. **Begin with simple implementations** and gradually add complexity Transform your Salesforce experience with Avonni App Builder Components - where powerful functionality meets intuitive design. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/app-builder-components/getting-started/product-tour.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.