YouTube ChannelSchedule a CallSubscribe for Updates

Product Tour

What Are Avonni App Builder Components?

Avonni App Builder Components are a collection of advanced Lightning components designed to extend Salesforce's native capabilities. These components integrate seamlessly into Lightning App Builder, allowing you to create rich, interactive pages without custom development.

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 the Components

Install from Salesforce AppExchange

  1. Navigate to AppExchange: Go to Salesforce AppExchange or click the App Launcher in Salesforce and search for "AppExchange"

  2. Find Avonni Components: Search for "Avonni App Builder Components" 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

Data Table 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.

Kanban 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.

List 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.

Timeline Present chronological data with visual time groupings. Track account activities, case histories, project milestones, or any time-based business process.

Pivot Table 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

Gallery Create stunning image and video carousels with auto-scroll, navigation controls, and customizable layouts. Showcase product images, event photos, or promotional content.

Image Display single images with professional cropping, sizing, and positioning options. Perfect for product shots, team photos, or branded visuals.

Video Embed videos from URLs, Salesforce files, YouTube, or Vimeo with full playback control and responsive sizing.

Audio Integrate audio content with customizable playback controls for training materials, voicemails, or announcements.

Interactive & Utility Components

Calendar Display events, tasks, and activities in familiar calendar, agenda, or timeline views with advanced filtering and search capabilities.

Map Visualize location-based data with interactive maps supporting address fields or coordinates, perfect for account territories or service locations.

Progress Indicator Show process stages with visual progress tracking based on picklist values. Guide users through sales stages, case statuses, or project phases.

Metric Display key performance indicators with aggregation functions (SUM, AVG, COUNT) and professional formatting for executive dashboards.

Tags Present related records as visual tags with color coding, filtering, and optional navigation to detail pages.

Alert Communicate important messages with contextual styling (error, warning, info) and optional dismissal capabilities.

Barcode 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 where text and ID values must 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.

Learn the Basics

Step 2: Try the Quick Start

Follow our hands-on Data Table example to experience the complete setup process and core concepts.

Quickstart Guide

Step 3: Explore Components

Review individual component documentation to understand specific capabilities and configuration options.

Explore Components

Step 4: 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 5: 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 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

Next Steps

  1. Start with the Quick Start Guide to build your first component

  2. Review the Learn the Basics page for fundamental concepts

  3. Explore individual component documentation 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.

Last updated

Was this helpful?