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
Installation
Before you can access Avonni App Builder Components in Lightning App Builder, you need to install the package in your Salesforce org.
Important Requirement
To successfully install the Avonni Dynamic Components Package, you MUST enable Lightning Web Security in your org; otherwise, installation WILL FAIL.
Install from Salesforce AppExchange
Navigate to AppExchange: Go to Salesforce AppExchange or click the App Launcher in Salesforce and search for "AppExchange"
Find Avonni Components: Search for "40+ App Builder - Avonni" in the AppExchange marketplace
Install the Package: Click "Get It Now" and follow the installation prompts
Choose Installation Options:
Install for Admins Only (recommended for initial setup)
Install for All Users (after testing and configuration)
Complete Installation: Review and accept the package permissions, then click "Install"
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
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.
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.
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.
Present chronological data with visual time groupings. Track account activities, case histories, project milestones, or any time-based business process.
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
Create stunning image and video carousels with auto-scroll, navigation controls, and customizable layouts. Showcase product images, event photos, or promotional content.
Display single images with professional cropping, sizing, and positioning options. Perfect for product shots, team photos, or branded visuals.
Embed videos from URLs, Salesforce files, YouTube, or Vimeo with full playback control and responsive sizing.
Integrate audio content with customizable playback controls for training materials, voicemails, or announcements.
Interactive & Utility Components
Display events, tasks, and activities in familiar calendar, agenda, or timeline views with advanced filtering and search capabilities.
Visualize location-based data with interactive maps that support address fields or coordinates, ideal for account territories or service locations.
Show process stages with visual progress tracking based on picklist values—guide users through sales stages, case statuses, or project phases.
Display key performance indicators with aggregation functions (SUM, AVG, COUNT) and professional formatting for executive dashboards.
Present related records as visual tags with color coding, filtering, and optional navigation to detail pages.
Communicate important messages with contextual styling (error, warning, info) and optional dismissal capabilities.
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
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.
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.
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.
Step 3: Try the Quick Start
Follow our hands-on Data Table example to experience the complete setup process and core concepts.
Step 4: Explore Components
Review the documentation for each component to understand its specific capabilities and configuration options.
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.
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:
Context-Aware Dashboards
Create dynamic dashboards that adapt to user roles or record types:
Ideal Components: Data Table for detailed lists, Kanban for visual workflow management, List for card-based browsing, Timeline for chronological activity tracking, and Metric 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 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 [email protected] during business hours (Monday-Friday, 8 AM - 6 PM EST).
Next Steps
Start with the Quick Start Guide to build your first component
Review the Learn the Basics page for fundamental concepts
Explore individual component documentation for specific features
Plan your Lightning page strategy based on user workflows
Begin with simple implementations and gradually add complexity
Transform your Salesforce experience with Avonni App Builder Components - where powerful functionality meets intuitive design.
Last updated
Was this helpful?